HTML에서 CSS를 어떻게 사용하나요?

1. HTML에서 CSS를 사용하는 방법

HTML에서 CSS를 정의하는 방법에는 세 가지가 있습니다. 1. 태그에 스타일 속성을 사용합니다.

2. CSS 스타일을 작성합니다. 파일에

<link>

코드 재사용이 최대한 가능하도록 CSS 스타일 파일로 작성하는 것을 권장합니다

두번째,

CSS selector

1.id 선택자, id는 중복될 수 없다는 점에 유의하세요. 예를 들어

html에 id가 i1

标签>

css이면 이렇게 쓸 수 있습니다

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

2. 클래스 선택기, 클래스는 반복될 수 있습니다. 예를 들어

html에 태그가 있으면 클래스는 c1

标签>

css와 같이 작성할 수 있습니다.

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

3. 태그 선택기,

와 같이 모든 특정 태그를 이 스타일로 설정할 수 있습니다.

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>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="HTML에서 CSS를 어떻게 사용하나요?" > 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;

위 내용은 HTML에서 CSS를 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!