Wie verwende ich CSS in HTML?

零下一度
Freigeben: 2017-06-24 13:27:36
Original
4699 Leute haben es durchsucht

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-y
Nach 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
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>
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、主站布局







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!

Verwandte Etiketten:
css
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!