How to use CSS in HTML?-HTML Tutorial-php.cn

1. How to use CSS in HTML

There are three ways to define css in HTML

1. Use the style attribute in the tag

2. Write in the head

3. Write the css style into the file

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

Copy after login

It is recommended to write it in the css style file, so that you can Maximize code reuse

2. CSS selector

1.id selector, it should be noted that the id cannot be repeated, such as

There is a tag in the html, the id is i1

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

Copy after login

You can write like this in css

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

Copy after login

2.class selector, class can be repeated, such as

There is a tag in html, the class is c1

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

Copy after login

It can be written like this in css

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

Copy after login

3. Tag selection You can set all tags to this style. For example, in

css you can write

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

Copy after login

4. Level selector, Separated by spaces, you can set a tag in a tag to this style. For example,

css can be written like this

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

Copy after login

5. Combining selectors, separated by commas, you can set certain tags to this style, such as

css, you can write

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

Copy after login

6. Attribute selector, a certain attribute of a certain tag is set to this style, such as

css can be written like this

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

Copy after login

3. CSS rules

1. Comments/* ... */

2. Priority, style has the highest priority among tags, css Writing order (the bottom has a higher priority than the top)

4. Some commonly used CSS styles

Border, border (a line or lines surrounding the inner margin of an element, if the width and height of the div are both 200px and the four sides of the border are 1px, the overall width and height are 202px)

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

Copy after login

Border style

2. Background

 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

Copy after login

Background style

3. Drift, float, can make block-level tags stacked

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

Copy after login

float style

When nesting multi-layer divs, if the outer div tag cannot control the inner div tag, you must Add a div before the end of the outermost div and set the style, clear:both;

4. Display, display

inline label, cannot set the height , width, padding, margin

Block-level tags, you can set height, width, padding, margin

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

Copy after login

display style

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;

Copy after login

边距样式

6.高度、宽度，height、width

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

Copy after login

高度、宽度样式

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

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

Copy after login

居中样式

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

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

Copy after login

字体样式

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>

Copy after login

位置样式

10.透明度，opcity

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

Copy after login

透明度样式

11.层级，z-index

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

Copy after login

层级样式

12.图片显示，overflow

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

Copy after login

图片显示样式

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

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

Copy after login

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>

Copy after login

后台管理

六、响应式布局

 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>

Copy after login

响应式布局

七、布局说明

1、主站布局

2、后台管理布局
position：
fiexd 永远固定在窗口的某个位置
relative 单独无意义
absolute 单独使用，第一次定位可以在指定位置，滚轮滚动时不在了

a.左侧菜单跟随滚动条
b.左侧以及上下不动 overflow: auto;

The above is the detailed content of How to use CSS in HTML?. For more information, please follow other related articles on the PHP Chinese website!