Rumah >hujung hadapan web >html tutorial >HTML中如何使用CSS？
HTML中如何使用CSS？
- 零下一度asal
- 2017-06-24 13:27:364739semak imbas
一、HTML中如何使用CSS
在HTML中有三种可以定义css的方法
1、在标签中使用style属性
2、写在head中
3、将css样式写到文件中
<link rel="stylesheet" href="commons.css?1.1.11">
这里推荐写在css样式文件中，这样可以最大程度的实现代码复用
二、CSS选择器
1.id选择器，需要注意的是id不能重复，如
html中有个标签，id为i1
<标签 id="i1"></标签>
css中可以这么写
#i1{background-color: #2459a2;height: 48px;
}2.class选择器，class可以重复，如
html中有个标签，class为c1
<标签 class="c1"></标签>
css中可以这么写
.c1{background-color: #2459a2;height: 10px;
}3.标签选择器，可以将某个标签全部设置成此样式，如
css中可以这么写
div{background-color: #2459a2;height: 10px;
}4.层级选择器，以空格分割，可以将某个标签里面的某个标签设置成此样式，如
css中可以这么写
span div{background-color: #2459a2;height: 10px;
}5.组合选择器，以逗号分割，可以将某几个标签都设置成此样式，如
css中可以这么写
#i1,#i2,#i3{background-color: #2459a2;height: 10px;
}6.属性选择器，某个标签的某个属性设置成此样式，如
css中可以这么写
input[type="text"]{background-color: #2459a2;height: 10px;
}
三、CSS规则
1、注释 /* ... */
2、优先级，标签中style优先级最高，css编写顺序（底下的优先级比上面高）
四、CSS一些常用的样式
1.边框，border（围绕元素的内边距的一条或条线，如果div宽和高都为200px，border的四边都为1px的话，整体的宽和高为202px）
/* 宽度、边框样式、颜色 */border: 4px dotted red;
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-y3.漂移，float，可以使块级标签堆叠
1 /* 向左飘 */2 float: left3 4 /* 向右飘 */5 float: right
在多层div嵌套时，如果外层div标签管不住内层div标签，要在最外层div结束前加入一个div并设置样式，clear:both;
4.显示，dispaly
行内标签，无法设置高度、宽度、padding、margin
块级标签，可以设置高度、宽度、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;
Atas ialah kandungan terperinci HTML中如何使用CSS？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：分享一个Bootstrap的知识详解Artikel seterusnya：双飞翼布局的改造使用详解