·1, Selector
1.1html
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>learn java</h1>
<p>hear</p>
</body>
</html>
1.4 introduction modes of 2css
Internal style;
/*First kind*/ <h1 style = "color:red">content</h1>;
/*Second*/
<style>
h1{
color:red;
}
</style>
External style;
/*Code written externally*/
<style>
h1{
color:red;
}
</style>
/*Code written internally*/
<link rel = "stylesheet" href = "css/style.css"> /*href = "File name“*/
1.3 three basic selectors (key points)
Function: select an element on the page
Basic selector:
- tag chooser
- Class selector class
- id selector
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
h1{ /*1.Tag selector, automatically change the font color of all h1 changes on this page*/
color:red;
}
.qiang{ /*2.Class selector, which can change the class of this page*/Variable, cross label
}
#Wo{/ * 3.id selector, which must be globally unique*/
}
</style>
</head>
<body>
<h1 class = "qiang" id = "wo">learn java</h1>
<h1 class = "qiang">learn JAVA</h1>
<p>hear</p>
</body>
</html>
/*Priority: id > class > tag chooser
1.4 level selector (four types)
- Descendant selector:
body p{
background: red;
}
2. Sub suspension selector
body>p{
background:red;
}
3. Adjacent selector
.active+p{ /*Only p2 color changes*/
background: red;
}
4. Universal selector
.active~p{ /*class ~ is used to indicate that all peers under active change*/
background:red;
}
Example:
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
body p{
background: red;
}
body>p{
background:red;
}
.active + p{ /*Only p2 color changes, only the adjacent one below*/
background: red;
}
.active~p{ /* All changes adjacent to P and below p*/
background: red;
}
</style>
</head>
<body>
<p class = "active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</body>
</html>
1.5 structure pseudo class selector
(four types will be used)
/*ul First child element of*/
ul li:first-child{
background:red;
}
/*ul Last child element of*/
ul li:last-child{
}
/*Select p1: navigate to the parent element, select the current first element, and select the parent element of the current p element. Only the current element can take effect*/
p:nth-child(1){
}
/*Select the second type of the p element under the parent element*/
p:nth-of-type{
}
Example:
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
/*Avoid using id and class selectors*/
<style>
/*ul First child element of*/
ul li:first-child{
background:red;
}
/*ul Last child element of*/
ul li:last-child{
}
/*Select p1: navigate to the parent element, select the current first element, and select the parent element of the current p element. Only the current element can take effect*/
p:nth-child(1){
}
/*Select the second type of the p element under the parent element*/
p:nth-of-type{
}
</style>
</head>
<body>
<p class>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>p4</li>
<li>p5</li>
<li>p6</li>
</body>
</html>
1.6 attribute selector (important)
1. Attribute name
a[id]{
background: red;
}
2. Attribute name plus attribute value
a[id=first]{
}
3. With some element
a[class*= link]{
}
4. Start with the above and end with the above
a[href^= http]{
}
Beginning:^= Ending: $=
Example:
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
/*Avoid using id and class selectors*/
<style>
/*Element with id a[]{}*/
a[id]{
background: red;
}
/*Attribute name = attribute value*/
a[id=first]{
}
/* class Attribute with some links in*/
/* *= Is to contain this element, = is absolutely equal to*/
/*As long as there is a link in the class, it will change*/
a[class*= link]{
}
/*Check the elements in the href that begin with http*/
a[href^= http]{
}
</style>
</head>
<body>
<p class = "demo">
<a href = "http://www.baidu.com" class = "link item" id = "first">1</a>
</body>
</html>
2, Beautify elements of web pages
2.1 font style
Span: it is used to express important and prominent words. Use span to cover them
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
/*
font-famoily: Font type
font-size: Font size
font-weight: Font weight
*/
body{
font-famoily:Regular script;
font-size:
font-weight:
}
body{
font:obligue lighter 16px Regular script;
}
</style>
</head>
<body>
</body>
</html>
2.2 text style
-
colour
-
Text alignment
-
text-indent
-
Line off line height single line file up and down ww
-
Decoration: text decoration
-
Horizontal alignment of text and picture: vertical align: middle;
Color:
<style>
/*
word
rgb
rgba
*/
body{
color: rgb( , ,);
color: rgba( , , ,0 ~ 1); /*transparency*/
}
</style>
Text alignment:
<style>
body{
text-align:left; /*Typesetting*/
}
</style>
First line indent:
<style>
body{
text-indent:2em; /*The first line is indented by 2 cells, and px refers to pixels*/
height:300px;
line- height:300px; /*When the row height is consistent with the block height, you can center up and down*/
}
</style>
2.3 text shadow and hyperlink pseudo classes
Pseudo class:
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
/*Default color*/
p{
}
/*Hover color*/
p: hover{
}
/*Mouse inactive color*/
p: active{
}
</style>
</head>
<body>
<p> hhel</p>
</body>
</html>
Shadows:
<style>
body{
text-shadow /*text-shadow:Shadow color, horizontal offset, s
}
</style>
2.4 list
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
/*ul li
list-style:
none:Remove the origin
circle:Hollow circle
decimal:number
*/
ul li{
height:30px;
list-style:none;
}
</style>
</head>
<body>
<ul>
<li href= "#">hello</li>
<li href= "#">hello</li>
<li href= "#">hello</li>
</ul>
</body>
</html>
2.5 background
background color
Background picture
<style>
div{
width:
height:
background-image url("images/tx.jpd");/*The default is tile all*/
}
.div1{
background-repeat:repeat-x;/*tile horizontally*/
}
.div2{
background-repeat:repeat-x;/*Tile vertically*/
}
.div3{
background-repeat:no-repeat;/*no-repeat */
}
</style>
.title{
/*Color picture picture position tiling method*/
background: red url("../image/d.gif") 270px 10px no-repeat;
}
2.6 gradient
3, Box model
3.1 what is a box
Margin: outer margin
padding: inner border
border: border
3.2 border
1. Thickness of border
2. Border style
3. Border color
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
#box{
width:200px;
border:Thickness, style, color;
margin:0 auto; /*Up, down, left and right*/
}
div:nth-of-type(1)>input{
border:3px solid black; /*solid Solid dash dashed line*/
}
</style>
</head>
<body>
<div id="app">
<h2>Member login</h2>
<form action= "#">
<div>
<span>full name</span>
<input type="text">
</div>
<div>
<span>full name</span>
<input type="text">
</div>
<div>
<span>full name</span>
<input type="text">
</div>
</from>
</div>
</body>
</html>
3.3 box calculation
Determine the size of an element:
margin + border + padding + content
3.4 rounded border
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
/* Circle: radius = fillet
*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 10px; /*Set fillet border*/
}
</style>
</head>
<body>
<div >
</div>
</body>
</html>
3.5 shadows
4, Float
4.1. Standard document flow
Block level element: exclusive row
Inline elements: do not monopolize a row
span a image ..
In line elements can be included in one line, and block level elements cannot be included
4.2.display
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
/*
block :In block element
inline:Inline element
inline-block:
none:
*/
div{
width: 100px;
height: 100px;
border:
display:inline-block:
}
</style>
</head>
<body>
<div >
</div>
<span>
</span>
</body>
</html>
4.3.float
float: left float: right
4.4 parent element collapse
clear:
clear:left; /*Floating elements are not allowed on the left*/ clear:right; /*Floating elements are not allowed on the right*/ clear:both; /*Floating elements are not allowed on both sides*/
resolvent:
1. Increase the height of parent element
2. Add an empty div element to clear (but try to avoid empty div in the code)
3.overflow
/*Add one to the parent element:*/ overflow:scroll; /**A scroll bar is generated*/
overflow:scroll; / * generates a scroll bar/
4. Add a pseudo in the parent class (recommended)
#father:after{
content:'';
display:block;
clear:both;
}
4.5 comparison
display:
The position of the element cannot be determined, and the direction is not controllable
float:
You can change the position of the element, which is the same as the standard document flow, but you need to solve the problem of parent collapse
5, Positioning
5.1 relative positioning
position: relative; bottom top left right
Relative positioning still occurs in the standard document stream
5.2 absolute positioning
position: absolute
1. When there is no parent element, it is located based on the browser
2. Positioning relative to parent element
3. Move within the range of parent elements
(not in the standard document, the original position changes)
5.3 fixed positioning
5.4z-index
arrangement
5.5opacity
Floating elements are allowed*/
clear:right; / floating elements are not allowed on the right/
clear:both; / floating elements are not allowed on both sides/
resolvent: 1.Increase the height of the parent element 2.Add an empty div Element to clear(But try to avoid empty in the code div) 3.overflow ```css /*Add one to the parent element:*/ overflow:scroll; /**A scroll bar is generated*/
overflow:scroll; / * generates a scroll bar/
4. Add a pseudo in the parent class (recommended)
#father:after{
content:'';
display:block;
clear:both;
}
4.5 comparison
display:
The position of the element cannot be determined, and the direction is not controllable
float:
You can change the position of the element, which is the same as the standard document flow, but you need to solve the problem of parent collapse
5, Positioning
5.1 relative positioning
position: relative; bottom top left right
Relative positioning still occurs in the standard document stream
5.2 absolute positioning
position: absolute
1. When there is no parent element, it is located based on the browser
2. Positioning relative to parent element
3. Move within the range of parent elements
(not in the standard document, the original position changes)
5.3 fixed positioning
5.4z-index
arrangement