HTML (css样式规范)必看篇

CSS样式规范

1.类选择器

2.标签选择器

3.id选择器

4.CSS样式的子选择器

类选择器

1.必背的固定结构，成为CSS样式标记。所有的样式都可以写成CSS样式的标记中

style tyPE="text/css">

/style>

2. type=“text/css” 意思是声明这个标记是css样式类型

type：类型的意思
text：文本的意思
css：叠层样式表

3.类选择器语法格式 .类名 （点加类名）

写的位置：在css样式的标记中
调用方法在HTML标签内部写上 class=类名

4.命名规范

建议是纯字母或字母后面加数字，请勿数字开头，其它虽然可以使用请问使用

5.为什么要把行内的css提取到css的标记中

优点一：保持HTML的层次清晰，方便检测错误
优点二：可以重复使用css样式

1. !DOCTYPE html>   
2.   
3. html lang="en">   
4.   
5. head>   
6.   
7.     meta charset="UTF-8">   
8.   
9.     tITle> 类选择器/title>   
10.   
11.     style type="text/css">   
12.   
13.         /*类选择器*/  
14.   
15.         .box{ width: 200px;  height: 50px;  background-color: aqua; border: 10px salmon solid}   
16.   
17.     /style>   
18.   
19. /head>   
20.   
21. body>   
22.   
23. div class="box"> /div>   
24.   
25. div class="box"> /div>   
26.   
27. div class="box"> /div>   
28.   
29.    
30.   
31. /body>   
32.   
33. /html>   

ID选择器

1. ID选择器的语法格式 #ID名称

写的位置：在CSS样式的标记中
调用方法在HTML标签内部写上 id="ID名称"
 
2. 命名规范

同类上一节的类名一样的道理

3. 为什么要把行内的CSS提取到CSS的标记中

优点一：保持HTML的层次清晰，方便检测错误
优点二：区分优先级，如果需要复用请选择类选择器

4. ID不允许重复调用，id就想身份证编号一样，每个都是不同的

1. !DOCTYPE html>   
2.   
3. html lang="en">   
4.   
5. head>   
6.   
7.        meta charset="UTF-8">   
8.   
9.        title> Title/title>   
10.   
11.        style type="text/css">   
12.   
13.         /*ID选择器*/  
14.   
15.         /*ID唯一标识符的意思,设计的目的就是让id唯一性*/  
16.   
17.         #box{ width: 200px; height: 50px; background-color: bisque}   
18.   
19.         #boy,#boy1,#boy2{ width: 200px; height: 50px; background-color: bisque;   
20.   
21.         border: 2px seagreen solid}   
22.   
23.         #gil,.doc{ width: 200px; height: 50px; background-color: bisque;   
24.   
25.         border: 2px seagreen solid}   
26.   
27.         /*设置多个共享一个参数*/  
28.   
29.    
30.   
31.     /style>   
32.   
33.    
34.   
35. /head>   
36.   
37. body>   
38.   
39.     div id="gil"> /div>   
40.   
41.     div class="doc"> /div>   
42.   
43.     div class="doc"> /div>   
44.   
45.    
46.   
47. /body>   
48.   
49. /html>   

标签名选择器

用到多个标签使用相同的属性，可以写成选择器。方面下面所有用到这个标签时共有这个属性

1. !DOCTYPE html>   
2. html lang="en">   
3. head>   
4.     meta charset="UTF-8">   
5.     title> Title/title>   
6.     style type="text/css">   
7.         /*标签名  选择器*/  
8.         div{ border: 10px salmon solid;  width:99px; height: 20px}   
9.     /style>   
10. /head>   
11. body>   
12.     div> 周杰伦/div>   
13.     div> 孙其虎/div>   
14.     div> 张杰/div>   
15. /body>   
16. /html>   

CSS样式的子选择器

1. !DOCTYPE html>   
2.   
3. html lang="en">   
4.   
5. head>   
6.   
7.     meta charset="UTF-8">   
8.   
9.     title> 子选择器/title>   
10.   
11.     style type="text/css">   
12.   
13.         div b{ color: crimson}   
14.   
15.         /*只影响 具有div 下的 b子标签受影响*/  
16.   
17.         div > b{ color: skyblue}   
18.   
19.         /*只影响儿子，不影响孙子*/  
20.   
21.     /style>   
22.   
23. /head>   
24.   
25. body>   
26.   
27.     div> b> 美国/b> /div>   
28.   
29.     div> b> b> 中国/b> /b> /div>   
30.   
31.    
32.   
33. /body>   
34.   
35. /html>   

二、样式优先级

1.CSS执行顺序，在同等优先级的情况下，下一行的如果与上一行的CSS有冲突一下一行为标准

在优先级不同的情况下，优先级高的覆盖优先级的低的。

2.选择器优先级顺序排列

第一名：行内样式 1000;
第二名：ID选择器 100;
第三名：元素名.类名 10;
第四名：类名
第五名：标签名 1;

3.主意事项：

当你写的CSS不起作用的时候，优先检测代码有没有写错
第二检查优先级情况有没有错

1. !DOCTYPE html>   
2.   
3. html lang="en">   
4.   
5. head>   
6.   
7.     meta charset="UTF-8">   
8.   
9.     title> 优先级定义/title>   
10.   
11.     style type="text/css">   
12.   
13.         .red{ color: aqua}   
14.   
15.         .blue{ color: crimson}   
16.   
17.         .dce{ color: antiquewhite}   
18.   
19.         /*在同级中相同的属性，标准调用下面的*/  
20.   
21.         div{ color: blue}   
22.   
23.         /*影响范围越广的，优先级越低*/  
24.   
25.    
26.   
27.         #blue{  color: sPRinggreen}   
28.   
29.         #ket{ color: blueviolet}   
30.   
31.         div.red{ color: aqua}   
32.   
33.         /*类名> 元素名*/  
34.   
35.         /*ID优先级最高*/  
36.   
37.         #alex b{ color: chartreuse}   
38.   
39.         b{ color: blue; border: 2px cornsilk solid}   
40.   
41.    
42.   
43.     /style>   
44.   
45. /head>   
46.   
47. body>   
48.   
49. div id="ket" class="red" style="color: black"> 优先sex/div>   
50.   
51. !--在行内样式最高-->   
52.   
53. div id="blue" class="red"> 优先/div>   
54.   
55. div class="blue red dce">  优先级/div>   
56.   
57. div id="alex"> b> 中国/b> /div>   
58.   
59. b> 美国/b>   
60.   
61. /body>   
62.   
63. /html>   

以上就是小编为大家带来的HTML (css样式规范)必看篇全部内容了，希望大家多多支持~

原文地址：http://www.cnblogs.com/pythonxiaohu/archive/2016/06/25/5616511.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！