Wie verwende ich CSS in HTML?

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">

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"></标签>

CSS kann so geschrieben werden

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

2.Klasse Selektor, Klasse kann wiederholt werden, z. B.

Es gibt ein Tag in HTML mit der Klasse c1

<标签 class="c1"></标签>

CSS kann so geschrieben werden

.c1{background-color: #2459a2;height: 10px;
}

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;
}

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;
}

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;
}

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;
}

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;

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-y

Hintergrundstil

3 .Drift, Float, kann Tag-Stapelung auf Blockebene ermöglichen

1 /* 向左飘 */2 float: left3  4 /* 向右飘 */5 float: right

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

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;

边距样式

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 style="position:relative;">6     <div style="postion:absolute;top:0;left:0"></div>7 </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 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>

后台管理

 

六、响应式布局

 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>

响应式布局

 

七、布局说明

1、主站布局

2、后台管理布局
position：
fiexd    永远固定在窗口的某个位置
relative    单独无意义
absolute    单独使用，第一次定位可以在指定位置，滚轮滚动时不在了

a.左侧菜单跟随滚动条
b.左侧以及上下不动 overflow: auto;

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn