8月6日学习心得

十六、CSS
1.CSS：层叠样式表，用来修饰文档的语言，让文档已以优雅的方式呈现给用户。
为了把结构和样式进行分离，提高工作效率。
1996年12月，第一份正式标准完成。
1998年5月，CSS规范第二版
1999年开始修订，2001年完成了CSS3工作草案。
2.CSS工作原理
HTML文件-解析HTML文件-转化成DOM
↓ ↑ 将样式加到文档里
加载CSS – 解析CSS文件
3.CSS声明
给特定的属性设定特定的值。（CSS核心功能）
属性和值对大小写敏感。（和HTML标签区分）
属性名和属性值通过:（英文）分割。
属性与属性之间通过;(英文)分割。
4.CSS声明块
将多个CSS声明写在一起，声明与声明之间通过;分割
使用{}将多个声明括起来，形成一个声明块。
div {
background-color:black;
border:1px solid black;
}
5.CSS选择器
CSS声明块前添加选择器，用来指明将声明块用在哪些元素上。
6.CSS可读性
可以加换行让代码更美观，可读性更高。
速记写法：border:1px solid black;
padding(内边距):10px; = padding-top :10px;
padding-right :10px;
padding-bottom :10px;
padding-left :10px;
padding:10px 20px 30px 40px;顺序：上右下左
margin(外边距)：同上
7.CSS的应用
HTML文档如何使用CSS
1.外部样式表
新建 .css后缀文件
在HTML内head通过link引入

或
嵌套选择器
div.myDIV
属性选择器
[title=div2] {
color: orange;
}
[title^=di] {
color: purple;
}
/属性包含title，属性值以di开头/
[title*=diV] {
color: red;
}
/属性包含title，属性包含diV，模糊匹配，只要有这个字符串就行/
[title$=div] {
color: pink;
}
/属性包含title，属性值以div结尾/
[title~=d] {
color: green;
}
/属性包含title，属性包含d,必须是目标字符串/
伪类选择器
以:开头，用于其他选择器之后，指明元素在某种状态下才能被选中。
元素状态相关的伪类选择器
:hover 光标悬停
:link a标签未被访问的状态
:visited a标签已被访问的状态
:active a标签活动时的状态
:focus a标签聚焦时的状态
:checked 按钮被选中时的状态
:default 默认选中
:enable 表单项可用时的状态
:disabled 表单项禁用时的状态
:valid 通过表单验证
:invalid 不通过表单验证
:required 必填项
:option 选填项
:in-range 在范围内
:out-range 不在范围内
伪元素选择器
"::"开头，用在其他选择器之后。
::after 选中之后的不存在的节点，结合content添加内容
::before 选中之前的不存在的节点，结合content添加内容
::first-letter
::first-line
::selection