CSS总结

                                 CSS总结

一、CSS概念

        1、概念

             CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

　　　　  CSS使用<style>标签，用选择器锁定待修改渲染的盒子，用属性进行渲染和定位。

        2、思维定势

            1)用到CSS，就在<head>里面加<style></style>标签。

            2)CSS就是渲染加定位。

　　  3、CSS思维

　　　　 1)一切皆盒子。盒子都有大小，添加内容也会撑开盒子。

　　　　 2)范围思维。当一个渲染未生效一定是范围未覆盖，找到这个范围的标签，覆盖即可。例如：*{} 目前确认只对文字管用，所有颜色改变背景色会导致整个html变化。解决方法：加上范围body*{}。详细代码见2.2.ii

二、CSS导入方式

        1、四种导入方式

            1)行内式   行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

            2)嵌入式   嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

　　　　 3)导入式   将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中。

                          作用是可以将CSS复用。注意：导入的.CSS文件必须和html文件在同一路径下。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <style type="text/css">
 9             @import"hezi.css";    <!--必须在同一路径下-->    
10         </style>
11     </head>
12     <body>
13         <div class="c0"></div>
14         <div class="c1"></div>
15         <div class="c2"></div>
16         <div class="c3"></div>
17     </body>
18 </html>
View Code

            4)链接式 使用link标签，<link href="mystyle.css" rel="stylesheet" type="text/css"/>。

                        这里type属性可有可无，规定被连接文档的类型。即文档数据传送到浏览器后，依据HTTP协议中的某个协议进一步处理。

　　　　　　　　  rel属性规定当前文档与被链接的文档的关系。

　　　　 5)注意：链接式是随着文档流的载入而加载，所以呈现较大数据样式（比如大图片）效果好，而嵌入式是整个文档流载入后，再加载。会有闪烁现象。

         2、CSS选择器

             选择器指明{}中，要修饰哪些网页中的对象。有四种常用选择器。

            1)基础标签选择器

　　　　　　i)标签名{}

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <style>
 9             div{
10                 background-color:pink;
11                 width:90px;
12                 height:20px;
13             }
14             p{
15                 background-color:red;
16             }
17         </style>
18     </head>
19     <body>
20         <div class="c0"></div>
21         <div class="c1"></div>
22         <p class="re"> AAA</p>
23         <p class="ge"> BBB</p>
24     </body>
25 </html>
View Code

　　　　　　ii)通用元素  *{} 目前确认只对文字管用，所有颜色改变背景色会导致整个html变化。解决方法：加上范围body*{}

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <style>
 9             div{
10                 background-color:pink;
11                 width:90px;
12                 height:20px;
13                 
14             }
15             p{
16                 background-color:red;
17             }
18             *{
19                 color:white;
20                 background-color:purple;
21             
22             }
23         </style>
24     </head>
25     <body>
26         <div class="c0">aid</div>
27         <div class="c1">ad</div>
28         <p class="re"> AAA</p>
29         <p class="ge"> BBB</p>
30     </body>
31 </html>
View Code　　　　　

　　　　　　iii)class与id选择器  class定位.class的属性值。id定位#id的属性值。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <style>
 9             .c0{
10                 background-color:black;
11             }
12             .c1{
13                 background-color:red;
14             }
15             #ge{
16                 background-color:green;
17             }
18             #re{
19                 background-color:red;
20             }
21         </style>
22     </head>
23     <body>
24         <div class="c0">aid</div>
25         <div class="c1">ad</div>
26         <p class="re"> AAA</p>
27         <p id="ge"> BBB</p>
28     </body>
29 </html>
View Code

             2)组合选择器

　　　　　　i)父类选择器 E>F 其中E，F都代表标签。

　　　　　　ii)后代选择器 以空格间隔，只要是后代都能遍历到。

　　　　　　iii)小弟选择器 E+F 所有紧随E元素之后的同级F元素。注意：不是所有的，只是后一个。可以代码中的#ge去掉可以看到只有一个p中内容变化了。

　　　　　　iv)多元选择器 E,F,H 所有列出的元素。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <style>                    
 9             
10             .c1+p,#ge{
11                 background-color:purple;
12             }
13         </style>
14     </head>
15     <body>
16         <div class="c0">aid</div>
17         <div class="c1">ad</div>
18         <p class="re"> AAA</p>
19         <p id="ge"> BBB</p>
20     </body>
21 </html>
View Code

　　　　 3)属性选择器

　　　　　　i)E[att]            匹配所有具有att属性的E元素，不考虑它的值。　

