HTML에서 CSS를 어떻게 사용하나요?
- 零下一度원래의
- 2017-06-24 13:27:364699검색
1. HTML에서 CSS를 사용하는 방법
HTML에서 CSS를 정의하는 방법에는 세 가지가 있습니다. 1. 태그에 스타일 속성을 사용합니다.
2. CSS 스타일을 작성합니다. 파일에
<link rel="stylesheet" href="commons.css?1.1.11">코드 재사용이 최대한 가능하도록 CSS 스타일 파일로 작성하는 것을 권장합니다
두번째,
CSS selector
1.id 선택자, id는 중복될 수 없다는 점에 유의하세요. 예를 들어
html에 id가 i1
<标签 id="i1"></标签>
css이면 이렇게 쓸 수 있습니다
#i1{background-color: #2459a2;height: 48px;
}
html에 태그가 있으면 클래스는 c1
<标签 class="c1"></标签>
css와 같이 작성할 수 있습니다.
.c1{background-color: #2459a2;height: 10px;
}
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;
}
Three, CSS 규칙
1으로 작성할 수 있습니다. , comment /* ... */2, 우선순위, 라벨 스타일에서 우선순위가 가장 높음, CSS 쓰기 순서 (하단의 우선순위가 상단보다 높음)
4. 일반적으로 사용되는 CSS 스타일
1.Border, border(요소의 내부 여백을 둘러싸는 스트립 또는 스트립) Line, div의 너비와 높이가 200px이고 테두리의 네 변이 1px인 경우 전체 너비와 높이 202px)
/* 宽度、边框样式、颜色 */border: 4px dotted red;
테두리 스타일
2 배경, 배경
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
배경 스타일
3. 드리프트, 플로트, 블록 수준으로 만들 수 있습니다. 태그 stacked
1 /* 向左飘 */2 float: left3 4 /* 向右飘 */5 float: right
float style
다중 레이어 div가 중첩된 경우 레이어 div 태그는 내부 레이어 div 태그를 제어할 수 없습니다. 전에 div를 추가하고 스타일을 설정해야 합니다. 가장 바깥쪽 div의 끝. Clear:both;
4. 디스플레이, 디스플레이
인라인 태그, 높이 및 너비, 패딩, 여백을 설정할 수 없음블록 수준 태그, 높이, 너비, 패딩을 설정할 수 있음 , 여백
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;
위 내용은 HTML에서 CSS를 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Bootstrap에 대한 자세한 지식 공유다음 기사：Bootstrap에 대한 자세한 지식 공유