1 CSS
Biggest contribution: free HTML from style, focus on structure rendering, and leave the style to CSS implementation
1.1 what is CSS
CSS (Cascading style sheets) Cascading style sheets (Cascading style sheets)
It is mainly used to set the appearance styles such as text content (font, size, alignment), picture (size, border, etc.) and layout of HTML pages
CSS provides functions based on HTML, and can also set different styles for different browsers
1.2 CSS style rules
selector{
Attribute name: attribute value;
Attribute name: attribute value
}
Rules:
- Use the selector to specify the HTML object used by CSS style, and the specific style is in {}
- Property is the style property of the specified object setting
- Attributes and attribute values appear as key value pairs, and attributes and attribute values are separated by English colons
- Multiple key value pairs are separated by English semicolons. Pay attention to indentation and alignment
2. Font style properties of CSS
2.1 font size font size
Used to set the size of the font. The value of this property can use relative length units or absolute length units. px is recommended
Relative length: px pixels em relative to the font size of the text
Absolute length: Inch cm cm mm pt po in t
2.2 font type font family
Font type settings, such as Song typeface, bold typeface and Microsoft YaHei
When setting, you can set multiple at the same time to prevent the font type from being displayed because the browser does not support it
<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 type="text/css">
p{
font-size: 20px;
font-family: "Regular script";
}
li{
font-size: 20px;
font-family: "Regular script,Blackbody,Tahoma, Microsoft YaHei";
}
</style>
</head>
<body>
<p>
Style rules:
<ol>
<li>Selector user specified CSS Style action HTML Object, and the specific style set by the object is in curly braces;</li>
<li>Properties and property values appear as key value pairs</li>
<li>Property is the style property set on the specified object</li>
<li>The separator between property and property value must be an English colon</li>
<li>Multiple key value pairs are distinguished by English semicolons. Pay attention to indentation and alignment </li>
</ol>
</p>
</body>
2.2. 1. Unicode font of CSS
To prevent Chinese names of font types from being garbled and unrecognized due to inconsistent character sets, the following two solutions can be adopted
Write in English
font-family: "Micrisoft Yahei";
Expressed in Unicode code
font-family: "\6977\4F53";
2.3 font weight
/*
normal bold lighter,100--900 integer
400 Equivalent to normal
700 Equivalent to bold
*/
font-weight: 400;
2.4 font style
Mainly used to specify italic text.
This property can set three values:
- normal - text is displayed normally
- italic - text is displayed in italics
- oblique - text is "Italic" (Italic is very similar to italic, but less supported)
font-style: oblique;
2.5 comprehensive setting of font attributes
font:font-style font-weight font-size font-family; font:italic bold 20px "Regular script";
The sequence cannot be changed during comprehensive setting
You can use the default value for unnecessary attributes, but you must keep font style and font family, otherwise the setting is invalid
3 selector (key)
3.1 element selector
Syntax:
li{
font: italic bold 20px "Regular script";
color: bisque;
}
<!-- Tag name{Attribute name: attribute value} -->
Advantages: quickly select similar elements in the page and use a unified style
Disadvantages: it is impossible to carry out differentiated design for similar elements
Type 3.2 selector
Use "." Identify, followed by the class name. When using, add class = "class name" after the label
Syntax:
<!-- .Class name{Attribute name: attribute value} -->
<style type="text/css">
.font-style{
font-size: 20px;
font-family: "Regular script";
font-weight: 700;
}
</style>
<body>
<ul class="font-style">
<li>watermelon</li>
<li>Banana</li>
<li>Apple</li>
<li>orange</li>
</ul>
</body>
Advantage: you can define separate or identical styles for element objects
skill:
- When the class name is long or consists of multiple words, you can use the middle dash to name it
- Underscores are not recommended
- Do not use pure numbers and Chinese names, and try to use English names
3.3 multi class name selector
<style type="text/css">
.size{
font-size: 100px;
}
.famliy{
font-family: 'Courier New', Courier, monospace;
}
.blue{
color: blue;
}
.red{
color: red;
}
.gold{
color: gold;
}
.green{
color: green;
}
</style>
</head>
<body>
<div>
<span class="blue size famliy">G</span>
<span class="red famliy">o</span>
<span class="gold size">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</div>
</body>
3.4 ID selector
The id is "#" followed by the id name. The id name is the name value of the id attribute of the element. The id name cannot be repeated
<style type="text/css">
#col{
font-size: 20px;
font-family: "Regular script";
}
#li1{
color: blue;
}
#li2{
color: blueviolet;
}
</style>
</head>
<body>
<ol id="col">
<li id="li1">Selector user specified CSS Style action HTML Object, and the specific style set by the object is in curly braces;</li>
<li id="li2">Properties and property values appear as key value pairs</li>
<li id="li3">Property is the style property set on the specified object</li>
<li id="li4">The separator between property and property value must be an English colon</li>
<li id="li5">Multiple key value pairs are distinguished by English semicolons. Pay attention to indentation and alignment </li>
</ol>
</body>
Unlike class selectors, id selectors can only be used once, and class selectors can be used multiple times
3.5 wildcard selector
Marked with "*" has the widest selection range and can match all elements in the page
In page layout, all internal and external margins should be eliminated, so as to achieve the purpose of free layout
/* Eliminate the inside and outside margins of the page */
*{
margin: 0;
padding: 0;
}
3.6 pseudo class selector
Used to add special effects to some selectors, mostly hyperlinks
3.6. 1 hyperlink pseudo class selector
/* Mouse pass */
a:hover{
color: blue;
}
/* Selected link */
a:active{
color: red;
}
/* Unreached links */
a:link{
color: green;
}
/* Visited links */
a:visited{
color:gold
}
3.6. 2 structure (position) pseudo class selector
/* First child element */
li:first-child{
color: pink;
}
/* Last child element */
li:last-child{
color:aqua;
}
/* Select a child element at a specific location */
li:nth-child(3){
color: brown;
}
/* Select elements in odd positions */
li:nth-child(odd){
color:chartreuse;
}
/* Select elements in even positions */
li:nth-child(even){
color: red;
}
3.6. 3 target pseudo class selector
Identified as object name: target, which can be used to select the target element of the current activity
/* Target pseudo class selector */
#zb:target{
color: deeppink;
}
<!-- click a Label connected to h1 label h1 namely a Link target for -->
<h1 id="zb">Zhongbei University</h1>
<a href="#ZB "> Zhongbei</a>
4 CSS appearance properties
4.1 text color
Value method of color:
- Predetermined color value: red green blue and other colors (English)
- Six hexadecimal digits, each two digits represents a color: #F3F102,#FFF (white), #000 (black)
- RGB means 0 ~ 255 or percentage: rgb (255, 0, 0) or RGB (50%, 50%, 90%)
<p>
color Value selection method:
1 Predefined color values: red green blue；
2 Hexadecimal, 6-digit hexadecimal, every two digits represent a color \#F3F102; #FFF Indicates white #000 means black
3 rgb The expression is: rgb(255,0,0)The value range of each digit is: 0-255 It can also be expressed as a percentage: rgb(100%,0%,0%)
</p>
4.2 line height
Unit: PS EM% PX
In general, 7 or 8 pixels larger than the font size is the best
p{
font-size: 14px;
line-height: 22px;
}
4.3 horizontal alignment text align
Value: left right center
4.4 indent text indent in the first line
Unit: EM% 1em is the width of a Chinese character
Negative values are allowed
4.5 letter spacing
Sets the spacing between characters
4.6 word spacing
Set the spacing of English words, which is invalid for Chinese characters
Both letter spacing and word spacing can be used in English. They can be used at the same time, but they are not recommended
4.7 color translucency
/* a It is used to set the value range of transparency to 0-1 */
background-color: rgba(255,0,0,0.1);
5 introduction of CSS
5.1 inline style sheet
Set the element style in the style attribute of the label
<p style="color: blue;">
Each element has a style attribute. The value is in the form of key value pairs, and multiple key value pairs are separated by semicolons
5.2 internal style sheet (embedded)
It can be placed anywhere, but it is generally placed in the head
<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 type="text/css">
/* Eliminate the inside and outside margins of the page */
*{
margin: 0;
padding: 0;
}
#col{
font-size: 20px;
font-family: "Regular script";
}
/* First child element */
li:first-child{
color: pink;
}
/* Last child element */
li:last-child{
color:aqua;
}
/* Select a child element at a specific location */
li:nth-child(3){
color: brown;
}
/* Select elements in odd positions */
li:nth-child(odd){
color:chartreuse;
}
/* Select elements in even positions */
li:nth-child(even){
color: rgb(100%,0%,0%);
}
/* Target pseudo class selector */
#zb:target{
color: deeppink;
}
p{
font-size: 14px;
line-height: 22px;
text-align: right;
text-indent: 2em;
/* word-spacing: 20px;
letter-spacing: 20px; */
/* a It is used to set the value range of transparency to 0-1 */
background-color: rgba(255,0,0,0.1);
}
</style>
</head>
5.3 external style sheet (external) (recommended)
Write the style in a style file outside the current HTML file with the suffix css, which introduces css files when HTML files are to be used.
The style is written directly in the css file without the style tag
Separation of structure and style
<!-- Importing external style files href Define external css Path to file -->
<link rel="stylesheet" href="style.css">
6 display mode of label
HTML tags are generally divided into block tags and inline tags, also known as block elements and inline elements
6.1 block elements
Each block element usually has one or more exclusive rows. You can set properties such as width, height, and alignment. It is often used to build the layout and structure of web pages.
Common block elements:
Title: h1~h6
Paragraph: p
Blocks: div (typical block element)
List: ol li ul
characteristic:
- Always start with a new line
- Row height, height, outer margin and inner margin can be controlled
- The default width is the width of the container
- It can accommodate inline elements and other block elements
6.2 inline elements
It does not occupy an independent area. It only depends on the font size and image size to support the structure. Generally, it can not set width, height, alignment and other attributes. It is often used to control the text style of the page
Common inline elements: a, strong, b, em, i, s, ins, u, span (typical inline elements)
characteristic:
- Line with adjacent elements
- Setting the width and height is invalid, but the inner margin can be set, and the outer margin can only be set in the horizontal direction, and the vertical direction is invalid
- The default width is the width of the content
- Only text or other inline elements can be accommodated
6.3 inline block element
It is expressed as inline elements, but has some characteristics of block elements, such as setting width, height and alignment
Common inline block elements: img, input, td
characteristic:
- On the same line as adjacent elements, but there will be a gap between them
- The default width is the width of its own content
- Height, row height, outer margin and inner margin can be controlled
6.4 conversion of label display mode
- Convert block level label to inline label display:inline
- Inline element conversion block element display:block
- Convert to inline block element display: inline block
7 compound selector for CSS
It consists of two or more basic selectors combined in different ways to select the target element more accurately and finely
7.1 intersection selector
The intersection selector is composed of two selectors, the first is the label selector and the second is the class selector. There can be no space between the two selectors, which represents the meaning of "and"
<!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 type="text/css">
p.red{
color:red
}
</style>
</head>
<body>
<p class="red">gules</p>
<p >gules</p>
<p class="red">gules</p>
<div class="red">gules</div>
<div class="red">gules</div>
<div class="red">gules</div>
<p>blue</p>
<p>blue</p>
<p>blue</p>
</body>
</html>
7.2 union selector
All selectors are linked by commas. Any form of selector can be used. As long as some or all of them are the same, they will be selected to represent the meaning of "and"
<!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 type="text/css">
p,.red,span{
color:red
}
</style>
</head>
<body>
<p class="red">gules</p>
<p >gules</p>
<p class="red">gules</p>
<div class="red">gules</div>
<div class="red">gules</div>
<div class="red">gules</div>
<p>blue</p>
<p>blue</p>
<p>blue</p>
<span>Union selector</span>
</body>
</html>
7.3 offspring selector
Also known as inclusion selector, it is used to select the descendants of elements or element groups. The outer label is written outside and the inner label is written inside. The middle is separated by spaces. When nesting occurs, the old inner label becomes the offspring of the outer label
<!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 type="text/css">
.nav a{
color: pink;
}
.person ul li{
color: aquamarine;
}
</style>
</head>
<body>
<div class="nav">
<a href="#"> Home Page</a>
<a href="#"> Products</a>
<a href="#"> Personal Center</a>
</div>
<a href="#">html</a>
<a href="#">CSS</a>
<a href="#">JAVAScript</a>
<ul>
<li>watermelon</li>
<li>a mandarin orange</li>
<li>Grape</li>
</ul>
<div class="person">
<ul>
<li>Zhang San</li>
<li>Li Si</li>
<li>Wang Wu</li>
<ol>
<li>Steamed buns</li>
<li>rice</li>
<li>steamed stuffed bun</li>
</ol>
</ul>
</div>
</body>
</html>
7.4 sub element selector
You can only select the child element of an element. The parent element is written in front of the child element, and the child element is written in the back. Add ">" in the middle, and leave spaces on both sides of the symbol.
Nested child elements cannot be selected
<!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 type="text/css">
/* Child Selector */
ul > li{
color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>watermelon</li>
<li>a mandarin orange</li>
<li>Grape</li>
</ul>
<div class="person">
<ul>
<li>Zhang San</li>
<li>Li Si</li>
<li>Wang Wu</li>
<ol>
<li>Steamed buns</li>
<li>rice</li>
<li>steamed stuffed bun</li>
</ol>
</ul>
</div>
</body>
</html>
8 attribute selector
<style type="text/css">
/* Gets all elements in li that have the type attribute */
li[type]{
border: 1px solid gray;
}
/* Gets the element whose type attribute in li is equal to a value */
li[type="vegetable"]{
background-color: green;
}
/* Select the element whose type attribute value in li contains a word */
li[type~="hot"]{
font-size: 30px;
}
/* Gets the element whose color starts with a character in li */
li[color^="green"]{
background-color: orange;
}
/* Gets the element whose attribute value ends with a character */
li[type$='t']{
color: hotpink;
font-weight: 900;
}
/* An element whose attribute value has a certain character */
li[type*="ea"]{
font-family: "Regular script";
}
/* What field does the property value begin with */
li[price|="very"]{
background-color: darkblue;
}
</style>
9 pseudo element selector
E: : the first word or word of the first letter text
E: : first line of first line text
E::selection the selected text line
E:: before and E:: after create an element at the start and end positions inside E. this element is an inline element and must be used in combination with the content attribute and cannot be selected
<!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 type="text/css">
p::first-letter{
font-size: 20px;
color: hotpink;
}
p::first-line{
color:skyblue;
}
p::selection{
color: orange;
}
p::before{
content: "This is the beginning of the paragraph";
}
p::after{
content: "End of paragraph";
}
</style>
</head>
<body>
<p>
The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and divide it with a space in the middle. Of course, when tags are nested, inner tags are called descendants of outer tags.
The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and divide it with a space in the middle. Of course, when tags are nested, inner tags are called descendants of outer tags.
The descendant selector, also known as the include selector, is used to select the descendant of an element or element group. The writing method is to write the outer label in the front, the inner label in the back, and divide it with a space in the middle. Of course, when tags are nested, inner tags are called descendants of outer tags.
</p>
</body>
</html>
10 background
| background-color | background color |
|---|---|
| background-image | Background picture |
| background-repeat | Tile |
| background-position | Position of background |
| background-attachment | Whether the background scrolls |
<style type="text/css">
body{
/* The value can be none. No background url directly follows the path of the picture */
background-image: url(imgs/2.jpg);
/* no-repeat Do not tile repeat-x x-axis tile repeat-y-axis tile repeat default */
background-repeat: no-repeat;
/* The value can be top but left right center, or expressed in percentage or length unit */
background-position: -10% ;
/* fixed The background image fixed scroll scrolls with the scrolling of the window */
background-attachment: scroll;
height: 2000px;
background: rgba(0,0,0,0.3);
}
</style>
11 CSS three features
11.1 lamination
You can add multiple styles to a single element or label
11.2 inheritance
The child element inherits some styles of the parent element, such as text color, font size, etc
div{
color: red;
}
</style>
</head>
<body>
<div>
<p>
Zhongbei University
</p>
</div>
</body>
11.3 priority
Multiple styles act on the same element, and some styles will be overwritten
The priority is: inline style > internal style [id selector > class selector > label selector] > external style
Append after style! The important attribute, which raises the priority to make the current style the highest priority
/* Priority in line style > internal style [id selection > class selector > label selector] external style
!important You can add an attribute to the back of the style to increase the priority, which is the highest priority of the current style
*/
div {
background-color: green;
color: red;
width: 200px;
height: 200px;
}
#d{
background-color: red;
}
.c{
background-color: yellow!important;
}
</style>
</head>
<body>
<div id="d" class="c" style="background-color: blue;">
<p>
Zhongbei University
</p>
</div>
</body>
</html>
12 box model (CSS focus)
CSS three modules: box model floating positioning
Box model:
The essence of web page: put the web page elements into the box, and then use css to place the box
12.1 box border
border attribute: width style color
Each line of the border can be set separately, and the single line can also be set comprehensively, in the order of width, style and color
Border style:
- none
- Solid (solid line)
- dashed (dotted line)
- dotted (DOT)
- Double (double solid line)
div{
width: 200px;
height: 200px;
background-color: antiquewhite;
/* style */
border-top-style: dashed;
border-bottom-style: dotted;
border-left-style: solid;
border-right-style: double;
/* width */
border-top-width: 2px;
border-bottom-width: 4px;
border-left-width: 6px;
border-right-width: 8px;
/* The color can also be divided into up, down, left and right */
/* The comprehensive writing method of the top border, width style and color order cannot be disordered*/
/* The borders in other directions can also be written according to the above comprehensive writing method */
border-top: 1px solid red;
/* Comprehensive setting of styles
1 Four values
2 Values (up and down the first value and around the second value)
3 Values (above the first value, around the second value, under the third value)
4 Values are assigned clockwise from top right to bottom left*/
border-style: solid double dotted dashed;
border-width: 4px 8px 16px 32px;
border-color: red green yellow blue;
}
Merging table borders
<!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 type="text/css">
table{
width: 500px;
height: 300px;
border: 1px solid black;
/* Represents a merge border */
border-collapse: collapse;
}
td{
border: 1px solid red;
}
th{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- cellspacing Just set the distance between cells to 0 -->
<table cellspacing=0>
<thead>
<tr >
<th >Title 1 </th>
<th>Title 2 </th>
<th>Title 3 </th>
<th>Title 4 </th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
</tbody>
</table>
</body>
</html>
Rounded border
Border radius: sets the horizontal and vertical radii
When the radius is half of the border, the border becomes a circle
<!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 type="text/css">
/* When line height = height of the container, the content is centered from top to bottom */
div{
width: 200px;
height: 200px;
border: 1px solid red;
margin: 10px 40px;
/* horizontally */
text-align: center;
line-height: 200px;
}
div:first-child{
border-radius: 20px 50px;
}
div:nth-child(2){
border-radius: 20px;
}
div:nth-child(3){
border-radius: 15px 0;
}
/* When the radius is half of the border, it is a circle */
div:nth-child(4){
border-radius: 100px;
}
div:nth-child(5){
border-radius: 50%;
}
/* When the radius is the border length, it is an ellipse */
div:nth-child(6){
border-radius: 200px 0px;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>