目录
1.初识css
1.1 CSS的定义
Cascading Style Sheet 级联样式表
表现为HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
若将HTML比做人的骨架,那么CSS就是皮肤,在骨架的架构上进行修饰美化。
CSS文件后缀名就是.css
1.2 CSS的发展史
自CSS 3.0推出至今依然在沿用
1.3 CSS的优势
- 内容与表现分离
- 网页的表现统一,容易修改
- 丰富的样式,使得页面布局更加灵活
- 减少网页的代码量,增加网页的浏览速度,节省网络带宽
- 运用独立于页面的CSS,有利于网页被搜索引擎收录
1.4 CSS语法
选择器{
属性名1:属性值;
属性名2:属性值;
}
特点1:选择器包含基本选择器和高级选择器,用来获取html元素
特点2:{}代表语法体,用来存放css代码
特点3:属性名一般是CSS中的语法
特点4:属性值一般是属性的内容或范围
特点5:“;”基于W3C标准不建议省略
例如:对h1标题修饰字体颜色绿色,字体大小10px
h1{
color:green;
font-size:10px;
}
1.5 style标签
<style type="text/css">
<--这里写css代码-->
</style>
特点1:使CSS的代码在网页中生效
特点2:type=”text/css”代表告诉浏览器当前style标签中的代码是css代码(CSS生效)
1.6 引入(使用)CSS的3种方式
1.6.1 行内样式
在HTML标签行中引入style属性,并对属性名设置属性值,或者对多个属性名设置多个属性值
<p style="background: blanchedalmond;color: #000;">我的中国</p>
1.6.2 内部样式表
在head标签中引入<style>标签,type = “text/css”代表告诉浏览器style标签中的是css代码。
<style type="text/css">
p{
background-color: aqua;
}
</style>
<p>ok</p>
1.6.3 外部样式表
1:利用link标签
2:rel=“stylesheet”代表使用的是外部样式表
3:type=”text/css”告诉浏览器文件中的代码是css代码
4:href=“css/indexcss.css“代表当前html页面引入的是css文件夹路径下的indexcss.css文件
5:css代码写在css文件夹路径下的indexcss.css文件
<link rel="stylesheet" href="css/indexcss.css" type="text/css"/>
1.6.4 CSS样式优先级
(1)行内样式>内部样式表>外部样式表
(2)就近原则(离HTML越近,生效的可能性越大)
一般来说是就近原则,但是不绝对,例如你同时写了行内样式和内部样式,这时优先生效行内样式,但是同时内部样式的设置可能也会部分生效,最终呈现出四不像。
2.基本选择器
2.1 标签选择器
标签选择器以某一标签名命名,对页面内所有该标签元素生效
例如:对p标签设置字体颜色为绿色,则页面内所有p标签内内容字体颜色为绿色
2.2 类选择器
2.3 ID选择器
特点1:在html中定义id属性
特点2:在css中定义#id属性值
3.高级选择器
一般来说这方面的内容不用全部掌握,或者说压根无法全部学完,就像新华字典,我们不可能去牢记每一个字,也没必要,这里介绍一些常用的选择器。
3.1 层次选择器
3.1.1 后代选择器
用法:div p{ }
3.1.2 子选择器
用法:div>p{ }
3.1.3 相邻兄弟选择器
用法:div+P{ }
3.1.4 通用兄弟选择器
定义:选择所有的紧接着div元素后面的p元素
如:div~p{
background: lightyellow;
}
3.2 结构伪类选择器
特点1:常用的结构伪类选择器的种类:first-child last-child
特点2:匹配某个元素的父元素的第一个或最后一个某元素
特点3:利用特殊字符冒号:模拟类选择器的作用实现第一个或是最后一个的元素标签
3.3 属性选择器
3.3.1 E[attr]
定义:选择匹配具有属性attr的E元素
3.3.2 E[attr=val]
定义:选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
3.3.3 E[attr^=val]
定义:选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串
3.3.4 E[attr$=val]
定义:选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串
3.3.5 E[attr*=val]
选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配