CSS复习之简介，使用方式，选择器
CSS简介
(1)HTML->构建基础网页结构
(2)CSS：
A.Cascading Style Sheets
B.层叠样式表 | CSS样式表 | 级联样式表
(3)CSS作用：
A.美化网页
B.美化：
文本内容：字体、大小、对齐方式等
图片样式：宽高、边框、边距等
版面布局、外观样式等
(4)CSS最大价值：
A.结构与样式相分离
B.HTML->设计网页结构，CSS->美化网页
(5)CSS语法：
A.选择器和一条或多条声明组成
B.选择器 { 样式 }
C.选择器：
根据需求选择对应元素
D.样式：
设计样式
CSS使用方式（重点）
基础介绍
(1)行内样式表：
A.在元素上直接设置样式 了解
<p style="color: blueviolet;">锄禾日当午</p>
B.优缺点：
优点：
权重高
缺点：
书写繁琐，结构混乱，没有体现样式和结构分离
C.控制范围：
可以控制当前标签的样式
D.使用场景：
不推荐大量使用，适合于修改简单基础样式
(2)内部样式表：
A.将CSS代码写到HTML内部，将所有CSS代码抽取出来，放到style标签中
B.style标签，一般放在head标签中
C.优缺点：
优点：结构和样式代码部分分离，代码结构清晰
缺点：没有完全实现结构和样式代码分离
D.控制范围：
控制当前页面中所有的对应的元素 只能控制一个页面
E.使用场景：
平常练习时使用
(3)外部样式表:
A.样式代码单独写到css文件中，需要把css文件引入到html文件中
B.优缺点：
优点：完全实现样式和结构代码分离
缺点：在html文件中引入css样式文件
C.<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
rel：
定义当前文件和引入的文件之间的关系
stylesheet：样式表文件
href：
被引入文件的路径值，相对路径 | 根路径 | 绝对路径
D.控制范围：
可以控制多个页面
E.使用场景：
开发时使用
案例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
内部样式表：***
将CSS代码写到HTML内部，将所有CSS代码抽取出来，放到style标签中
style标签，一般放在head标签中
优缺点：
优点：结构和样式代码部分分离，代码结构清晰
缺点：没有完全实现结构和样式代码分离
控制范围：
控制当前页面中所有的对应的元素 只能控制一个页面
使用场景：
平常练习时使用
*/
p {
color: yellow;
}
</style>
<!--
外部样式表：******
样式代码单独写到css文件中，需要把css文件引入到html文件中
优缺点：
优点：完全实现样式和结构代码分离
缺点：在html文件中引入css样式文件
<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
rel：
定义当前文件和引入的文件之间的关系
stylesheet：样式表文件
href：
被引入文件的路径值，相对路径 | 根路径 | 绝对路径
控制范围：
可以控制多个页面
使用场景：
开发时使用
-->
<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
</head>
<body>
<!--
行内样式表：
在元素上直接设置样式 了解
<p style="color: blueviolet;">锄禾日当午</p>
优缺点：
优点：
权重高
缺点：
书写繁琐，结构混乱，没有体现样式和结构分离
控制范围：
可以控制当前标签的样式
使用场景：
不推荐大量使用，适合于修改简单基础样式
-->
<p>锄禾日当午</p>
<p>汗滴禾下土</p>
</body>
</html>
css
p {
color: blue;
}
CSS选择器
(1)基础选择器
(2)组合器选择器
(3)伪类选择器
(4)属性选择器
基础选择器（重点）
基础介绍
(1)通用选择器：
* {}
(2)元素 |标签 选择器：
标签名称 {}
(3)类 | class 选择器：
.标签class属性值 {}
(4)id选择器：
#标签id属性值 {}
(5)选择器组：
元素1，元素2，... {} 并集选择器
标签选择器xxx 交集选择器
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
简单选择器：
(1)通用选择器
(2)元素 |标签 选择器
(3)类 | class 选择器
(4)id选择器
(5)选择器组
-->
<style type="text/css">
/* 内部样式表 */
/*
通用选择器：
选取页面中的所有元素
* {}
特殊情况使用，清除标签的内外边距等
*/
* {
/* 水平对齐方式 */
text-align: center;
}
/*
元素选择器：
按照标签名称选择元素
标签名称 {}
*/
/* p {
color: aquamarine;
} */
/*
类选择器：
按照class属性值选择元素
.class属性值 {}
优点：
可以差异化选择不同的标签
支持多类名写法 class="poem first"
开发中最常用
*/
/* .poem {
color: #FFFF00;
} */
/* .first {
color: red;
} */
/*
id选择器：
按照id属性值选择标签
#id属性值 {}
可以差异化选择标签
*/
/* #three {
color: #0000FF;
} */
/*
选择器组 | 并集选择器：
可以选择多组标签，设置相同样式
元素1，元素2 {}
*/
/* .poem,
#three {
color: aqua;
} */
/* #three{
color: aqua;
} */
/* 元素选择器 */
/* h3 {
color: palegreen;
} */
/* class属性值为poem，并且标签名称是h3
交集选择器，若涉及元素选择器，需先写元素选择器
*/
h3.poem {
color: aquamarine;
}
</style>
</head>
<body>
<h1>春望</h1>
<h3 class="poem">杜甫</h3>
<p class="poem first">国破山河在</p>
<p class="poem">城春草木深</p>
<p id="three">感时花溅泪</p>
<p>恨别鸟惊心</p>
</body>
</html>
组合器选择器（重点）
基础介绍
(1)后代选择器：
选择子孙后代元素
元素1 元素2 {}
(2)子代选择器：
选择子代元素
元素1>元素2 {}
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
组合器选择器：
后代选择器：
选择子孙后代元素
元素1 元素2 {}
子代选择器：
选择子代元素
元素1>元素2 {}
*/
/* 需求1：选中class属性值为poem的div中所有的p元素 */
/* 后代选择器 */
/* .poem p {
color: blueviolet;
} */
/* 需求2：选中class属性值为poem的div中所有的子代p元素 */
/* 子代选择器 */
.poem>p {
color: #7FFFD4;
}
/* 相邻兄弟选择器 后面的相邻的兄弟p元素 */
/* .second + p{
color: #0000FF;
} */
/* 通用兄弟选择器 后面的所有的兄弟p元素 */
.second ~ p{
color: #FFFF00;
}
</style>
</head>
<body>
<h1>山行</h1>
<h3>作者:杜牧</h3>
<div class="poem">
<p>远上寒山石径斜</p>
<p>白云深处有人家</p>
<div>
<p>停车坐爱枫林晚</p>
<p>霜叶红于二月花</p>
</div>
</div>
<p>恨别鸟惊心</p>
<p class="second">烽火连三月</p>
<p>家书抵万金</p>
<p>白头搔更短</p>
<p>浑欲不胜簪</p>
</body>
</html>
伪类选择器
基础介绍
(1)向某些选择器添加特殊效果
(2)链接伪类选择器：LVHA
link：选中未被访问过的链接
visited：选中已被访问过的链接
hover：选中鼠标位于其上的链接 鼠标经过链接
active：选中鼠标按下未被弹起的链接 鼠标点击链接
(2)focus伪类选择器：
选取获得焦点的表单元素
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
伪类选择器：
向某些选择器添加特殊效果
链接伪类选择器：LVHA
link：选中未被访问过的链接
visited：选中已被访问过的链接
hover：选中鼠标位于其上的链接 鼠标经过链接
active：选中鼠标按下未被弹起的链接 鼠标点击链接
focus伪类选择器：
选取获得焦点的表单元素
*/
/* a:link {
color: red;
} */
/* a:visited {
color: #FFFF00;
} */
/* a:hover {
color: red;
} */
a:active {
color: chartreuse;
}
input:focus {
color: #7FFFD4;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
<br>
<input type="text" value="tom" />
<input type="password" />
</body>
</html>
属性选择器
基础介绍
(1)匹配属性名称：
按照属性名称匹配元素
[属性名称] {}
(2)匹配属性名称和属性值：
按照属性名称和属性值匹配元素
[属性名称='属性值'] {}
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
属性选择器：
匹配属性名称：
按照属性名称匹配元素
[属性名称] {}
匹配属性名称和属性值：
按照属性名称和属性值匹配元素
[属性名称='属性值'] {}
*/
/* 需求1：选中input元素且有type属性 */
/* input {
color: #7FFF00;
} */
/* input[type]{
color: #FFFF00;
} */
/* 需求2：选中input元素、有value属性且属性值为1234 */
input[value='1234'] {
color: aquamarine;
}
</style>
</head>
<body>
<input type="text" value="tom" />
<input type="password" value="1234" />
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
