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
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;
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-yCopier 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
五、后台管理实例
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、主站布局
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
