一、CSS
1、CSS全称层叠样式表,通常有称为风格样式表。Cascading Style Sheet 也叫级联样式表。
2.CSS第一版发布时间1996年12月,2010发布CSS3.0版本,也就是现在用的CSS3.。
3.CSS使用的优势(作用):
- 内容与表现分离
- 表现统一,容易修改
- 有很多丰富的样式,使页面布局更加灵活。
- 减少网页的代码,提高浏览网速,节省网络宽带,提高代码的重用。
- 运用独立的css,有利于网页被搜索引擎收录。
4.CSS3的基本语法:
h1{
font-size:15px;
color:red;
}
注释:color,font-size是属性,red是值,合起来就是样式的声明。h1是选择器。
5.样式标签:<style>样式标签,位于<head>标签中。
6.CSS样式有三种:行内样式,内部样式,外部样式表。
行内样式:
<p style="color:red;">
这是一段文字
</p>
注释:行内样式,就是直接写在HTML标签里面。
内部样式:
<style>
p{
font-size:30px;
}
</style>
注释:内部样式写在head标签中,只能适用于原网页。
外部样式:
<link rel="stylesheet" href="css/style.css">
注释:外部样式,首先要创建文件件CSS,再去创建文件.css文件。最后在head标签里面导入上面的代码即可!
其他写法一样。
rel是在本页面使用外部样式表,type这文件样式文本,href是写的css文件的路径。
p{
color:blue;
}
这里写的是链接式外部样式,一般常用!
样式优先级:
行内样式 > 内部样式 > 外部样式
还有这个优先级遵守 就近原则, 也就是李标签越近的样式优先级别越高。
二、CSS3的选择器(常用的选择器)
1.基本选择器:标签选择器,类选择器,ID选择器
标签选择器:如h1~h6,写在标签里面。
<h1 style="font-size:15px;">标签选择器</h1>
类选择器:
.class{
font-size:15px;
color:red;
}
//注释:其中.class是类名称。font-size是属性,后面的是值。
id选择器:
#id{
font-size:20px;
}
//注释:id选择器的声明,以#号键开头,在同一个页面里面,ID属性只能设置一次。
注意:基本选择器有分优先级,ID选择器 > class类选择器 > 标签选择器 ,它们是不遵循就近原则的!
2.CSS3高级选择器:层次选择器
《1》后代选择器:
body p{
background-color:yellow;
}
//注释:后代选择器,选择的是所有的P标签,在body和p之间要用空格隔开!
《2》子代选择器:
body>p{
color:red;
}
//注释:body为父元素,p为子元素。选择的是body下面的子元素P.
《3》相邻兄弟选择器:
.active+p{
color:yellow;
}
//注释:.active和p是同辈元素,选择的是紧邻p下面的一个元素,而且只能是往后面找!
《4》通用兄弟选择器:
.active~p{
color:blue;
}
//注释:这两个都是同辈元素,选择的是所有的p元素,也即是和p同级,可以是一个,也可以是多个
3.结构伪类选择器:
body p:first-child{
}
//注释:这是指父元素下面的第一个子元素p
body p:last-child{
}
//父元素下面的最后一个子元素
body p:nth-child(n){
}
//选择父元素下面的第n个子元素p
body p:last-of-type{
}
//父元素下面的指定类型的最后一个元素
body p:first-of-type{
}
//父元素下面的指定类型的第一个元素
body p:nth-of-type(n){
}
//父元素下面的指定类型的第n个元素
注意:body p:nth-child(n)在父级元素里面从第一个元素找,部分类型,也就是只有是p元素都会找到!
body p:nth-of-type(n)在父级元素里面先看类型,在看位置,不符合类型的元素直接排除!
4.属性选择器:
p[id]{
}
//匹配属性id的p元素
p[id=val]{
}
//匹配属性id=val的p元素
p[id*=val]{
}
//匹配属性中含有class属性并且属性值中包含val的p元素
p[id^=val]{
}
//选择所有含有id属性以val开头的所有p元素
p[id$=val]{
}
//选择所有含有id属性的并且以val结尾的所有p元素