catalogue
css Chapter 1
1 cascading style sheets
In cascading style sheets, once cascaded means that styles can be used together and have priority
2 element
1. Replacement elements
The part used to replace the element content is not directly displayed by the document content, such as ` ` ` < img SRC ='a.jpg '> ` ` The content is not determined by the content of the document itself, but by the introduction of external files
2. Non replacement elements
The content of the element is displayed in a box generated by the browser itself
3. Display mode of elements
1. Block element: generate a box that fills the content area of the parent element. There cannot be other elements next to it. For example, generate a div under a body. If the width is not set, the width of the div will fill the content area of the parent element
2. Inline element: generates a box within a line of text without breaking the line
3. Block level elements cannot appear in inline elements
4. display attribute
1. display-outside block inline run-in
2. Display inside ， flow ， flow root ('clear float ') table (table) flex (flow layout) grid('grid layout') Ruby (don't know)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header .left {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.header .right {
width: 100px;
height: 100px;
background-color: blue;
float: right;
}
.header {
display: flow-root ; // Clear float
}
.center {
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="header">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="center"></div>
</body>
</html><div class="center">
123
456
789
</div>
<div class="center">
123
456
789
</div>
.center {
display: table;
background-color: red;
}
Give Way div Use as a table3. display-item list-item && block inline run-in flow flow-root
4. display-internal
Table: Specifies the object as a table at the block element level. Similar to html tag < Table > (CSS2)
Inline table: Specifies the object as an inline element level table. Similar to html tag < Table > (CSS2)
Table caption: Specifies the object as the table title. Similar to html tag < caption > (CSS2)
Specify table cell as the table object. Similar to html tag < td > (CSS2)
Table row: specifies an object as a table row. Similar to html tag < tr > (CSS2)
Table row group: Specifies the object as the table row group. Similar to html tag < tbody > (CSS2)
Table column: Specifies the object as a table column. Similar to html tag < col > (CSS2)
Table column group: Specifies that the object is displayed as a table column group. Similar to html tag < colgroup > (CSS2)
Table header group: Specifies the object as the table header group. Similar to html tag < thead > (CSS2)
Table footer group: Specifies the object as the footnote group of the table. Similar to html tag < tFoot > (CSS2)
5. display-box contents none
6. display-legacy inline-block inline-list-item inline-table inline-flex inline-grid
5. Inline elements can only be placed in block elements, and vice versa
3. Introduce css
1 link
1. Function of link:
Associating other documents with the current document is a tag in html
2. Location of link:
Must be placed in the head
3. Attributes of link:
Rel: abbreviation of relation, which refers to the values in sytlesheet rel: sytlesheet preferred style sheet alternate candidate style sheet
href: address, which can be absolute or relative
Media: type and function of multimedia descriptor media {media="screen"
Title: set the name of the style sheet, which is used jointly with the candidate style sheet. The user decides which style sheet to select. If the title is not selected for the style sheet, it is a permanent style sheet
2 @import
1. Function:
Import external style sheet
2. The difference between link and @ import
| Same point | Different |
| Will load external files | 1 @ importer must be inside the element < style > @ import UTL ('. / import. CSS') < / style > |
| Multiple css documents can be introduced into a document, whether link or import | @Import import document cannot specify candidate style sheets |
| You can display the import style and the media @ import url() screen; | Another css document @ import URL ('. / css. css') @ import url('./css.css') @import url('./css.css') @import url('./css.css')h1 {color:green} |
| @The import instruction must be written at the beginning of the style |
3 style
1. The content written between the beginning and the end is the document style sheet or embedded style sheet
<style type='text/css'>
.header .left {
width: 100px;
height: 100px;
background-color: pink;
}
.header .right {
width: 100px;
height: 100px;
background-color: blue;
}
.header {
display: flow;
}
.center {
display: table;
background-color: red;
}
</style>4 inline style
1. Function of inline style: provide a small number of styles for a single element
2. It is just a series of rule declarations, which cannot contain the whole style sheet or complete rules
3 content in style sheet
1. Mark, note
div {
/* display: block; *
}
2. Rules
Selector {block declaration
Attributes: Values
}
3. Manufacturer prefix:
Used to solve browser compatibility problems
-epub-
- moz - Firefox
-ms- ie
-o- opera
- webkit - webkit browser
4. Processing blank:
Multiple blanks will be merged into one blank, and multiple keywords must be separated by blanks
4 media query
1. Grammar
@media {}
2. Type of media query
1. all show all media
2. print preview is used in printed documents
3. screen, browser computer screen
3. Media descriptor
1. The location of the media query or the conditions that the media needs to meet. A media descriptor includes a media type and a list of one or more media descriptions. The characteristics need to be placed inside parentheses
2. The logical keywords that media descriptors can use are {AND NOT OR ONLY
3. Type of media descriptor and value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (max-width:800px) {
.header .right {
background-color: blue;
}
}
.header {
display: flow-root;
}
.left {
width: 200px;
height: 200px;
float: left;
background-color: pink;
}
.right {
width: 200px;
height: 200px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div class="header">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>