Comment utiliser CSS en HTML ?-tutoriel HTML-php.cn

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

Copier après la connexion

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

Copier après la connexion

css peut être écrite comme ceci

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

Copier après la connexion

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

Copier après la connexion

css peut être écrit comme ça

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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;

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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;

Copier après la connexion

边距样式

6.高度、宽度，height、width

1 height: 40px;2 width: 20%;

Copier après la connexion

高度、宽度样式

7.水平居中、垂直居中，text-align、line-height

1 /* 水平居中 */2 text-align: center;3 4 /* 垂直居中line-height的值要与height的值一致 */5 line-height: 20px;

Copier après la connexion

居中样式

8.字体大小、字体颜色、字体加粗，font-size、color、font-weight

1 font-size:23;2 color:red;3 font-weight:30;

Copier après la connexion

字体样式

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>

Copier après la connexion

位置样式

10.透明度，opcity

1 /* 透明度 */2 opcity: 0.5

Copier après la connexion

透明度样式

11.层级，z-index

1 /* 层级顺序 谁大谁在上面 */2 z-index:10

Copier après la connexion

层级样式

12.图片显示，overflow

1 /* 隐藏多出的部分 */2 overflow:hidden;3  4 /* 出现滑轮 */5 overflow:auto;

Copier après la connexion

图片显示样式

13.当鼠标移动到标签时，css样式生效，hover

1 样式:hover{2     ....3     ....4 }

Copier après la connexion

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>

Copier après la connexion

后台管理

六、响应式布局

 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>

Copier après la connexion

响应式布局

七、布局说明

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!