css
- css: page beautification and layout control
- Concept: Cascading Style Sheets
Cascade: multiple styles can act on the same html element and take effect at the same time
-
Benefits:
Powerful:
Separating content presentation from style control
Reduce coupling and decoupling
Make division of labor and cooperation easier
Improve development efficiency
Use of css
- Combination of css and html
- inline style
Use the style attribute in the label class to specify the css code
For example:
<div style="color:red;"> hello css</div>
- Internal style
In the head tag, define the style tag. The content body of the style tag is the css code
as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>div{color: red;}
</style>
</head>
<body>
<div>hello css</div>
</body>
</html>
- External style
Define css resource file
In the head tag, define the link tag to introduce external resource files
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<div>hello css</div>
<div>hello css</div>
</body>
</html>
a.ass file
div{
color: blue;
}
- be careful:
In 1, 2 and 3 ways, the scope of css is becoming larger and larger
1. The method is not commonly used, and it is commonly used in the later stage. 2,3
Three formats can be written as
css syntax
- Format:
selector{
Property name 1:Attribute value 1;
Property name 2:Attribute value 2;
...
}
- Selectors: filter elements with similar characteristics
- Note: each pair of attributes needs to be used; Separated, the last pair of attributes can not be added
- selector
- attribute
- Base selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/a.css">
<style>#div1{
color: red;
}
div{
color: green;
}.cls1{
color: blue;
}
</style>
</head>
<body>
<!--1.Base selector
1. id Selector: select a specific id Attribute value element, recommended in a html On page id Value each
Syntax: #id attribute value {}
2. Element selector: select an element with the same label name
grammar:Label name{}
be careful: id Locators take precedence over element selectors
3.Class selector: with the same class Element of attribute value
grammar .class Attribute value{}
Note: class selectors take precedence over element selectors
-->
<div id="div1">pofenx</div>
<div>pofenx_max_pro</div>
<div>hello css</div>
<div>hello css</div>
<p class="cls1">pofenxxxxx</p>
<p>ha-ha</p>
</body>
</html>
- Extension selector
- Select all elements: Syntax: * {}
- Union selector: selector 1, selector 2{}
- Sub selector: filter selector 2 element under selector 1 element
Syntax: selector 1: selector 2{}
- Parent selector: parent element selector 1 of filter selector 2
Syntax: selector1 > selector2{}
- Attribute selector: select the element name with attribute name = attribute value
Syntax: element name [attribute name = "attribute value"] {}
- Pseudo class selector: select the state that some elements have
Syntax: element: state {}
as
Status:
link: status of initialization
visited: accessed status
active: the state of being accessed
Hover: mouse hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div p{
color: red;
}
</style>
<style>
div>p{
border: 5px solid;
}
a:link{
color: red;
}
a:visited{
color: blue;
}
a:hover{
color: green;
}
</style>
</head>
<body>
<div>
<p>pofenx</p>
</div>
<p>pofenx1</p>
<div>pofenx_max_min</div>
<div>aaa</div>
<input type="text">
<input type="password">
<br>
<a href="#">aaaa</a>
</body>
</html>
6. Properties
- Font, text
Font size: font size
Color: text color
Text align: alignment
line-height； Type height
- background
background:
- frame:
Border: set the border to conform to the attribute
- Dimensions: width: width, height: height
- Box models: layout control‘
Margin: outer margin
padding: inner margin. By default, the inner margin will affect the size of the whole box
box-sizing,border-box; Set the properties of the box so that width and height are the final box size
Float: float
left；，right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid red ;
width: 100px;
}
.div1{
width: 100px;
height: 100px;
/*Margin
margin: 50px;*/
}
.div2{
width: 200px;
height: 200px;
padding: 50px;
/*Set the box properties so that width and height are the final size of the box*/
box-sizing: border-box;
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float :right;
}
</style>
</head>
<body>
<div class="div2"><div class="div1"></div></div>
<div class="div3">aaa</div>
<div class="div4">bbb</div>
<div class="div5">ccc</div>
</body>
</html>