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 和行高设置为一样的话,对于会超出框框的字体来说,可能会不同行的字体会出现重叠的情况
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/754066d3f7eb453695e70e189d281b39.png#pic_center)
文本 |
描述 |
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 设置完了没有效果 |