HTML中如何使用CSS？

2020-03-24 16:18:38

字體：大中小

來源：轉載

供稿：網友

一、HTML中如何使用CSS

在HTML中有三種可以定義css的方法

1、在標簽中使用style屬性

2、寫在head中

3、將css樣式寫到文件中

 link rel= stylesheet href= commons.css?1.1.11

這里推薦寫在css樣式文件中，這樣可以最大程度的實現代碼復用

二、CSS選擇器

1.id選擇器，需要注意的是id不能重復，如

html中有個標簽，id為i1

 標簽 id= i1 /標簽

css中可以這么寫

#i1{background-color: #2459a2;height: 48px;}

2.class選擇器，class可以重復，如

html中有個標簽，class為c1

 標簽 >css中可以這么寫
.c1{background-color: #2459a2;height: 10px;}
3.標簽選擇器，可以將某個標簽全部設置成此樣式，如
css中可以這么寫
div{background-color: #2459a2;height: 10px;}
4.層級選擇器，以空格分割，可以將某個標簽里面的某個標簽設置成此樣式，如
css中可以這么寫
span div{background-color: #2459a2;height: 10px;}
5.組合選擇器，以逗號分割，可以將某幾個標簽都設置成此樣式，如
css中可以這么寫
#i1,#i2,#i3{background-color: #2459a2;height: 10px;}
6.屬性選擇器，某個標簽的某個屬性設置成此樣式，如
css中可以這么寫
input[type= text ]{background-color: #2459a2;height: 10px;}
 
三、CSS規則
1、注釋 /* ... */
2、優先級，標簽中style優先級最高，css編寫順序（底下的優先級比上面高）
 
四、CSS一些常用的樣式
1.邊框，border（圍繞元素的內邊距的一條或條線，如果div寬和高都為200px，border的四邊都為1px的話，整體的寬和高為202px）
/* 寬度、邊框樣式、顏色 */border: 4px dotted red;
邊框樣式2.背景，background
 1 /* 背景色 */ 2 background-color 3 4 /* 背景圖片 */ 5 background-image:url( img/4.gif ) 6 7 /* 背景圖片是否重復 */ 8 background-repeat: no-repeat 9 background-repeat: repeat-x10 background-repeat: repeat-y11 12 /* 背景圖片位置 */13 background-position14 background-position-x15 background-position-y
背景樣式3.漂移，float，可以使塊級標簽堆疊
1 /* 向左飄 */2 float: left3 4 /* 向右飄 */5 float: right
float樣式在多層div嵌套時，如果外層div標簽管不住內層div標簽，要在最外層div結束前加入一個div并設置樣式，clear:both;
4.顯示，dispaly
行內標簽，無法設置高度、寬度、padding、margin
塊級標簽，可以設置高度、寬度、padding、margin
 1 /* 讓標簽消失 */ 2 display:none 3 4 /* 讓標簽有行內標簽屬性 */ 5 display:inline 6 7 /* 讓標簽有塊級標簽屬性 */ 8 display:block 9 10 /* 讓標簽有行內和塊級標簽屬性 可以設置高度、寬度等，但還以內聯標簽呈現*/11 display:inline-block
display樣式5.內邊距和外邊距，padding、margin
 1 /* 內邊距 */ 2 padding: 10px 20px; 3 padding-top: 10px; 4 padding-right: 20px; 5 padding-bottom: 10px; 6 padding-left: 20px; 7 8 /* 外邊距 */ 9 margin: 0 auto;10 margin-top: 10px;11 margin-right: 20px;12 margin-bottom: 10px;13 margin-left: 20px;
邊距樣式6.高度、寬度，height、width
1 height: 40px;2 width: 20%;
高度、寬度樣式7.水平居中、垂直居中，text-align、line-height
1 /* 水平居中 */2 text-align: center;3 4 /* 垂直居中line-height的值要與height的值一致 */5 line-height: 20px;
居中樣式8.字體大小、字體顏色、字體加粗，font-size、color、font-weight
1 font-size:23;2 color:red;3 font-weight:30;
字體樣式9.位置，position
1 /* 固定在頁面的某個位置 */2 position:fiexd;3 4 /* 固定于父類標簽的某個位置 */5 div >位置樣式10.透明度，opcity
1 /* 透明度 */2 opcity: 0.5
透明度樣式11.層級，z-index
1 /* 層級順序 誰大誰在上面 */2 z-index:10
層級樣式12.圖片顯示，overflow
1 /* 隱藏多出的部分 */2 overflow:hidden;3 4 /* 出現滑輪 */5 overflow:auto;
圖片顯示樣式13.當鼠標移動到標簽時，css樣式生效，hover
1 樣式:hover{2 ....3 ....4 }
hover樣式 
五、后臺管理實例
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title 后臺管理 /title 6 style 7 body{ 8 margin: 0; 9 } 10 .left{ 11 float: left; 12 } 13 .right{ 14 float: right; 15 } 16 .pg-header{ 17 height: 48px; 18 line-height: 48px; 19 min-width: 1180px; 20 background-color: #2459a2; 21 color: #ffffff; 22 } 23 .pg-header .logo{ 24 width: 200px; 25 text-align: center; 26 background-color: cadetblue; 27 } 28 .pg-header .user{ 29 margin-right: 60px; 30 height: 48px; 31 background-color: #2459a2; 32 } 33 .pg-header .user:hover{ 34 background-color: #204982; 35 } 36 .pg-header .user:hover .b{ 37 display: block; 38 } 39 .pg-header .user .a img{ 40 width: 40px; 41 height: 40px; 42 margin-top: 4px; 43 border-radius: 50%; 44 } 45 .pg-header .user .b{ 46 display: none; 47 width: 160px; 48 z-index:20; 49 position: absolute; 50 top: 48px; 51 right: 44px; 52 background-color: white; 53 color: black; 54 } 55 .pg-header .user .b a{ 56 display: block; 57 } 58 .pg-content .menu{ 59 position: absolute; 60 top: 48px; 61 left: 0; 62 bottom: 0; 63 width: 200px; 64 background-color: #dddddd; 65 } 66 .pg-content .content{ 67 position: absolute; 68 min-width: 980px; 69 top: 48px; 70 right: 0; 71 bottom: 0; 72 left: 200px; 73 background-color: #800080; 74 overflow: auto; 75 z-index: 9; 76 } 77 /style 78 /head 79 body 80 div >后臺管理 
六、響應式布局
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title Title /title 6 style 7 .c1{ 8 background-color: red; 9 height: 50px;10 }11 @media (min-width: 900px) {12 .c2{13 background-color: gray;14 }15 }16 /style 17 /head 18 body 19 div >響應式布局 
七、布局說明
1、主站布局
 div > div > /div 
 div > div >
2、后臺管理布局
position：
fiexd 永遠固定在窗口的某個位置
relative 單獨無意義
absolute 單獨使用，第一次定位可以在指定位置，滾輪滾動時不在了

a.左側菜單跟隨滾動條
b.左側以及上下不動 overflow: auto;
以上就是HTML中如何使用CSS？的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。