Comment utiliser CSS en HTML ?

1. Comment utiliser CSS en HTML

Il existe trois façons de définir le CSS en HTML

1 Utilisez l'attribut style dans les balises

<.>2. Écrivez dans l'en-tête

3. Écrivez le style CSS dans le fichier

<link rel="stylesheet" href="commons.css?1.1.11">

Il est recommandé de l'écrire dans le CSS. fichier de style. Cela permet d'obtenir la plus grande réutilisation de code possible

2. Sélecteur CSS

Sélecteur 1.id Il est à noter que l'identifiant ne peut pas être répété. Par exemple,

Il existe un. la balise dans le html avec l'identifiant i1

<标签 id="i1"></标签>

css peut être écrite comme ceci

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

2.class sélecteur, la classe peut être répétée, comme

Il y a une balise en html avec la classe c1

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

css peut être écrit comme ça

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

3. Sélecteur de balises, vous pouvez définir toutes les balises sur ce style, par exemple

le CSS peut être écrit comme ceci

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

4. Le sélecteur de niveau, séparé par des espaces, peut définir une certaine balise dans une certaine balise sur ce style, comme

css. peut être écrit comme ceci

span div{background-color: #2459a2;height: 10px;
}

5. En combinant des sélecteurs, séparés par des virgules, vous pouvez définir certaines balises sur ce style, comme celle-ci dans css Write

#i1,#i2,#i3{background-color: #2459a2;height: 10px;
}

6. Sélecteur d'attribut, définissez un certain attribut d'une étiquette sur ce style, tel que

css Écrivez comme ça

input[type="text"]{background-color: #2459a2;height: 10px;
}

3. Règles CSS

Commentaires /* ... */

2. Priorité, le style a la priorité la plus élevée parmi les balises, l'ordre d'écriture CSS (la priorité en bas est supérieure à celle du haut)

4. Certains styles CSS couramment utilisés

1.

Bordure, bordure (une ou plusieurs lignes entourant la marge intérieure de l'élément, si la largeur et la hauteur du div sont toutes deux de 200 px, et les quatre côtés de la bordure font 1px, la largeur et la hauteur totales sont de 202px)

/* 宽度、边框样式、颜色 */border: 4px dotted red;

Style de bordure

2. arrière-plan

 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

style d'arrière-plan

3 .Drift, float, peut créer un empilement de balises au niveau du bloc

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

style flottant

Lors de l'imbrication de plusieurs couches de div, si la balise div externe ne peut pas contrôler la balise div interne, ajoutez un div avant la fin de la div la plus externe et définissez le style, clear:both;

4. Affichage, affichage

Les balises en ligne, la hauteur, la largeur, le remplissage et la marge ne peuvent pas être définis

Les balises au niveau du bloc, la hauteur , la largeur, le remplissage et la marge peuvent être définis

 1 /* 让标签消失 */ 2 display:none 3   4 /* 让标签有行内标签属性 */ 5 display:inline 6   7 /* 让标签有块级标签属性 */ 8 display:block 9  10 /* 让标签有行内和块级标签属性 可以设置高度、宽度等，但还以内联标签呈现*/11 display:inline-block

style d'affichage

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;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn