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"></标签>
#i1{background-color: #2459a2;height: 48px;
}Es gibt ein Tag in HTML mit der Klasse c1
<标签 class="c1"></标签>
.c1{background-color: #2459a2;height: 10px;
}CSS kann so geschrieben werden
div{background-color: #2459a2;height: 10px;
}css kann so geschrieben werden
span div{background-color: #2459a2;height: 10px;
}css Write
#i1,#i2,#i3{background-color: #2459a2;height: 10px;
}css Schreiben Sie so
input[type="text"]{background-color: #2459a2;height: 10px;
}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;
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
1 /* 向左飘 */2 float: left3 4 /* 向右飘 */5 float: right
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
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 }
五、后台管理实例
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、主站布局
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
