2017-9-19-css（二）

 

属性选择器

1.匹配所有具有egon属性的元素，不考虑它的值。
[egon] {
color: red;
}
2.匹配所有标签p属性为alex的元素不考虑值。 
p[alex]{
color: red;
}

3.匹配所有alex属性等于“hello1”的元素。
[egon="hello1"]{
color: darkorange;
}

　　

伪类选择器

 a:link（没有接触过的链接）,用于定义了链接的常规状态。

 a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
        
 a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
        
 a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
        
 伪类选择器 : 伪类指的是标签的不同状态:
        
 a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
        
 a:link {color: #FF0000} /* 未访问的链接 */
        
 a:visited {color: #00FF00} /* 已访问的链接 */
        
 a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
        
 a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
 1 style 里的代码
 2 
 3          #a1:link{
 4               color: darkorange;
 5           }
 6         #a1:hover{
 7             color: cyan;
 8         }
 9         #a1:active
10         {
11             color: yellow;
12         }
13         #a1:visited{
14             color: chocolate;
15         }
16 
17 
18 body里的代码
19 <a href="" id="a1">welcome to oldboy</a>
示例代码

 

选择器的优先级

内嵌> id > class > element

样式的继承

 body {
            font-size: 25px;
        }
        

.c1{
         color: cyan;
    }


<div class="c1">样式的继承</div>

.c1就继承了body类中的样式，字体都会变成25px。

　　

文本的其他属性

 

font-size: 10px;

line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效


text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px; 首行缩进150px

letter-spacing: 10px; 字母间距

word-spacing: 20px; 单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

　　

浮动的使用

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9         }
10 
11         .r1{
12             width: 300px;
13             height: 100px;
14             background-color: #7A77C8;
15             float: left;
16         }
17         .r2{
18             width: 200px;
19             height: 200px;
20             background-color: wheat;
21             /*float: left;*/
22 
23         }
24         .r3{
25             width: 100px;
26             height: 200px;
27             background-color: darkgreen;
28             float: left;
29         }
30     </style>
31 </head>
32 <body>
33 
34 <div class="r1"></div>
35 <div class="r2"></div>
36 <div class="r3"></div>
37 
38 
39 
40 </body>
41 </html>
示例代码

 

magin和padding

 

margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding:           用于控制内容与边框之间的距离；   
Border(边框):     围绕在内边距和内容外的边框。
Content(内容):   盒子的内容，显示文本和图像。

　　

posted @ 2017-09-20 16:18  你好丶  阅读(129)  评论(0)    收藏  举报