引入方式 | 书写位置 | 作用范围 | 使用场景 |
---|---|---|---|
内嵌式 | CSS写在style标签中。style标签通常放在head中 | 当前页面 | 小案例 |
外联式 | CSS写在单独的CSS文件中,通过link标签引入 | 多个页面 | 项目中 |
行内式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
注意点:
注意点:
*
{ css属性名: 属性值; }注意点:默认去除浏览器自带属性margin和padding
注意点:
属性 | 说明 |
---|---|
[attribute] | 选择多有带 attribute 属性的元素 |
[attribute=value] | 选择 attribute=value 的所有元素 |
[attribute~=value] | 选择 attribute 属性包含单词 value 的所有元素 |
[attribute^=value] | 选择其attribute属性值以value 开头的所有元素 |
[attribute$=value] | 选择其attribute属性值以 value 结束的所有元素 |
[attribute*=value] | 选择其attribute属性中包含value 子串的每个元素 |
注意点:
选择器 | 作用 | 格式 | 示例 |
---|---|---|---|
后代选择器 | 找后代 | 选择器之间通过空格分隔 | .father .son { css } |
子代选择器 | 找儿子 | 选择器之间通过 > 分隔 |
.father > .son { css } |
并集选择器 | 找到多类元素 | 选择器之间通过, 分隔 |
div,p,span { css } |
交集选择器 | 找同时满足多个选择器的元素 | 选择器之间紧挨着 | p.red { css } |
兄弟选择器 | 匹配p标签后的所有span元素 | 选择器之间通过 ~ 分隔 |
p ~ span |
相邻选择器 | 匹配p标签的第一个span元素 | 选择器之间通过 + 分隔 |
p + span |
伪类:将特殊的效果添加到特定的选择器上,不会产生新元素
选择器 | 功能描述 |
---|---|
E:first-child | 作为父元素的第一个子元素的元素E |
E:last-child | 作为父元素的最后一个子元素的元素E |
E:nth-child(n) | 作为父元素的第n个子元素E |
E:nth-last-child(n) | 选择父元素的倒数第n个子元素 |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type | 选择父元素内具有指定类型的最后一个元素 |
E:nth-of-type(n) | 选择父元素内具有指定类型的第n个E元素 |
E:nth-last-of-type | 选择父元素内具有指定类型的倒数第n个E元素 |
E:root | 选择匹配元素E所在文档的根元素,也就是html |
E:only-child | 选择父元素只包含一个子元素,且该子元素匹配E元素 |
E:only-of-type | 选择父元素只包含一个同类型的子元素,且该子元素匹配E元素 |
E:empty | 选择没有子元素的元素,且该元素也不包含任何文本节点 |
E:link | 选择所有未被访问的链接 |
E:active | 选择活动状态的a链接元素 |
E:visited | 选择已经访问过的元素 |
E:hover | 选择鼠标悬停状态的元素 |
E:checked | 选择 的元素 |
伪元素:在内容元素的前后插入额外的元素或样式,这些元素不在html文档中生成,只在外部可见。
选择器 | 功能描述 |
---|---|
::before | 创建一个伪元素放在选中元素前 |
::after | 创建一个伪元素放在选中元素后 |
::first-letter | 选各种元素第一行第一个字母 |
::first-line | 选中元素的第一行 |
::selection | 选中鼠标点击拖动选中的高亮部分 |
属性名 | 样式 | 属性值 |
---|---|---|
font-size | 字体大小 | 数组+px |
font-weight | 字体粗细 | 正常:normal或数字400; 加粗:bold或数字700 |
font-style | 是否倾斜 | 正常(默认值):normal; 倾斜:italic |
font-family | 字体系列 | sans-serif(无衬线字体); serif(衬线字体); monospace(等宽字体) |
font | 字体连写 | style weight size family |
属性名 | 样式 | 属性值 |
---|---|---|
text-indent | 文本缩进 | 数字+px; 数字+em(推荐:1em = 当前标签的font-size的大小) |
text-align | 对齐方式 | left: 左对齐; center: 居中对齐; right: 右对齐 |
text-decoration | 文本修饰 | underline: 下划线; line-through: 删除线; overline: 上划线; none: 无装饰线 |
line-height | 文本行高 | 数字+px; 倍数(当前标签font-size的倍数) |
属性名:background-color
属性值:
颜色取值 | 示例 |
---|---|
关键字 | red、green、yellow等 |
rgb表示法 | rgb(255,255,255) |
rgba表示法 | rgba(255,255,255,1) |
十六进制 | #ffffff; |
注意点:
属性名:background-image
属性值:background-image: url(‘图片的路径’)
注意点:
属性名:background-repeat
属性值:
取值 | 效果 |
---|---|
repeat | (默认值)水平和垂直方向都平铺 |
no-repeat | 不平铺 |
repeat-x | 沿水平方向(x轴)平铺 |
repeat-y | 沿垂直方向(y轴)平铺 |
属性名:background-position
属性值:background-position: 水平方向位置 垂直方向位置
属性:display: block
特点:
代表标签:
属性:display: inline
特点:
代表标签:
属性:display: inline-block
特点:
代表标签:
特点:子元素有默认继承父元素样式的特点(子承父业)
继承属性:
应用场景:
继承失效情况:被浏览器默认样式给覆盖了
特性:
选择器 | 示例 | 权重值 |
---|---|---|
!important | background-color: #fff !important; | 正无穷 |
内联选择器 | 样式作用元素 |
1000 |
ID选择器 | #id | 100 |
类选择器、属性选择器、伪类选择器 | .class | 10 |
标签选择器、伪元素选择器 | div、p | 1 |
通配符选择器 | * |
0 |
继承属性 |
|
-1 |
说明
盒子的概念:
盒子模型:CSS中规定盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成
作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性:width / height
常见取值:数字 + px
作用:设置边框粗细、边框样式、边框颜色效果
属性:
作用 | 属性名 | 属性值 |
---|---|---|
边框粗细 | border-width | 数字 + px |
边框样式 | border-style | 实线 solid 、虚线 dashed 、点线 dotted |
边框颜色 | border-color | 颜色取值 |
边框连写形式:边框粗细 边框样式 边框颜色
例如:border: 1px solid #333;
单方向设置:border-方位名词: 1px solid red;
作用:设置边框与内容区域之间的距离
属性名:padding
常见取值:
取值 | 示例 | 含义 |
---|---|---|
一个值 | padding: 10px; | 上下左右都设置为10px |
两个值 | padding: 10px 20px; | 上下设置为10px、左右设置为20px |
三个值 | padding: 10px 20px 30px | 上设置为10px、左右设置为20px、下设置为30px |
四个值 | padding: 10px 20px 30px 40px | 上设置为10px、右设置为20px、下设置为30px、左设置为40px |
单方向设置:padding-方位名词: 10px;
作用:设置边框以外,盒子与盒子之间的距离
属性名:margin
常见取值:
取值 | 示例 | 含义 |
---|---|---|
一个值 | padding: 10px; | 上下左右都设置为10px |
两个值 | padding: 10px 20px; | 上下设置为10px、左右设置为20px |
三个值 | padding: 10px 20px 30px | 上设置为10px、左右设置为20px、下设置为30px |
四个值 | padding: 10px 20px 30px 40px | 上设置为10px、右设置为20px、下设置为30px、左设置为40px |
单方向设置:margin-方位名词: 10px;
问题:当盒子被border和padding撑大后,如何解决?
场景:互相嵌套和块级元素,子元素的magin-top会作用在父元素上
结果:导致父元素一起往下移动,引起父元素塌陷
解决方式:
常用清除浮动和父元素塌陷伪类:
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
标准流:又称文档流,是浏览器在渲染元素时默认采用的一套排版规则,规定了该以何种方式排列元素
排版规则:
注意点:浮动元素不能通过父元素设置text-align:center;或本身设置margin: 0 auto;让浮动元素本身水平居中
属性:float
影响:子元素设置浮动,此时子元素脱离标准流无法撑开父元素,会影响页面其他元素的布局
基本写法:
.clearfix::after {
content: "";
display: block;
clear: both;
}
补充写法:
.clearfix::after {
content: "";
display: block;
clear: both;
/* 在网页中看不到伪元素 */
height: 0;
visibility: hidden;
}
双伪元素清除法
.clearfix::before,
.clearfix::after {
content: “”;
display: table;
}
.clearfix::after {
clear: both;
}
属性名:position
定位方式:
定位方式 | 属性值 | 相对于谁移动 | 是否占位置 |
---|---|---|---|
静态定位 | static | 不能通过方位属性移动 | 占位置 |
相对定位 | relative | 相对于自己原来的位置 | 占位置 |
绝对定位 | absolute | 相对于最近的且有定位的祖先元素移动 | 不占位置(脱标) |
固定定位 | fixed | 相对于浏览器可视区域 | 不占位置(脱标) |
方向 | 属性名 | 属性值 | 含义 |
---|---|---|---|
水平 | left | 数字+px | 距离左边的距离 |
水平 | right | 数字+px | 距离右边的距离 |
垂直 | top | 数字+px | 距离上边的距离 |
垂直 | bottom | 数字+px | 距离下边的距离 |
介绍:静态定位是默认值,就是标准流,不能通过方位属性进行移动
代码:position: static;
介绍:相对于之前的位置进行位移
代码:position: relative;
特点:
应用场景:
介绍:相对于之前的位置进行位移
代码:position: absolute;
特点:
应用场景:
配合相对定位(子绝父相)
水平垂直居中