1. So verwenden Sie CSS in HTML
Es gibt drei Möglichkeiten, CSS in HTML zu definieren
1. Verwenden Sie das Stilattribut in Tags
2. Schreiben Sie im Kopf
3. Schreiben Sie den CSS-Stil in die Datei
<link rel="stylesheet" href="commons.css?1.1.11">
Nach dem Login kopieren
Es wird empfohlen, ihn im CSS zu schreiben style-Datei. Dadurch kann die größtmögliche Code-Wiederverwendung erreicht werden
2. CSS-Selektor
1.id-Selektor. Es ist zu beachten, dass die ID nicht wiederholt werden kann. Zum Beispiel:
Es gibt einen Tag im HTML mit der ID i1
<标签 id="i1"></标签>
Nach dem Login kopieren
CSS kann so geschrieben werden
#i1{background-color: #2459a2;height: 48px;
}Nach dem Login kopieren
2.Klasse Selektor, Klasse kann wiederholt werden, z. B.
Es gibt ein Tag in HTML mit der Klasse c1
<标签 class="c1"></标签>
Nach dem Login kopieren
CSS kann so geschrieben werden
.c1{background-color: #2459a2;height: 10px;
}Nach dem Login kopieren
3. Tag-Selektor, Sie können alle Tags auf diesen Stil einstellen, z. B.
CSS kann so geschrieben werden
div{background-color: #2459a2;height: 10px;
}Nach dem Login kopieren
4. Der durch Leerzeichen getrennte Ebenenselektor kann ein bestimmtes Tag in einem bestimmten Tag auf diesen Stil festlegen, z. B.
css kann so geschrieben werden
span div{background-color: #2459a2;height: 10px;
}Nach dem Login kopieren
5 Durch die Kombination von Selektoren, getrennt durch Kommas, können Sie bestimmte Tags auf diesen Stil setzen, wie zum Beispiel dieses in
css Write
#i1,#i2,#i3{background-color: #2459a2;height: 10px;
}Nach dem Login kopieren
6. Attributauswahl: Legen Sie ein bestimmtes Attribut einer Beschriftung auf diesen Stil fest, z. B.
css Schreiben Sie so
input[type="text"]{background-color: #2459a2;height: 10px;
}Nach dem Login kopieren
3. CSS-Regeln
1. */
2. Priorität, Stil hat die höchste Priorität unter den Tags, CSS-Schreibreihenfolge (die Priorität unten ist höher als oben)
4. Einige häufig verwendete CSS-Stile
1.
Rahmen, Rand (eine oder mehrere Linien, die den inneren Rand des Elements umgeben, wenn die Breite und Höhe des Divs beide 200 Pixel betragen, und die vier Seiten des Rahmens sind 1 Pixel groß, die Gesamtbreite und -höhe beträgt 202 Pixel)
/* 宽度、边框样式、颜色 */border: 4px dotted red;
Nach dem Login kopieren
Randstil
2. Hintergrund
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-yNach dem Login kopieren
Hintergrundstil
3 .Drift, Float, kann Tag-Stapelung auf Blockebene ermöglichen
1 /* 向左飘 */2 float: left3 4 /* 向右飘 */5 float: right
Nach dem Login kopieren
Float-Stil
Wenn beim Verschachteln mehrerer Ebenen von Divs das äußere Div-Tag das innere Div-Tag nicht steuern kann, fügen Sie vor dem Ende des äußersten Div ein Div hinzu und legen Sie den Stil fest: clear:both;
4. Anzeige, Anzeige
Inline-Tag, Höhe, Breite, Abstand, Rand können nicht eingestellt werden
Tag auf Blockebene, Höhe, Breite, Polsterung, Rand können eingestellt werden
1 /* 让标签消失 */ 2 display:none 3 4 /* 让标签有行内标签属性 */ 5 display:inline 6 7 /* 让标签有块级标签属性 */ 8 display:block 9 10 /* 让标签有行内和块级标签属性 可以设置高度、宽度等，但还以内联标签呈现*/11 display:inline-block
Nach dem Login kopieren
Anzeigestil
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;
Nach dem Login kopieren
6.高度、宽度，height、width
1 height: 40px;2 width: 20%;
Nach dem Login kopieren
7.水平居中、垂直居中，text-align、line-height
1 /* 水平居中 */2 text-align: center;3 4 /* 垂直居中line-height的值要与height的值一致 */5 line-height: 20px;
Nach dem Login kopieren
8.字体大小、字体颜色、字体加粗，font-size、color、font-weight
1 font-size:23;2 color:red;3 font-weight:30;
Nach dem Login kopieren
9.位置，position
1 /* 固定在页面的某个位置 */2 position:fiexd;3 4 /* 固定于父类标签的某个位置 */5 <div style="position:relative;">6 <div style="postion:absolute;top:0;left:0"></div>7 </div>
Nach dem Login kopieren
10.透明度，opcity
1 /* 透明度 */2 opcity: 0.5
Nach dem Login kopieren
11.层级，z-index
1 /* 层级顺序 谁大谁在上面 */2 z-index:10
Nach dem Login kopieren
12.图片显示，overflow
1 /* 隐藏多出的部分 */2 overflow:hidden;3 4 /* 出现滑轮 */5 overflow:auto;
Nach dem Login kopieren
13.当鼠标移动到标签时，css样式生效，hover
1 样式:hover{2 ....3 ....4 }Nach dem Login kopieren
五、后台管理实例
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 class="pg-header"> 81 <div class="logo left"> 82 老男孩 83 </div> 84 <div class="user right" style="position: relative"> 85 <a class="a" href="https://www.baidu.com"> 86 <img src="user.jpg"> 87 </a> 88 <div class="b"> 89 <a href="https://www.baidu.com">我的资料</a> 90 <a href="https://www.baidu.com">注销</a> 91 </div> 92 </div> 93 </div> 94 <div class="pg-content"> 95 <div class="menu left">a</div> 96 <div class="content left"> 97 <div style="background-color: purple"> 98 <p>x</p> 99 <p>x</p>100 <p>x</p>101 <p>x</p>102 <p>x</p>103 <p>x</p>104 <p>x</p>105 <p>x</p>106 <p>x</p>107 <p>x</p>108 <p>x</p>109 <p>x</p>110 <p>x</p>111 <p>x</p>112 <p>x</p>113 <p>x</p>114 <p>x</p>115 <p>x</p>116 <p>x</p>117 <p>x</p>118 <p>x</p>119 <p>x</p>120 <p>x</p>121 <p>x</p>122 <p>x</p>123 <p>x</p>124 <p>x</p>125 <p>x</p>126 <p>x</p>127 <p>x</p>128 </div>129 </div>130 </div>131 <div class="pg-footer"></div>132 </body>133 </html>Nach dem Login kopieren
六、响应式布局
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 class="c1 c2"></div>20 </body>21 </html>Nach dem Login kopieren
七、布局说明
1、主站布局
Das obige ist der detaillierte Inhalt vonWie verwende ich CSS in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
