CSS
初识 css
css 全称 Cascading Style Sheets,层叠样式表
修饰网页样式并不是只有 css,当时有个强力竞争对手 svg,但是css的层叠性让它脱颖而出
目前 css3 只是某些模块升级到3,不是全部,有些模块已经升级到4了
官方文档
https://www.w3.org/TR/CSS22/propidx.html
中文文档
https://developer.mozilla.org/zh-CN/docs/Web/CSS
查看 css 属性可用性
css 属性变成标准 standard需要经过草稿 drafts、备选推荐、推荐这几个步骤;
谷歌一般会在草稿里看看哪些属性好不好用,好用就支持,而别的浏览器可能不怎么做 ;
所以有时 css 有些属性出现兼容性问题
css 引入
html 三种引入 css:
- 内联样式
- 文档样式表
- 外部样式表
现代开发网页要结构与样式分离
外部样式表引入
- link 元素
- style 元素里@import
<style>
@import url();
</style>
link 效率高一点
css 引入 css
@import url();
css 文件编码
指定单个 css 文件编码
@charset "utf-8";
选择器
- 通配选择器
- 元素选择器
- 类选择器
- id 选择器
- 属性选 择器
- 组合
- 伪类
- 伪元素
通配选择器
通用属性的设置,比如
{
margin: 0;
padding: 0;
}
通配符 * ,但是一般列出需要使用这些通用属性的元素,因为*内部原理是在网页元素中做个遍历,给每个元素加上这些样式,这样可能影响网页运行效率,因为有些元素是不需要这些属性的
id 选择器
id 名一个页面只能有一个(规范)
类选择器
- 一个元素可以多个类选择器,空格分开
<h2 class="title">123</h2>
.title {
}
伪类选择器
动态伪类
- :link (a:link 未访问的链接)
- :visited (a:visited 已访问的链接)
- :focus (获取焦点时)
- :hover (a:hover 鼠标移动到)
- :active (a:active 点击未松手)
同时存在以上属性时,推荐这个顺序,不然会有很多问题
(女朋友看到lv包包后,haha 大笑)
:hover 和:active 也可以应用到其它元素上
应用
去掉 a 元素的焦点状态
a:focus {
outline: none;
}
或者
<a tabindex="-1"></a>
tabindex 可以调整 tab 选中元素的顺序
结构伪类
- :nth-child() 正着数
- :nth-last-child() 倒着数
- :nth-of-type() (例子:p:nth-of-type(2) 只数 p 元素,且是第 2 个子元素)
- :nth-last-of-type()
- :first-child
- :last-child
- :first-of-type
- :last-of-type
- :root 代表 html
- :only-child(父元素中唯一子元素)
- :only-of-type
- :empty
否定伪类
- :not()
除了()
目标伪类
- :target 用于锚点链接
属性选择器
<style>
[title] {
color: red;
}
</style>
<div title="div">123</div>
<p title="p">111</p>
div 和 p都有title 属性,其它属性同理