CSS边框以及其他常用样式

 

 

 1 CSS学习大纲
 2     在标签上设置style属性：
 3         background-color:#2459a2  ;
 4         height:48px  ;
 5     编写CSS样式：
 6         1.标签的style属性
 7         2.写在head里面，style标签中写样式
 8             ID选择器
 9                 #i1{
10                     background-color:2459a2  ;
11                     height:48px  ;
12                      }
13             class选择器  *****
14                 .c1{
15                     background - color: 2459a2  ;
16                     height: 48px  ;
17                     }
18                 <标签 class='名字'> </标签>
19             标签选择器
20                 div{
21                     background - color: 2459a2;
22                     height: 48px ;
23                    }
24                  所有的div都使用这个样式
25             层级选择器（空格）  *****
26                 .c1 .c2 div{
27                       background - color: 2459a2;
28                       height: 48px;
29                            }
30             组合选择器（逗号）  *****
31                 #i1,.c1,div{
32                             }
33             属性选择器   *****
34                 对选择到到标签再通过属性再进行一次筛选
35                 .c1[n='alex']{width:100px ;height:200px;}
36             PS:
37                 优先级，标签上style优先，编写顺序，就近原则
38         2.5  css样式也可以写再单独的文件中
39             <link rel="stylesheet"  href="commons.css"/>
40 
41         3、多行注释
42             /*
43             ...内容...
44            */
45 
46 
47         4、边框
48             宽度，样式，颜色 （border: 4px dotted red）
49             border-left
50         5、
51             height,              高度 百分比
52             width,               宽度 像素，百分比
53             text-align:ceter,    水平方向居中
54             line_height,         垂直方向根据标签高度
55             color                字体颜色
56             font-size            字体大小
57             font-weight          字体加粗
CSS学习大纲2
 1 <!DOCTYPE html>
 2 <!--CSS边框以及其他常用样式-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <div style="border: 3px dotted red;">
10           边框设置 四边
11     </div>
12 
13     <br />
14 
15     <div style="border-left: 8px dotted red;">
16           边框设置 左边
17     </div>
18 
19     <br />
20 
21     <div style="border-top: 4px dotted red;">
22           边框设置  顶边
23     </div>
24 
25     <br />
26 
27     <div style="height: 48px ;width: 200px;border: 3px solid red;">
28             长度设置 像素
29     </div>
30 
31     <br />
32 
33     <div style="height: 48px ;width: 60%;border: 5px solid red;">
34            长度设置  %百分比
35     </div>
36 
37     <br />
38 
39     <div style="height: 48px ;
40                   width: 1800px;
41                   border: 5px solid red;
42                   font-size:16px;
43                   text-align:center;
44                   line-height: 48px;
45                   font-weight: bold;
46                  ">
47           height高度 width宽度  border边框  font-size字体大小 text-align水平方向居中 line-height垂直方向根据标签高度 font-weight字体加粗
48     </div>
49 </body>
50 </html>
CSS边框以及其他常用样式

 

posted @ 2017-08-23 15:34  颜言  阅读(152)  评论(0)  编辑  收藏  举报