一、什么是CSS
1.CSS的概念
- Cascading Style Sheet 级联样式表
- 表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
2.CSS的优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
二、CSS的基本语法结构
1.语法
/*
选择器 {
声明1;
声明2;
…… }
*/
h1 {
font-size: 12px;
color: #F00;
}
CSS语法规则
2.style标签
- <style></style>标签是包裹在<head></head>标签中
<style type="text/css">
/*
选择器 {
声明1;
声明2;
…… }
*/
h1 {
font-size: 12px;
color: #F00;
}
</style>
三、HTML中引入CSS样式
1.行内样式
- 在标签里使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2.内部样式表
- CSS代码写在<head>的<style>标签中
<style>
h1{color: green; }
</style>
- 优点：方便在同页面中修改样式
- 缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
3.外部样式表
3.1 SS代码保存在扩展名为.css的样式表中
3.2 HTML文件引用扩展名为.css的样式表，有两种方式 链接式和导入式
- 链接式
<head>
<!--
href 填写css文件路径
rel 表示使用外部样式表
type 为文件类型
-->
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
- 导入式
<head>
<style type="text/css">
<!--
url 填写css文件路径
-->
@import url("style.css");
</style>
</head>
3.3 链接式与导入式的区别
- <link/>标签属于XHTML，@import是属于CSS2.1
- 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
4.CSS样式优先级
- 首先根据标签设置的权重来排序优先级
- 其次根据就近原则排序优先级
一般情况下优先级为：行内样式>内部样式表>外部样式表
四、CSS3基本选择器
1.标签选择器
-
根据标签名称来进行选择
标签选择器语法
2.类选择器
-
根据标签设置的类名class来进行选择
类选择器语法
.hname{
color: red;
}
html标签中定义类名的写法
<h1 class="hname">CSS的语法结构</h1>
3.ID选择器
- 根据标签定义的id值来进行选择
<h2 id="hid">id选择器</h2>
id选择器语法
/* 选择ID是前面用# */
#hid{
font-size: 20px;
}
4.区别
- 标签选择器直接应用于HTML标签
- 类选择器可在页面中多次使用
- ID选择器在同一个页面中只能使用一次
5.基本选择器的优先级
ID选择器>类选择器>标签选择器
五、CSS的高级选择器
1.层次选择器
层次选择器
1.1 后代选择器
/*
表示选中body下所有的p标签
*/
body p{
background: red;
}
结构图以及呈现图
- 注意：后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
1.2 子选择器
/*
表示选中只属于body标签下一级的子标签p
*/
body>p{
background: pink;
}
子选择器呈现图
1.3 相邻兄弟选择器
/*
表示只选择类名为active的标签相邻的兄弟标签p
*/
.active+p{
background: green;
}
相邻兄弟选择器呈现图
1.4 通用兄弟选择器
/*
表示只选择类名为active的标签后面所有的兄弟标签p
*/
.active~p{
background: green;
}
通用兄弟选择器呈现图
2.结构伪类选择器
结构伪类选择器
-
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点：
E F:nth-child(n)在父级里从一个元素开始查找，不分类型。E F:nth-of-type(n)在父级里先看类型，再看位置。 -
代码呈现
.ul li:first-child{ background: red;} ul li:last-child{ background: green;} p:nth-child(1){ background: yellow;} p:nth-of-type(2){ background: blue;} -
效果呈现
示例
3.属性选择器
属性选择器
3.1 E[attr]属性选择器
-
表示选择有id属性的a标签
a[id] { background: yellow; }
3.2 E[attr=val]属性选择器
-
表示选择有id属性且id="first"的a标签
E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中a[id=first] { background: red; }
3.3 E[attr*=val]属性选择器
-
表示选择有class属性并且class属性中含有lins字符串的a标签
a[class*=links] { background: red; }
3.4 E[attr^=val]属性选择器
-
表示选择有href属性并且href属性中是http字符串开头的a标签
a[href^=http] { background: red; }
3.5 E[attr$=val]属性选择器
-
表示选择有href属性并且href属性中是png字符串结尾的a标签
a[href$=png] { background: red; }
网友评论