CSS Class 2

学习内容:

1.设置字体:

font-style: 设置字体倾斜与否;font-size:设置字体大小;line-height:设置字体行高;font-family:设置字体种类;

p {
    font: italic 12px/30px arial,sans-serif;
}
/*将字体属性行高放在一个声明中,顺序分别为:字体倾斜与否 字体大小/行高  字体种类  */

2.边框border的样式:

(1)border-style:样式,分为dotted 点状 dashed 段状 double 两层

(2)border-width:边框的粗细

(3)border-color:边框颜色

1 h2 {
2     border: 1px dotted red;
3     /*顺序:粗细 样式 颜色*/
4 }    

3.背景样式:

(1)background-color:背景颜色

PS 使用rgba(r,g,b,alpha),可以调节背景颜色透明度,alpha值0-1,0为不可见,1为完全可见,可调节透明度,例如background-color:rgba(10,150,250,0.8)

rgba适用于所有color属性,例如border-color等。

(2)background-image: url() 背景图片

(3)background-position: px;px 背景位置 第一组数据利用正负值控制左右位置,第二组数据则用来控制上下位置,也可用center left right来大体设置

(4)background-repeat:背景平铺样式 no-repeat不平铺 repeat-x x轴平铺 repeat-y y轴平铺

(5)background-attachment:背景是否随页面滚动而滚动 fixed 图片不滚动,效果类似于图片在元素底下划过

1 p {
2   background: #ff0000 url(123.gif) no-repeat fixed center; 
3 }

fixed效果:滚动前后的效果

4.div:

div可作为盛放各种元素的容器,它是块级元素,默认占一行,但是与p标签不同,它不会产生上下都有间隔的问题

 1 <html>
 2     <head>
 3          <style>
 4            .div1 {
 5                  color: red;
 6             }
 7         </style>
 8     </head>
 9 
10     <body>
11          <div class="div1">
12                 <p>这是红色</p>   
13          </div>
14     </body>
15 </html>                        

p标签与div标签的默认效果: p标签上下都有间距,而两个div却紧紧贴在一起

5.伪类:

多用于a标签,为链接添加各种效果

a:link;a:visited ;a:hover ;a:active 

未访问的链接 ;已访问的链接;鼠标指向链接时,鼠标点击链接时

常用的是hover和active

ps:hover同样适用于div,可实现div的各种效果

 1 a:link {
 2         text-decoration: none;
 3         color: cornflowerblue;
 4         }
 5         
 6 a:visited {
 7         color: darkblue;
 8         }
 9 a:hover {
10         color: red;
11         text-decoration: underline;
12         }
13         
14 a.a1:active {
15         color: gold;
16         text-decoration: line-through;
17         }
18 /*a.a1:avtive 是搭配class选择器的组合用法 这样可单独对a标签产生效果*/        

 

                                                                                                                                                                                                                             2018.02.05

posted @ 2018-02-05 15:46  0==1&1==0  阅读(174)  评论(0编辑  收藏  举报