Home >Web Front-end >HTML Tutorial >How to use CSS in HTML?
How to use CSS in HTML?
- 零下一度Original
- 2017-06-24 13:27:364738browse
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">
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"></标签>
#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
<标签 class="c1"></标签>
.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;
}
css can be written like this
input[type="text"]{background-color: #2459a2;height: 10px;
}
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;
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
1 /* 向左飘 */2 float: left3 4 /* 向右飘 */5 float: right
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
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 }
五、后台管理实例
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;
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!