css的作用
添加页面样式,美化页面
css的引入方式
行间样式、内嵌样式、外链样式
css选择器
基础选择器
ID选择器:#
权重:100
类选择器:.
权重:10
元素选择器:div
权重:1
通配符选择器:*
权重:0
css复合选择器
后代选择器 ul li
子元素选择器 ul>li
交集选择器 li.red
选中即是li元素,又带有red类名的元素
并集选择器 div, ul, .red
同时选中这三个元素
伪类选择器 :hover
链接伪类选择器
a:link
未访问的链接
a:visited
已访问的链接
a:hover
鼠标移动到链接上
a:active
选定的链接
css字体样式属性
font-size
字体大小
font-family
字体类型
font-weight
字体粗细
font-style
字体风格
font
复合属性,以上属性可以同时写入
css外观属性
属性 | 表示 | 注意点 |
---|---|---|
color | 颜色 | 我们通常用 十六进制 比如 而且是简写形式 #fff |
line-height | 行高 | 控制行与行之间的距离 |
text-align | 水平对齐 | 可以设定文字水平的对齐方式 |
text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
text-decoration | 文本修饰 | 记住 添加 下划线 underline 取消下划线 none |
标签显示模式 display
块级元素:display: black;
独占一行,可指定宽高,默认宽度等于父级
行级元素:display: inline;
同行排列,宽高由内容撑开,不可直接指定
行级块元素:display: inline-black;
同行排列且可以指定宽高
元素的隐藏:display:none;
可以用display: black;
显示元素
块级元素可以包含行内元素,行内元素不可包含块级元素
块级标签:
div
h1-h6
ul
ol
li
行级标签:
span
a
strong
em
del
元素的显示模式可以通过
display
属性相互转换
行高样式 line-height
应用较多的是单行文本居中 line-height: 容器的高度;
背景样式 background
background-color: 颜色值;
默认是透明色:transparent
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
background-image | 背景图片 | url(图片路径) |
background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
background-position | 背景位置 | length/position 分别是x 和 y坐标, 切记 如果有 精确数值单位,则必须按照先X 后Y 的写法 |
background-attachment | 背景固定还是滚动 | scroll/fixed |
背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |
CSS三大特性
css成叠性
-
概念:
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
-
原则:
- 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
- 样式不冲突,不会层叠
css继承性
-
概念:
子标签会继承父标签的某些样式,如文本颜色和字号。
想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解就是: 子承父业。
- 注意:
- 恰当地使用继承可以简化代码,降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承过来