1.内嵌式 直接在标签中写style 然后写样式
2. 嵌入式，将css 写在head 中使用 <style type="text/css">通过选择器然后进行css样式的设计</style>
3. 外部式：就是将css 设计的代码单独放置在一个.css 文件中 然后在 head 中进行引入<link href="xx.css" rel="stylesheet" type="text/css"/>
注意：他们的优先级为就近原则
CSS选择器：
css 通过选择器 进行对需要样式的标签进行识别然后进行赋予样式
1.标签选择器 其实就是html 代码中的标签，
2.类选择器： 语法: .类选择器名称{css代码} 如上面的：
.clazz{
font-size: 80px;
color: blueviolet;
}
使用的时候：在标签中使用class 标示<p class="clazz">类选择器</p>
3.id 选择器 和类选择器相相似 语法：#id选择器的名称{css代码} 使用的时候 标签中使用id 属性
注意：id和类选择器的区别就是在于，id选择器定以后只能使用一次，使用两次错误，但是类可以多次使用
所以建议使用类选择器
4. 子选择器 ，配合类选择器使用。 语法：.类选择器的名称 > 指定要作用的标签
作用：就是让 子选择器中的css 样式，作用于指定标签的子代元素，但是其孙子代的就不会起作用。
5. 后代选择器,配合类选择器使用 语法：.类选择器 标签{css} 即 加入空格，用于选择指定元素下的所有的后辈元素
6. 最牛逼的选择器：通用选择器 *{css} 为html中的所有标签的元素进行样式设置
7. 开挂的选择器： 伪类选择器 ，它允许给html不存在的标签（标签的某种状态进行设置）
最常用的：:hover{css}
比如 :a:hover{color:red;} 这样当鼠标移到链接的时候就会触发，然后链接的内容就会变成红色
8. 分组选择符：同时为两个及两个以上的标签同时进行css样式设置例如：
h1,span{
color:red;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>css 测试</title>
<style type="text/css">
p{
font-size: 20px; /*设置p 标签中的字体的大小*/
color: aquamarine;/*设置p标签中的字体的颜色*/
font-weight: bolder;/*设置 p标签中的字体的宽度：bold 加粗*/
}
span{
font-size: 50px;
color: bisque;
}
.clazz{
font-size: 80px;
color: blueviolet;
}
#love{
font-size: 60px;
color: #000000;
max-zoom: initial;
background-color: antiquewhite;
}
.test li{/*后代（包含）选择器*/
border: 1px solid #7FFFD4; /*为li 添加边框样式（粗细为 1px 颜色为）*/
}
a:hover{
color: red;
}
</style>
</head>
<body>
<p>222222222222222<span>使用内嵌式 进行写样式的设计</span>111111111</p>
<!--
作者：offline
时间：2017-07-29
描述：
Css 使用在什么地方？怎么使用
1.内嵌式 直接在标签中写style 然后写样式
2. 嵌入式，将css 写在head 中使用 <style type="text/css">通过选择器然后进行css样式的设计</style>
3. 外部式：就是将css 设计的代码单独放置在一个.css 文件中 然后在 head 中进行引入<link href="xx.css" rel="stylesheet" type="text/css"/>
注意：他们的优先级为就近原则
-->
<p style="color: aquamarine; font-size: 40px;">内嵌式使用css样式</p>
<!--
作者：offline
时间：2017-07-29
描述：
css 通过选择器 进行对需要样式的标签进行识别然后进行赋予样式
1.标签选择器 其实就是html 代码中的标签，
2.类选择器： 语法: .类选择器名称{css代码} 如上面的：
.clazz{
font-size: 80px;
color: blueviolet;
}
使用的时候：在标签中使用class 标示<p class="clazz">类选择器</p>
3.id 选择器 和类选择器相相似 语法：#id选择器的名称{css代码} 使用的时候 标签中使用id 属性
注意：id和类选择器的区别就是在于，id选择器定以后只能使用一次，使用两次错误，但是类可以多次使用
所以建议使用类选择器
4. 子选择器 ，配合类选择器使用。 语法：.类选择器的名称 > 指定要作用的标签
作用：就是让 子选择器中的css 样式，作用于指定标签的子代元素，但是其孙子代的就不会起作用。
5. 后代选择器,配合类选择器使用 语法：.类选择器 标签{css} 即 加入空格，用于选择指定元素下的所有的后辈元素
6. 最牛逼的选择器：通用选择器 *{css} 为html中的所有标签的元素进行样式设置
7. 开挂的选择器： 伪类选择器 ，它允许给html不存在的标签（标签的某种状态进行设置）
最常用的：:hover{css}
比如 :a:hover{color:red;} 这样当鼠标移到链接的时候就会触发，然后链接的内容就会变成红色
8. 分组选择符：同时为两个及两个以上的标签同时进行css样式设置例如：
h1,span{
color:red;
}
-->
<p class="clazz">类选择器</p>
<span id="love">id选择器</span>
<ul class="test">
<li>水果
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</li>
<li>蔬菜=
<ul>
<li>44444</li>
<li>55555</li>
</ul>
</li>
</ul>
<a href="http://www.baidu.com">伪类选择器：鼠标移到这时会变颜色</a>
</body>
</html>
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
