写在前面：
给html书写CSS样式的四种方式:
- 外嵌式：嵌入某一个文件的CSS样式，一般在存放html文件的文件上会放一个专门存放CSS样式的文件，以便嵌入
<!-- 外嵌的CSS样式 -->
<!-- rel是relation的意思，指关联到某一个网址的样式，href是文件的意思，指关联到某个文件的css样式 -->
<link rel="stylesheet" href="CSS/main.css">
- 内嵌式：直接在head标签内写CSS样式，以style标签包裹(推荐使用)
<!-- 内嵌的CSS样式 -->
<style>
a{
color: red;
}
</style>
- 行内的CSS样式：直接在要某一行内写入CSS样式以只修改该行的样式（不推荐使用）
<!-- 行内的css样式 -->
<li><a href="http://baidu.com/" style="color:silver">北京</a></li>
<li><a href="http://baidu.com/">上海</a></li>
<li><a href="http://baidu.com/">广州</a></li>
<li><a href="http://baidu.com/">深圳</a></li>
<li><a href="http://baidu.com/">杭州</a></li>
- 导入式：和外嵌式一样都是导入某一个文件夹的CSS样式，不过写法不同,并且@import必须写在多有CSS样式的前面（不推荐使用）
<!-- 导入的CSS样式 -->
<!-- @import必须写在所有CSS样式的前面，和iOS的@import有点像，不过这种样式不推荐使用 -->
@import url(CSS/main.css)
正文
1.标签选择器：直接给某一类标签书写CSS样式：
<style>
p { color: red; }
</style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
</body>
2.通识选择器：给该页面的所有的标签书写CSS样式，用* 表示：
<head>
<style>
/* *通配符选择器 *用来设置所有的标签 */
* { color: blue; }
</style>
</head>
<body>
<h1>CSS 语法案例</h1>
<p id="p1">你好，我是p1标签</p>
<p id="p2">你好，我是p2标签</p>
<div>哈哈哈<span>哈哈哈</span></div>
</body>
3.id选择器：用来设置该id所在的标签，用＃表示：
<style>
/* #id选择器 #用来设置该id所在的标签 */
#p1 { font-size: 20px; }
#p2 { font-size: 10px; }
</style>
</head>
<body>
<p id="p1">你好，我是p1标签</p>
<p id="p2">你好，我是p2标签</p>
</body>
4.类选择器：用来设置某一个class类所在的所有标签，一个class内可以有多个属性，用.表示
<style>
/* 类选择器 .选择器可用于class属性 */
.head { color: yellow; }
.p1 { color: red; }
.p2 { color: blue; }
.p3 { color: orange; }
.l1 { color: purple ; }
.f1 { color: purple; }
</style>
</head>
<body>
<!-- 一个class属性可以有多个类 -->
<h1 class="head haha">中国世纪水泥</h1>
<p class="p3">出厂水泥合格证</p>
<p class="p3">金羊牌注册商标</p>
<form action="" class="f1">
<fieldset>
<legend class="l1">出厂水泥装车(船)卡</legend>
<p class="p1">购货单位: <input type="text"></p>
<p class="p1">使用单位: <input type="text"></p>
<p class="p1">产品名称: <input type="text"></p>
<p class="p1">强度等级: <input type="text"></p>
<p class="p2">数 量: <input type="text"></p>
<p class="p2">出厂编号: <input type="text"></p>
<p class="p2">车 号: <input type="text"></p>
<p class="p2">发 证 人 : <input type="text"></p>
</fieldset>
</form>
</body>
***Effect Shows***
类选择器和id选择器的区别：
- 类选择器可以同时控制多个标签，只要赋予这些标签相同的类属性就可以实现。
- 一个class类属性内可以有多个值
<h1 class="head haha">中国世纪水泥</h1>
这个class类有两个值:head和haha
.head {} 和 .haha{}都可以用来设置h1标签
- id选择器能且仅能控制一个标签。因为每一个id值在一个页面中都是唯一的，就像人的身份证号码一样，绝对不会出现第二个相同的id。
- id选择器是很“宝贵”的资源，不要滥用，要慎用。
以下是复合选择器
- 复合选择器：顾名思义，就是两个或两个以上选择器组合在一起，以便更精确的设置某一个或某一类标签，中间不用分割符号：
<!-- 顾名思义 即两个或两个以上选择器组合在一起，以更精确的定位控制某一个标签 -->
<style>
h1.msg { color: blue; }
h1#msg { color: red; }
</style>
</head>
<body>
<h1 class="msg">招财进宝</h1>
<h1 id="msg">财源广进</h1>
<p>阖家幸福</p>
</body>
2.后代选择器：不管嵌套几层，只要在父代选择器所在的标签包裹内，都可以被设置，父代选择器和后代选择器中间用空格分割
<style>
/* 后代和父代选择器之间一定要有空格 */
.list ul { color: red; }
.list ol { color: blue; }
</style>
</head>
<body>
<div class="list">
<strong>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</strong>
<ol>
<li>永和</li>
<li>洋里</li>
<li>龙田</li>
<li>罗浮</li>
</ol>
</div>
</body>
***Effect Shows***
2.并集选择器：并集选择器可以同时使几个标签享受相同的样式，标签之间用逗号分割
<style>
h1, h2, h3, p { color: red;}
</style>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<p>我是段落1</p>
</body>
3.子代选择器：子代选择器只能控制离父代标签最近的那一代标签，不能控制更深层次嵌套的标签,用>表示
<style>
div > p { color: red; }
li > p { color: blue; }
</style>
</head>
<body>
<div>
<p>我是子代标签1</p>
<p>我是子代标签2</p>
<p>我是子代标签3</p>
<p>我是子代标签4</p>
<ul>
<li class="Gchild">
<p>我是重孙代标签1</p>
</li>
<li>
<p>我是重孙代标签2</p>
</li>
<li>
<p>我是重孙代标签3</p>
</li>
</ul>
</div>
</body>
4.给某一类标签中带有特定属性(id、class、name等)的某一个标签设置样式，用［］表示
<!-- 属性选择器用中括号表示 -->
<style>
h1[id] { color: red; }
input[type="text"] { background-color: #501; }
</style>
</head>
<body>
<h1 id="fir_head">联盟承认快船和雷霆的比赛出现误判</h1>
<h1>杜兰特：有时候必须依靠单打解决问题</h1>
<input type="text">
<input type="password">
</body>
网友评论