How to use CSS in HTML?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to use CSS in HTML?

零下一度

Jun 24, 2017 pm 01:27 PM

css

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">

Copy after login

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"></标签>

Copy after login

You can write like this in css

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

Copy after login

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

There is a tag in html, the class is c1

<标签 class="c1"></标签>

Copy after login

It can be written like this in css

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

Copy after login

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

css you can write

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

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;

Copy after login

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

Copy after login

Background style

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

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

Copy after login

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

Copy after login

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;

Copy after login

边距样式

6.高度、宽度，height、width

1 height: 40px;2 width: 20%;

Copy after login

高度、宽度样式

7.水平居中、垂直居中，text-align、line-height

1 /* 水平居中 */2 text-align: center;3 4 /* 垂直居中line-height的值要与height的值一致 */5 line-height: 20px;

Copy after login

居中样式

8.字体大小、字体颜色、字体加粗，font-size、color、font-weight

1 font-size:23;2 color:red;3 font-weight:30;

Copy after login

字体样式

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>

Copy after login

位置样式

10.透明度，opcity

1 /* 透明度 */2 opcity: 0.5

Copy after login

透明度样式

11.层级，z-index

1 /* 层级顺序 谁大谁在上面 */2 z-index:10

Copy after login

层级样式

12.图片显示，overflow

1 /* 隐藏多出的部分 */2 overflow:hidden;3  4 /* 出现滑轮 */5 overflow:auto;

Copy after login

图片显示样式

13.当鼠标移动到标签时，css样式生效，hover

1 样式:hover{2     ....3     ....4 }

Copy after login

hover样式

五、后台管理实例

  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>

Copy after login

后台管理

六、响应式布局

 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>

Copy after login

响应式布局

七、布局说明

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1663

CakePHP Tutorial

1419

Laravel Tutorial

1313

PHP Tutorial

1263

C# Tutorial

1237

Related knowledge

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

See all articles