文章目录
css
概念:层叠样式表
css基本语法:
写法一:
style 内联样式表
写法二:
内部样式表
写法三:
外部样式表
在head里面写在里面写
新建文件css写,在head里面用引用进来
层叠 冲突 继承
css层叠:
同一个元素使用了不同的样式表,所有的样式进行叠加就叫做层叠
css冲突:
同一元素设置相同的属性会发生冲突,遵循就近原则选择属性值。
css继承:
在子父关系中,文本样式可以被继承,布局样式不可以被继承(块级元素继承父的宽,行级不可以)
css基本样式:
文档流的顺序:上左下右
行级标签:按照文档流的顺序依次排序
块级标签:独占一行
基本样式:
宽: width:100px;
高:height:100px;
背景颜色:backgound-color:颜色;
背景图片:background-image
注意:行级标签设置的宽高不起作用,行级标签的宽高根据内容的大小自适应。
块级标签可以设置宽高,背景颜色。
css中颜色表示:
单词表示:red,green,blue…
十六进制表示:取值范围(0~9 && a~f)
RGB三原色表示:取值范围(0~255)
CSS选择器
全局选择器(通配符选择器)
<style>{
padding:0;
margin: 0;}
</style>
标签选择器
<style>
p{
font-size:16px;
}
b{
color: coral;
}
</style>
</head>
<body>
<p>我是HTML中的段落标签</p>
<b>我是HTML中的加粗标签</b>
</body>
class类选择器
<style>
.classNamef{
color: coral;
}
class选择器用书写格式: .类名
</style>
</head>
<body>
<b>class="className">加粗标签</b>
</body>
id选择器
id名字独一无二
#ss{
background-color: blanchedalmond;
}
群组选择器
div,p{
color: aqua;
}
层次选择器
后代选择器 用空格表示
子代选择器 用>表示
相邻兄弟 用+表示 下面相邻的代码
通用兄弟 用~0表示 同级
伪类选择器
状态伪类 a 四个顺序不能变
link 默认情况下的状态
visited 访问过后的状态
hover 鼠标悬浮时的状态
active鼠标点击时的状态
结构伪类:
ul li:Nth-child(5){属性}
nth-child() 元素的第 n 个相同元素