初识CSS
一.概述
css指层叠样式表(Cascading Style Sheets)
- 写在标签里 style 内联样式表
- 写在头部标签里 内部样式
- 写在一个单独的css文件 外部样式
-------内联样式表--------
<h1 color="red" styple="background- color:red;"></h1>
-------内部样式----------
<style type="text/css">
h1{
background-color:red;
}
</style>
--------外部样式----------
html<link rel="stylesheet" herf="./xx.css">
css @import url('./xx.css')
层叠:同一元素用多种样式,写不同的属性层叠
冲突:同一元素用多种样式,写相同的属性冲突(就近原则)
继承:在子父关系中,文本样式可以继承,布局样式不能被继承(块级元素可以继承宽),
注意:
- html 属性和属性值用=拼接
- css 属性和属性值用: 拼接
补充:
颜色color:
- 英文字母
- 十六进制
- RGB (0255,0255,0~255)
- RGBA (0255,0255,0255,01)
css样式表优先级:
- 就近原则
相同样式优先级:
当设置相同样式时,后面的优先级较高。
但不建议重复设置样式的情况。 - 内部与外部样式
内部样式与外部样式优先级相同,如果相同样式,那后写的样式优先级高 - 单一样式优先级
style行间>id>class>tag>*>继承
二.选择器
标签选择器
标签{属性:值;属性:值;}
全局选择器
*{属性:值;属性:值;}
class选择器
在标签里加class属性,值可以多个相同
.class{属性:值;属性:值;}
id选择器
ID属性不要以数字开头
在标签里加id属性,值是独一无二的
#id{属性:值;属性:值;}
群组选择器
用逗号隔开
标签,标签{属性:值;属性:值;}
层次选择器
父子关系必须是父包含子
-
子代选择器
- ol > li{属性:值;属性:值;}
-
后代选择器
- ol li{属性:值;属性:值;}
-
相邻选择器
- ol+a{属性:值;属性:值;}相邻向下
-
通用兄弟选择器
- ol>li~a{属性:值;属性:值;}同级向下
伪类选择器
a标签使用
- ui伪类
:link默认
:visited访问后
:hover鼠标悬浮
:active鼠标按下
- 结构伪类
:nth-child(第几个)