【学习笔记】CSS

1、 基础篇

      1.1、选择器

基础选择器	类型	描述
*	通配选择器	选择所有标签
.class	类选择器
#id	ID 选择器
tag	元素选择器	选择所有 tag 标签 tag1,tag2：选择所有 tag1、tag2 标签

子代选择器	描述
tag1 tag2	选择所有 tag1 标签内部的所有 tag2 标签（直系关系）
tag1>tag2	选择所有 tag1 标签的所有 tag2 直接子标签（父子关系）

兄弟选择器	描述
tag1+tag2	选择所有 tag1 标签之后紧接的一个 tag2 标签（兄弟关系）
tag1~tag2	选择位于所有 tag1 标签之后的所有 tag2 兄弟标签（兄弟关系）

属性选择器	描述
[attr]	选择带有 attr 属性的所有标签
tag[attr]	选择带有 attr 属性的所有 tag 标签
tag[attr=value]	选择 attr 属性为 value 的所有 tag 标签
tag[attr^=value]	选择 attr 属性以 value 开头的所有 tag 标签
tag[attr$=value]	选择 attr 属性以 value 结尾的所有 tag 标签
tag[attr*=value]	选择 attr 属性包含 value 子串的所有 tag 标签
tag[attr~=value]	选择 attr 属性包含 value 单词的所有 tag 标签
tag[attr|=value]	选择 attr 属性为 value 的所有 tag 标签 或者 选择 attr 属性以 value- 开头的所有 tag 标签（注意value后有一个连接字符）

      1.2、长度单位

长度	描述
mm	毫米
cm	厘米
px	显示器的一个像素单位
em	值*当前元素的 font-size（没有的话就一直往上级找 font-size，最后还是没有的话就采用默认的 font-size 大小）
rem	值*根元素的 font-size（没有设置的话就采用默认的 font-size 大小）
百分比	父元素长宽的百分比

      1.3、CSS2 常用属性

颜色	描述	示例
颜色名		teal
rgb	rgb（红，绿，蓝）
HEX / HEXA	#红绿蓝 / #红绿蓝透明度	#FF998866（可以简写为 #F986）

字体	描述	描述
font-size	字体大小	示例：font-size:12px
font-family	字体族	示例：font-family:“Segoe Script”,“微软雅黑”
font-style	字体风格	示例：font-style:italic（斜体）
font-weight	字体粗细	属性值：lighter / normal / bold / bolder / 数值（不带单位）
font	复合属性	属性值的顺序：其他属性 大小 字体族（以空格分隔）

TIP
1、font-weight 一般只有 lighter、normal、bold，一些字体会有 bolder；如果使用数值来表示粗细的话， lighter、normal、bold、bolder会对应一个范围的数值，例如小于等于 300 的粗细都跟 lighter 一样，而不是说 100 就会比 200 小
2、font 的属性值最后两位必须是大小、字体族，而其余的例如风格、粗细在前头是可以乱序的
3、<em>...</em>自带斜体效果
4、font-size:xxx 其实是指一个长度为 xxx 的框框，而字体在设计的时候不一定是设计在这个框框的正中央，有可能偏上、偏下、甚至是超出，这个框框只是用于限定一个字符大概的范围。因此如果 font-size 和行高设置为一样的话，对于会超出框框的字体来说，可能会不同行的字体会出现重叠的情况

文本	描述
color	字体颜色
background-color	背景颜色
letter-spacing	字母/汉字间距（单位：px）
word-spacing	单词间距（前后为空的视为一个单词）（单位：px）
text-decoration	文本修饰，接收三个属性：类别、样式、颜色（可以乱序） 类别 —— overline：上划线，underline:下划线，line-through：删除线 样式 —— dotted：虚线，wavy：波浪线
text-indent	缩进，单位是 px，设置为字体大小的两倍，就相当于首行缩进两个空格
text-align	文本对齐 left：左对其，center：居中，right：右对其
line-height	行高，line-height 一般要设置比 font-size 更大一些 normal：浏览器会自动调整，保证在最紧凑的情况下，不会出现不同行的字体发生重叠的情况
vertical-align	非块级子元素的垂直方向对齐方式 top：顶部对其，bottom：底部对齐，baseline：基线对齐（默认）

TIP
1、text-decoration:none 可用于去掉超链接的下划线
2、<ins>...</ins>自带下划线、<del>...</del>自带删除线
3、line-height 的值是一个不带单位的数时，相当于 数值 * font-size，例如 line-height:1 相当于 line-height 与 font-size 一样大，因此一般写数值的话可以控制在 1.5 ~ 2 之间
4、tr 标签中的 valign 属性用于控制其文本的垂直方向对齐方式，top：顶部对齐，bottom：底部对齐，middler：居中对齐

列表	描述
list-style-type	列表符号的类型 none：不要符号，square：小方块，lower-roman：小写罗马数字，upper-roman：大写罗马数字，decimal：数字
list-style-position	列表符号的位置 inside：列表符号跟文本是一体的，outside：列表符号跟文本不是一体的（给 li 标签加个背景颜色可以看出区别）
list-style-image	自定义列表符号
list-style	符合属性，可以乱序

边框	描述
border-width	边框宽度
border-color	边框颜色
border-style	边框样式 solid：实现，dashed：虚线，dotted：点线，double：双实线
border	符合属性，可以乱序

TIP：border-width、border-color、border-style 要同时设置样式效果才能出来

表格	描述
table-layout	控制列宽 auto：根据列的内容调整，不同列宽度可能不同，fixed：根据全局进行跳转，所有列的宽度相同
border-spacing	控制单元格间距
empty-cells	隐藏没有内容的单元格边框 show：显示，hide：隐藏
border-collapse	合并相邻的单元格的边框（不是合并单元格） separate：不合并，collapse：合并（这会让 table-spacing、empty-cells 失效）
caption-side	设置 thead 标签的位置 top：顶部（默认），bottom：底部

背景	描述
background-color	背景颜色，默认是transparent（透明）
background-image	背景图片（太小的话，默认是填充）
background-repeat	背景图片的适应模式 repeat：填充，repeat-x：水平填充，repeat-y：垂直填充，no-repeat：原模原样
background-position	背景图片的位置 left top：左上角对齐，right bottom：右下角对齐，center center：居中对齐，10px 20px：距左10px、距顶20px
background	符合属性，可以乱序

鼠标	描述
cursor	鼠标样式 pointer：小手，move：移动，wait：等待，url(...),pointer：自定义

溢出	描述
overflow	溢出的处理方式 hidden：隐藏，visible：显示（默认），scroll：滚动条，auto：自动
overflow-x	横向上的溢出处理方式
overflow-y	纵向上的溢出处理方式

隐藏	描述
display	隐藏 none：不占位隐藏
visibility	隐藏 show：显示（默认），hidden：占位隐藏

      1.4、盒模型

display 声明盒模型	描述
block	块元素
inline-block	行内块元素
inline	行内元素

元素的显示模式	描述	注意点
块元素/块级元素	宽度拉满独占一行，高度默认由内容撑开，可以自行设置
行内元素/内联元素	不独占一行，宽高由内容决定，不能自行设置
行内块元素	不独占一行，宽高默认由内容决定，可以自行设置	行内元素的左右 margin 可以设置，上下 margin 设置完了没有效果