Objectives:
1. What is css?
2. What is the relationship between css and html?
3. Three forms of css?
- Style sheet features
- Priority algorithm and sorting
1. What is css?
1，English name: Cascading Style Sheets Chinese Name: cascading style sheet, also known as cascading style sheet, referred to as style sheet 2，be used for HTML Style definition of elements in the document [Function:] realizes the separation of content and performance, and improves the reusability and maintainability of the code
2. The relationship between css and html
- html is used to build the structure of web pages
- css is used to build the style of html elements
- html is the content composition of the page, and css is the performance of the page
- The function of css is to make html pages beautiful
Principles for using html attributes and css styles:
W3C recommends using css style instead of html attribute as much as possible
- Separation of content and presentation
- If it is a property specific to html, the html property is used
3. Three forms of css
-
inline style
– use the style attribute, which is defined in the html tag -
Internal style sheet
– use the < style > tag definition in the < head > of the html page -
External style sheet
– define styles in an external css file (. css file)
– style sheet files are introduced by html pages using < link > tags
#1. Inline style, also known as inline style
Syntax:
< label style = "attribute 1: value 1; attribute 2: value 2;..." > content, picture < / label >
For example:
<p style="color:red;font-size:20px;">Paragraph 1</p>
#2. Internal style
Syntax:
<style>
selector{
Attribute: value;
Attribute: value;
...
}
</style>
Selector:
Tag selector: tagName {CSS code}
class selector: className{css code}
id selector: #idName{css code}
Group selector: (comma) means and
The descendant selector (space) indicates inclusion
Descendant selector: > found a son element
Wildcards:*
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
color: red;
font-size: 20px;
}
.kuai{
color: green;
}
#biaoti{
color: yellow;
}
/*> Looking for the son of grandfather, only looking for the son*/
.grandfather>span{
color: blue;
}
/*Space means include. You are looking for all the a tags contained in grandfather*/
.grandfather a{
color: red;
}
/*,Means and Both kuai and #biaoti execute*/
.kuai,#biaoti{
font-size: 50px;
}
</style>
</head>
<body>
<p>paragraph</p>
<div class="kuai">Block label div</div>
<h1 id="biaoti">title</h1>
<div class="grandfather">
<p class="son">
<span class="grandson">grandson span</span>
<a href="" class="grandson">grandson a</a>
</p>
<span class="son">Son span</span>
<a href="" class="son">Son a</a>
</div>
</body>
</html>
[internal style, which can be reused on the current page]
#3. External style
1. Create a new file named * css
2. In the < head > tag of the page that needs to use the style sheet, use the < link > tag to import the css file
For example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="myStyle.css"> </head> <body> <p>paragraph</p> <h1>Title 1</h1> </body> </html>
[Note:]
In the actual development process, external styles must be used
- It can realize the separation of content and performance
- Can be reused by multiple pages
css style sheet features:
- Inheritance
– most css style rules can be inherited - Lamination
– multiple styles can be defined without sequence
– when there is no conflict, the styles in multiple style sheets can be stacked into one - priority
– when style definitions conflict, styles are applied according to the priority of different style rules
css priority algorithm and sorting:
Priority algorithm (/ weight):
Label selector: 1
class selector: 10
id selector: 100
Inline style: 1000
! important: with the highest priority
Sort:
! Important > inline style > ID > class > tag
With the same priority, the "proximity principle" shall be adopted:
Proximity principle: if the same style is defined repeatedly, the last one shall prevail!
For example:
ok, that's all for today. Thank you for reading and watching. I hope to communicate and make progress with you.