css選擇器，背景樣式，文本屬性

時間 2019-11-09

標籤 css 選擇器背景樣式文本屬性欄目 CSS 简体版

原文原文鏈接

引入樣式的方式：
    1.在標籤內部經過style屬性添加
    2.在文件內部經過style標籤添加
    3.引入外部樣式表
選擇器：
   1.標籤選擇器，經過標籤名來選擇(body內的全部相同的標籤的樣式都會被改變)

　　　　結果：css

　　2.類選擇器html

　　　　結果：web

　　3.交集選擇器：交集緊貼着沒有空格佈局

結果：字體

　　4.後代選擇器：經過空格進行分割url

　　5.通配選擇器spa

　　　　*{}3d

　　全部網頁的開發時要進行原子化 margin：0 padding：0code

字體的樣式：htm

font-weight字體加粗： bold加粗 bolder深度加粗 lighter細體 100-900
font-weight: bolder;

font-style字體樣式：italic斜體
font-style: italic;

text-align字體對齊方式： justify兩端對齊 left左對齊（默認）=start right右對齊=end center居中對齊
text-align: center;
另附：文本水平垂直居中：height=line-height

text-decoration文本修飾:underline:下劃線 line-through：中劃線  overline:上劃線  none:沒有線
text-decoration: none

text-indent文本縮進
text-indent: 20px;

text-shadow文本陰影 參數1:水平位移  參數2：垂直位移 參數3：模糊度 參數4：顏色（ text-shadow可加一個或多個，逗號間隔）
text-shadow: 0px -5px 1px black,5px 0px 1px red,0px 5px 1px yellow;

text-stroke文本描邊：描邊大小 顏色
-webkit-text-stroke:1px green ;

背景圖：

效果展現：

background-repeat圖片背景的展現方式：no-repeat 不重複平鋪     repeat-x 平鋪水平方向       repeat-y 平鋪垂直方向
background-repeat: no-repeat;

background-size背景圖片大小

background-size：能夠指定圖片的實際寬高，會失真

background-size：100% 100%;讓圖片鋪滿整個區域，但圖片會失真

background-size：contain;讓背景圖全展現，可能會縮放，直到寬或高填滿布局，但不必定會鋪滿整個屏幕

background-size: cover;讓背景圖等比例縮放，保證容器全鋪滿

background-position:圖片水平垂直移動，只顯示圖片左上角設定寬高區域的圖片內容

雪碧圖.png：

實例：

雪碧圖2.gif

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2         "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <title></title>
 6     <style type="text/css">
 7 
 8         .td{
 9             width: 19px;
10             height: 19px;
11             background-image: url("img/雪碧圖2.gif");
12             background-repeat: no-repeat;
13         }
14         .c1{
15             background-position: 0 0;
16         }
17         .s1{
18             font-size: 12px;
19             color: orangered;
20 
21         }
22         .c2{
23             background-position: 0px -20px;
24         }
25         .c3{
26             background-position: 0px -40px;
27         }
28         .c4{
29             background-position: 0px -60px;
30         }
31         .c5{
32             background-position: 0px -80px;
33         }
34         .c6{
35             background-position: 0px -100px;
36         }
37         .c7{
38             background-position: 0px -120px;
39         }
40         .c8{
41             background-position: 0px -140px;
42         }
43 
44     </style>
45 </head>
46 <body>
47 <div>
48     <table border="1" frame="below" rules="rows"  frame="void" cellspacing="0" bordercolor="orangered" >
49          <tr>
50             <td class="c1 td"></td>
51             <td class="s1">圖書音像</td>
52         </tr>
53         <tr>
54             <td class="c2 td"></td>
55             <td class="s1">手機數碼</td>
56         </tr>
57         <tr>
58             <td class="c3 td"></td>
59             <td class="s1">電腦辦公</td>
60         </tr>
61         <tr>
62             <td class="c4 td"></td>
63             <td class="s1">美妝個護</td>
64         </tr>
65         <tr>
66             <td class="c5 td"></td>
67             <td class="s1">美妝用品</td>
68         </tr>
69         <tr>
70             <td class="c6 td"></td>
71             <td class="s1">傢俱家紡</td>
72         </tr>
73         <tr>
74             <td class="c7 td"></td>
75             <td class="s1">家用電器</td>
76         </tr>
77         <tr>
78             <td class="c8 td"></td>
79             <td class="s1">潮流服裝</td>
80         </tr>
81     </table>
82 
83 </div>
84 </body>
85 </html>