1 CSS
Web page -- > people
HTML -- > skeleton
CSS -- > skin and flesh
CSS refers to cascading style sheets (cascading style sheets), which are mainly used to set the text content (font, size, alignment, etc.) in HTML pages, the appearance of pictures (width and height, border style, margin, etc.) and the layout of layout, etc. CSS is based on HTML and provides rich style functions.
1.1 how to introduce CSS into HTML
CSS is based on HTML: it indicates that CSS depends on HTML. CSS is used to describe HTML tags
1.1.1 type I
Write the CSS Style on the HTML tag, point to it with the Style attribute, and split multiple CSS styles with semicolons
<!--hold CSS Style written in HTML On the label, use Style Attribute pointing, Multiple CSS Styles are separated by semicolons-->
<div style="font-size: 100px;
font-family: 'Arial Narrow';
color: white;
background: red;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
border-radius: 100px;
margin: 0 auto;">
div
</div>
1.1.2 second type
Write the CSS Style inside the HTML tag, wrap it with the Style tag, and associate the CSS Style with HTML in some way
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height: 500px;
width: 500px;
background: #16eeff;
margin: 0 auto;
}
.div1:hover{
background: cornflowerblue;
border: 10px solid cornflowerblue;
}
</style>
</head>
<body>
<div class="div1">
div
</div>
</body>
1.1.3 the third type: import external files
<link rel="stylesheet" type="text/css" href="http://localhost:63342/code/com/cskaoyan/www/fe/css/01_css.css" /> <!-- <link rel="stylesheet" type="text/css" href="./01_css.css" />--> <!-- <style type="text/css">--> <!-- @import url(./01_css.css);--> <!-- </style>-->
1.2 selector:
Selector in CSS: it is used to describe the way to associate HTML tags with corresponding CSS styles
Label selector class selector Id selector: Compound selector pseudo class selector pseudo element selector attribute selector
1.2.1 label selector
Tag selector: Associate html style with css code by tag name
<style>
p{
width: 100px;
height: 100px;
background: #17c044;
margin: 0;
}
</style>
Type 1.2.2 selector
Class selector: Associate html style with css code through class name (class attribute)
1.2.3 Id selector
id selector: Associate html style with css code through id name (id attribute)
In an HTML page, the tag id is unique
Id is usually given in js dom
<style>
#div2{
width: 100px;
height: 100px;
border: 1px solid silver;
color: red;
}
</style>
</head>
<body>
<div id="div2">
div2
</div>
</body>
1.2.4 others
Compound selector pseudo class selector pseudo element selector attribute selector
1.2.5 priority of selector
Inline > ID selector > pseudo class | class | attribute selection > label > wildcard
! Important: force the priority of a style to the highest. CSS defines a style! Important command, which is given the highest priority. In other words, regardless of the weight and the distance of the style position,! Important has the highest priority. div{ background: red !important; }
If the style and priority are the same, follow the proximity principle
1.3 box model
Standard flow / standard document flow / document flow: the page display is arranged from top to bottom and from left to right on the page according to the code label order, which is the standard flow
The space occupied by any html tag on the page can be regarded as a rectangular box (whether the box is large or small), which is the box model
The rectangular box is composed of four parts: element content area (storage word content), inner margin area, border area and outer margin area
The width and height we set actually controls the width and height of the content area of a box model element, excluding margin border and padding
The child element occupies the element content area of the parent element
Background color = padding + element content area
There is no problem with block level elements
There is a problem with row level elements
/* Upper right lower left*/
/*padding: 110px 20px 30px 40px;*/
/* Up, down, left and right*/
/*padding: 10px 20px;*/
/* Up, left, right and down*/
/*padding: 10px 20px 30px;*/
/* The outer margin is written in the same way as the inner margin */
/* margin: 10px 20px 30px 40px;*/
Outer margin merge
On an html page, when two tags are closely adjacent in the vertical direction, there will be merging (who listens to who). This phenomenon is called outer margin merging
1.4 classification of labels
Definition of row: depending on the parent element, the width of a row indicates from left to right of the parent element
1.4.1 block level elements
1. Block level elements are exclusive to one line
2. Width / height / inner margin / outer margin can be set
3. Width can be inherited, but height cannot be inherited
Block level elements refer to those whose attribute is display:block; Element. Block level elements are usually used to build large layout (large structure)
Div p ul li ol table tr h1...h6 form ...
1.4.2 row level elements
1. Row level elements are displayed in the row, and continuous row level elements are arranged in the same row
2. Width and height cannot be set, only the left and right values of the inner and outer margins can be set
3. The width and height of row level elements are determined by the size of their own content
Row level elements can only contain text or other row level elements (do not nest block level elements in row level elements). Row level elements refer to their own attribute as display:inline; Element. Line level elements are usually used to build text and small icons (small structures).
I b span a img input textarea select ...
1.4.3 inline block
It is essentially a row level element and can coexist with other row level elements. However, width, height, inner and outer margins can be set
The attribute is display: inline block; Element. Common inline block elements:
Input input box
img import picture
You can change the display of the element in the inline style or css style to convert the three elements.
display: block； (change element to block level element)
display: inline； (change element to row level element)
display: inline-block； (change element to row level block element)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
background: #eda481;
display: inline-block;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
</body>
1.5 floating
Standard flow / standard document flow / document flow: the page is displayed according to the order of code labels, from top to bottom, from left to right, and according to the order of element characteristics, that is, standard flow
Floating was originally used for -- > text wrapping
Now floating is generally used for layout
Floating: floating is to make the labels in the document separate from the standard flow. In image, it is to make a label display "floating"
1: Floating only affects the following elements: because floating is separated from the standard document flow, the original position occupied by the page is empty. The following elements should meet the characteristics of the standard document flow from top to bottom and from left to right, so they should occupy the empty position in front
2: Continuous floating line display
3: Floating aligns with the top of the element as the base
4: Floating mode conversion
1.5.1 clear float
Clear: clear who is affected
Left: floating elements are not allowed on the left.
Right: floating elements are not allowed on the right.
both: floating elements are not allowed on the left and right sides.
1.6 supplement
1. overflow
/*Visible:Default value. The content will not be trimmed and will be rendered outside the element box.*/
/*Hidden:The content is trimmed and the rest is invisible.*/
/*Scroll:The content is trimmed, but the browser displays a scroll bar to see the rest of the content.*/
/*Auto:If the content is trimmed, the browser displays a scroll bar to view the rest of the content.*/
/* Overflow hiding */
/* overflow: hidden;*/
/* Hide, do not occupy space*/
display: none;
/* Hide and occupy space*/
/*visibility: hidden;*/
2 row height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
background: #eda481;
display: inline-block;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
</body>
</html>
Css has a perception,
Positioning, flexible layout, animation
practice
task
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
min-width: 1000px;
}
.div-left{
/*display: inline-block;*/
/*vertical-align: top;*/
float: left;
border: 1px solid silver;
margin: 30px 0 0 30px;
width: 80px;
height: 300px;
padding: 30px;
}
.div-left div{
/*width: 140px;*/
/*margin: 10px 30px 0 30px;*/
height: 30px;
line-height: 30px;
border-bottom: 1px solid silver;
}
a{
text-decoration: none;
}
.div-right{
/*display: inline-block;*/
/*vertical-align: top;*/
float: left;
width: 500px;
height: 500px;
border: 1px solid silver;
margin: 30px 0 0 30px;
}
iframe{
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="div-left">
<div>
<a href="#"Target =" iframe right "> Home Page</a>
</div>
<div>
<a href="https://www.baidu. Com "target =" iframe right "> Baidu</a>
</div>
<div>
<a href="https://www.taobao. Com "target =" iframe right "> Taobao</a>
</div>
<div>
<a href="https://www.bilibili. Com "target =" iframe right "> beep beep beep</a>
</div>
</div>
<div class="div-right">
<iframe name="iframe-right">
</iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div-top{
width: 700px;
background: #17ff66;
margin: 0 auto;
}
.div-bottom{
width: 700px;
height: 48px;
background: #fffe13;
margin: 0 auto;
}
.top-son{
float: left;
width: 100px;
text-align: center;
background: black;
color: white;
border-top: 2px solid white ;
border-bottom: 2px solid #fffe13;
}
.top-son:hover{
background: red;
border-top: 2px solid red ;
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<!--debugging-->
<!--If, The page is already displayed, You cannot directly change the size of the content displayed on the page: shake-->
<div class="div-top">
<div class="top-son">
home page
</div>
<div class="top-son">
home news
</div>
<div class="top-son">
home news
</div>
<div class="top-son">
home news
</div>
<div class="top-son">
home news
</div>
<div class="top-son">
home news
</div>
<div class="top-son">
home news
</div>
</div>
<div class="div-bottom">
</div>
</body>
</html>