一、概念
css(Cascading Style Sheet)是层叠样式表语言，作用是修饰html的样式，让html更好看。
二、在html页面中嵌套使用css的三种方式
1.内联定义
在html标记( html tag)内部使用style属性,属性值为多个样式的赋值，样式之间用分号(;)隔开。
语法格式：
<标签 style=“样式名:样式值;样式名:样式值;…”></标签>
解释：width,height样式用于设置div标记的宽度和高度，px为单位（像素），background-color用于设置背景颜色。
显示效果：
也可以设置display样式的值(默认值为block)将该标记隐藏：
设置边框样式border-color,border-width,border-style：
也可以把border-color,border-width,border-style三个样式用一个样式border来等效设置，border样式有三个取值，中间用空格隔开：
2.定义内部样式块对象（对象即html标记）
在html文档的和标记之间插入一个块对象。
补充style标记中使用/**/来进行注释而不是
。
语法格式：
注：style标记的type值固定为"text/css"。
选择器是指选中的html标记，有多种选择方式。
（1）使用id选择器，方式为"#标签的id属性值"。该选择器只能作用于一个标记。
示例如下：
color用于设置字体颜色，font-size用于设置字体大小
(2)标签选择器，可以选择多个为该标签名的标记。
(3)类选择器
类名为所需选中标记的class属性值，可同时选中多个。（和id选择器类似，只是标记的id值唯一，而标记的class值可以相同）
示例如下：
（4）后代选择器
后代选择器由其他两个选择器之间加空格表示。
前一个元素指定的标签是后一个元素指定的标签的父类标签。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<title>后代选择器</title>
<style>
/* 什么是后代选择器：就是一个父类里面必须包含一个子类、而这个子类一定是在父类的包含下 */
/* 这个时候我们要把这个小丽改颜色pink */
ul li {
color: pink;
}
ul li a {
/* 这个就是后代选择器：我们可以一层一层去设置他 、它的父类就是“ul”、而子类就是“li”、而小丽的孩子也是子类“a”*/
color: red;
}
.nav li a {
/* 这里有一个口诀：样式点定义、结构class调用、一个或多个 */
color: aqua;
}
</style>
</head>
<body>
<ul>
<li>我是小丽</li>
<li>我是小丽</li>
<li>我是小丽</li>
<li>我是小丽</li>
<li><a>我是小丽的孩子</a></li>
</ul>
<ul class="nav">
<!-- 如果有两个一样的我们可以取一个class名字来区分 -->
<li>我是小丽</li>
<li>我是小丽</li>
<li>我是小丽</li>
<li>我是小丽</li>
<li><a>我是小丽的孩子</a></li>
</ul>
<ol>
<li>我是小明</li>
<li>我是小明</li>
<li>我是小明</li>
<li>我是小明</li>
</ol>
<dl>
<dt>
<dd>名字</dd>
<dd>我是小花</dd>
<dd>我是小花</dd>
<dd>我是小花</dd>
</dt>
</dl>
</body>
</html>
效果:
(5)伪类选择器
例如
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a:link{color:blue;}
#link2:visited{color:green;}
#link3:hover, a:focus, a:active{color:red;}
</style>
</head>
<body>
<a href="https://www.baidu.com" id="link1" >链接1</a>
<a href="https://www.baidu.com" id="link2">链接2</a>
<a href="https://www.baidu.com" id="link3">链接3</a>
</body>
</html>
说明：
:link和:visited称为链接伪类，只能应用于锚元素；:hover,:active和:focus称为动态伪类，理论上可以应用于任何元素。
补充：
a:link 选择未被访问过的链接；
a:visited 选择已经被访问过的链接；
a:hover 选择鼠标指针悬停上的链接；
a:active 选择活动链接（鼠标按下了但是未弹起）。
（6）通用选择器
通用选择器一般对页面上所有元素应用样式。
*{
padding:0;
margin:0;
}222
（8）高级选择器
8.1 子类选择器和相邻同胞选择器
子类选择器与后代选择器的区别是，后代选择器选择一个元素的所有后代， 子类选择器只选择元素的直接后代，即子元素。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#nav>li{
background:no-repear left top;
padding-left:20px;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="">home</a></li>
<li><a href="">service</a>
<ul>
<li><a href="">design</a></li>
<li><a href="">development/a></li>
<li><a href="">consultment</a></li>
</ul>
</li>
</ul>
</body>
效果如下：
相邻同胞选择器：设置一个元素与其之后的一个元素的样式。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h2+p{
font-size:1.4em;
font-weight:bold;
color:#777;
}
</style>
</head>
<body>
<h2>题目</h2>
<p>第一段的内容</p>
<p>第二段的内容</p>
</body>
</html>
效果如下：
（9）属性选择器
根据某个属性是否存在或属性的值来寻找元素。
例如，当鼠标悬停在具有title属性的元素上时，大多数浏览器会显示一个工具提示。
补充：
html标签的title属性规定关于元素的额外信息，这些信息通常会在鼠标移动到元素上时显示一段工具提示文本。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
</head>
<body>
<p>The term<acronym title="提示">
提示
</acronym>
is an example.
</p>
</body>
</html>
效果如下：
可以使用属性选择器对具有title属性的acronym元素设置与其他元素不同的样式。例如：给文字下方加点（默认方式）或者鼠标停留在这个元素上方时将鼠标指针改为问号。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*在指定含title属性的标签的文本内容下加点*/
#acronym1[title]{
border-bottom:1px dotted #999;
}
/*鼠标停留在这个元素上方时将鼠标指针改为问号*/
#acronym2[title]:hover,#acronym2[title]:focus{
cursor:help;
}
</style>
</head>
<body>
<p>The<acronym title="提示" id="acronym1"> term
</acronym>
is an example.
</p>
<p>The <acronym title="提示" id="acronym2">
term
</acronym>
is an example.
</p>
</body>
3.链入或导入外部样式表文件（最常用）
链入：先建立外部样式表文件(.css)，文件内容书写格式与内部样式块对象方式中的style标记中的一致。然后使用html的link对象。
语法格式:
2156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
