1.CSS的概念
CSS:层叠表样式
页面中可能会有大量的元素(标签)需要去设置相同的样式,每个元素身上单独设置样式,造成大量的代码有冗余,降低开发效率。为了解决这个问题我们在页面中来批量设置样式,因此引出一门技术——CSS(批量来选中元素(标签),再设置样式)
div+CSS 方式定义网页结构,目前主流的网页开发方式
div:盒子模型,在使用table标签来布局页面时比较复杂且不灵活,引入盒子模型,就可以进行灵活的布局,可以满足页面多样的需求
2.常见的容器标签:div、p、span
< div>块级元素 一个元素占一行
< p> 块级元素 一个元素占一行
< span>行内元素
3.CSS的四种引入方式
方式一:在标签身上设置style属性来设置样式,只对当前标签生效
<div style="color: #DDD; background-color: #AAAFFF;">一个div</div>
方式二:通过< style>定义样式,可以在html的< head>标签中定义< style>标签,在其中为当前页面设定样式。
<head>
<style type="text/css">
div{color: red;
}
</style>
</head>
方式三:引入外部样式文件。可以在html的< head>标签中定义< link>标签,引入外部的css文件来修饰当前页面。
<link rel="stylesheet" href="1.css"></link>
方式四:可以通过@import url(xxx.css) 在css的内部引入一个css文件中定义的css样式片段。可以实现css代码的引入从而实现css代码的复用。
<head>
<style>
@import url(1.css);
</style>
</head>
4.CSS选择器:基本选择器、扩展选择器
基本选择器
1)id选择器:#id{}
#div1{
color:"red"
}
<div id="div1">一个div</div>
2)类选择器:.类名{}
.div{
color:#111AAA;
}
<div class=”div”>一个div</div>
3)标签选择器(通过html标签的名字来选择标签的选择器):标签名{}
div{
color:red;
}
扩展选择器
1)后代元素选择器
选择父元素中的后代元素.
父元素选择器后代元素选择器{}
div span{}
选择div中所有的元素名span
2)子元素选择器
选择父元素中的子元素.
父元素选择器> 子元素的选择器{}
div>span{}
只能选择到儿子级别
3)相邻兄弟选择器
选择选择器选择到的元素的相邻的兄弟元素
选择器+兄弟元素名{}
div+span{}
只能选择下一个相邻的兄弟元素来设置样式
4)属性选择器
选择具有指定属性,或指定属性的值等与指定值的选择器.
选择器[属性名]{}选择div中有name属性的这些div
div[name]{}
选择器[属性名=‘属性值’]{}选择div中name属性值为"d"的div
div[name="d"]{}
5)分组选择器(多元素选择器)
将多个选择器的选择结果进行一个或 的操作.
选择器1,选择器2,…{}
#div,.class1,div+span{}
把多个选择器用,隔开,可以进行多样的选择
6)伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
:link 未点击的状态
注:在不设置visited状态时active生效,否则会出现visited覆盖active效果
:visited 被点击过的状态
:hover 鼠标移动到元素之上但是仍然未点击的状态
:active 被鼠标点击着的状态
注意:
1.距离标签越近的CSS代码优先生效(就近原则)
2.当CSS代码设置的越具体越优先生效