　　　　　　ii)E[att=value]  匹配所有att属性等于“val”的E元素 

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "utf-8">
        <meta name = "keyword" content = "liao">
        <meta name = "description" content = "lllll">
        <title>^ <> ^</title>
        <style>                                
            p[class],div[class=c0]{
                background-color:purple;
            }
            
        </style>
    </head>
    <body>
        <div class="c0">aid</div>
        <div class="c1">ad</div>
        <p class="re"> AAA</p>
        <p id="ge"> BBB</p>
    </body>
</html>
View Code

 　　　 　　 iii)龙头凤尾修饰 before，after 注意谨慎使用，a 若p：before 是将所有的p前面都加内容。b 对p和div等标签都适用。c 如何在盒子前加div尚不清楚

　　　　　　　只能做成假的命名时起名c:before,但是好像不支持冒号作为属性值。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <style>                                
 9             div[class]:before{
10                 content:"台词：-";
11                 color:blue;
12                 font-weight:bolder;
13                 background-color:yellow;
14             }
15             p:after{
16                 content:"good";
17                 color:blue;
18             }
19             
20         </style>
21     </head>
22     <body>
23         <div class="c0">aid</div>
24         <div class="c1">ad</div>
25         <p class="re"> AAA</p>
26         <p id="ge"> BBB</p>
27     </body>
28 </html>
View Code

　　　　　　iv)还有很多类似正则的属性匹配（但并不完全符合正则规则），后面用到再介绍。

 　　　　4)伪类选择器 专用于控制超链接标签<a>的显示效果，可能也会有其他标签，暂时只记住<a>。a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

　　　　　　格式: 标签:伪类名称{ css代码; }

　　　　　　i)a:visited {color: #00FF00} /* 已访问的链接 */

　　　　　　ii)a:link {color: #FF0000} /* 未访问的链接 */

　　　　　　iii)a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

　　　　　　iv)a:active {color: #0000FF} /* 选定的链接 */ 

　　　　　　实例：网页下面可跳转的序号列表

1、用div盒子 点击后全部变颜色

2、一开始的颜色即为点击后的颜色  正在排查

 　　　 3、常用原则　　　　

　　　　　　1)文本流从上到下加载原则（发现布局与预期不一致时1换浏览器2查先后顺序）
　　　　　　2)渲染效果就近原则 这里注意：使用color：red ！important 后color无论距离多远都会生效。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <style>    
 9             body{
10                 margin:0;
11             }
12             .c0{
13                 background-color:red;
14                 width:90px;
15                 height:90px;
16                 color:white !important;
17             }
18             .c0{
19                 color:yellow;
20             }
21         </style>
22     </head>
23     <body>
24         <div class="c0">
25             AAA
26         </div>        
27     </body>
28 </html>
View Code

 

三、CSS常用属性

　　　　1、颜色属性　　      

　　　　　　

 

 

            

 

 

 

动态效果

1、float

原理：

飘的就是inline 黄的clear一把 ，那么他就两边必须全是 block 所以它就只能自己占一行。又他为什么不被粉色盖住一小部分呢？是因为 黄的左侧必须是一个block 盒子且按照最大的体内盒子撑起来的高度计算 。 所以他不是以红色高度来排位置，而是以最大值。

对比以下代码。对调了粉色盒子和红色盒子的大小。

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset = "utf-8">
		<meta name = "keyword" content = "liao">
		<meta name = "description" content = "lllll">
		<title>^</title>
		<style>
			.c0{
				background-color:pink;
				width:60px;
				height:60px;
				float:left;
			}
			.c1{
				background-color:red;
				width:50px;
				height:50px;
				float:left;
			}
			.c2{
				background-color:yellow;
				width:40px;
				height:40px;
				clear:both;
			}
			.c3{
				background-color:blue;
				width:30px;
				height:30px;
				float:left;
			}
		</style>
	</head>
	<body>
		<div class="c0"></div>
		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c3"></div>
	</body>
</html>

　　

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset = "utf-8">
		<meta name = "keyword" content = "liao">
		<meta name = "description" content = "lllll">
		<title>^</title>
		<style>
			.c0{
				background-color:pink;
				width:50px;
				height:50px;
				float:left;
			}
			.c1{
				background-color:red;
				width:60px;
				height:60px;
				float:left;
			}
			.c2{
				background-color:yellow;
				width:40px;
				height:40px;
				clear:both;
			}
			.c3{
				background-color:blue;
				width:30px;
				height:30px;
				float:left;
			}
		</style>
	</head>
	<body>
		<div class="c0"></div>
		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c3"></div>
	</body>
</html>

　　

 

posted on 2016-08-13 11:04  lexn  阅读(101)  评论(0)    收藏  举报

导航