How to use CSS in HTML?

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>

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

标签>

You can write like this in css

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

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

There is a tag in html, the class is c1

标签>

It can be written like this in css

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

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

css you can write

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

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

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

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

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

1.

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;

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

Background style

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

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

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

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;

边距样式

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>6     <div></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 nbsp;html>  2   3   4     <meta>  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  79  80     <div> 81         <div> 82             老男孩 83         </div> 84         <div> 85             <a> 86                 <img  src="/static/imghwm/default1.png" data-src="user.jpg" class="lazy" alt="How to use CSS in HTML?" > 87             </a> 88             <div> 89                 <a>我的资料</a> 90                 <a>注销</a> 91             </div> 92         </div> 93     </div> 94     <div> 95         <div>a</div> 96         <div> 97             <div> 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></div>132 133 

后台管理

 

六、响应式布局

 1  nbsp;html> 2  3  4     <meta> 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 18 19     <div></div>20 21 

响应式布局

 

七、布局说明

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!