Before learning CSS, you need to know something about HTML!
Learn CSS together!
- 1, CSS introduction
- 2, CSS syntax
- 3, CSS selector
- 4, CSS creation
- V CSS background
- 6, CSS text
- 7, CSS text
- 8, CSS links
- 9, CSS list
- 10, CSS table
1, CSS introduction
1. What is CSS?
CSS refers to cascading style sheets.
-
Styles define how HTML elements are displayed
-
Styles are usually stored in style sheets
-
External style sheets can greatly improve work efficiency and are usually stored in CSS files
-
Multiple style definitions can be cascaded into one
p
{
color:red;
text-align:center;
}
2, CSS syntax
1. Grammatical rules
CSS rules consist of two main parts: selectors and one or more declarations:
- Selectors are usually HTML elements that you need to change style.
- Each declaration consists of a property and a value.
2. Notes
CSS comments start with / * and end with * /. Comments are to improve the readability of the code!
/*notes*/
p
{
text-align:center;
/*notes*/
color:red;
}
3, CSS selector
If you want to use CSS styles in HTML elements, you need to use selectors in elements!
1. id selector of CSS
The id selector can specify a specific style for the HTML element marked with a specific id. the HTML element sets the id selector with the id attribute, and the id selector in CSS is defined with "#".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Small orange front end tutorial!</title>
<style>
#p1 {
color: red;
}
</style>
</head>
<body>
<p id="p1">adopt id The selector sets this paragraph of text to red!</p>
<p>This paragraph is not affected by the above!</p>
</body>
</html>
2. class selector of CSS
Class selector is used to describe the style of a group of elements. Class selector is different from id selector. Class can be used in multiple elements. Class selector is represented by class attribute in HTML, and class selector is displayed by a dot "." in CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Small orange front-end tutorial!</title>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">Title centered</h1>
<p class="center">Paragraph Center</p>
</body>
</html>
You can also specify a specific HTML element to use class.
p.center {text-align:center;}
4, CSS creation
The browser will format the HTML document according to the style sheet! There are three ways to insert a style sheet:
1. External style sheet
When styles need to be applied to many interfaces, external style sheets are usually used. The advantage of using external style sheets is that the style layout of the entire HTML document can be changed by changing a file, and each page uses <link> tags to link to the style sheet< Link> the tag is at the head of the document.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <!--rel Attribute is required to specify the current document and the linked document/The relationship between resources.--> </head>
2. Internal style sheet
When a single document requires special styles, internal style sheets should be used. Use the <style> tag to define an internal style sheet at the head of the document.
<style>
hr {
color: sienna;
}
p {
color: red;
}
body {
background-color: aqua;
}
</style>
3. Inline style
Inline style can be used when the style only needs to be applied to the element once, but because inline style mixes performance and content, it is not recommended!
<p style="color:red">Inline style is not recommended!</p>
4. Multiple styles
If some attributes are defined by the same selector in different style sheets, the attribute values will be inherited from the more specific style sheets.
There is a duplicate part in the internal style sheet and the external style sheet. The internal style sheet will replace the part in the external style sheet!
External style sheet:
h3
{
color:red;
font-size:12px;
}
Internal style sheet:
h3
{
font-size:20pt;
}
Final effect:
h3
{
color:red;
font-size:20px;
}
The color attribute is inherited from the external style sheet, and the font size attribute will replace the part in the external style sheet.
5. Priority of multiple styles
Style sheets allow you to specify style information in a variety of ways. Styles can be specified in a single HTML element, in the header element of an HTML page, or in an external CSS file. You can even reference multiple external style sheets within the same HTML document.
Priority: (inline style) inline style > (internal style) internal style sheet > (external style) external style sheet > browser default style
V CSS background
The CSS background attribute is used to define the background of HTML elements. CSS background has the following effects:
1. Background color
The background color attribute defines the background color of the element, which is used in the body selector!
body {background-color:grey;}
Colors in CSS are usually defined in the following three ways:
- Hexadecimal - for example: "\ff0000"
- RGB - for example: "rgb(255,0,0)"
- Color name - e.g. "red"
2. Background image
The background image attribute describes the background image of the element. By default, the background image is tiled and repeated to cover the entire element entity.
background-image: url('images/1.jpg');<!--HTML The document and picture files are not under the same folder. Use relative paths-->
3. Background image - horizontal or vertical tiling
The background image attribute is tiled horizontally or vertically on the page by default. However, sometimes the picture cannot be tiled horizontally and vertically to achieve the desired effect. You can choose to tile only in one direction.
4. Background image - set positioning and non tiling
In order to make the background image not affect the layout of the text, you can use the background repeat attribute to make the image not tiled, so as to achieve the desired effect!
At the same time, you can set the display position of the picture through the background position attribute, so that the text can achieve the best display effect!
body
{
background-image:url('images/pai.jpg');
background-repeat:no-repeat;
background-position:right top;/*Set the starting position of the background image.*/
}
5. Background - abbreviation attribute
In order to simplify the code of page background attributes, these attributes can be combined in the same attribute. The abbreviated attribute of the background color is "background".
body {background:grey url('images/pai.jpg') no-repeat right top;}
6, CSS text
1. Text color
The color attribute is used to set the color of text.
body {color:red;}
2. Text alignment
The text arrangement attribute is used to set the horizontal alignment of text.
The horizontal arrangement of text is centered, aligned to the left, aligned to the right, and aligned at both ends.
h1 {text-align:center;}
p {text-align:justify;/*Align both ends*/}
3. Text decoration
The text decoration property is used to set or delete the decoration of text.
a {text-decoration:none;/*Underline used to delete links*/}
At the same time, you can also use the text decoration attribute to enhance the reading effect of the article.
<style>
h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}
</style>
4. Text conversion
Text conversion attributes are used to specify upper and lower case letters in a text. It can be used to change all words into upper or lower case letters, or capitalize the first letter of each word.
<style>
p.uppercase {text-transform:uppercase;}/*Capitalize*/
p.lowercase {text-transform:lowercase;}/*a lowercase letter*/
p.capitalize {text-transform:capitalize;}/*title case*/
</style>
5. Text indentation
The text indentation attribute is used to specify the indentation of the first line of text.
p {text-indent:14px;}
7, CSS text
CSS font attributes define font, bold, size, and text style.
1.CSS font type
In CSS, there are two types of font family names:
- Generic font family - a combination of font systems with similar appearance (such as "Serif" or "Monospace")
- Specific font family - a specific font family (such as "Times" or "Courier")
General font family
explain
Exhibition
Serif
The characters in Serif font have additional decoration at the end of the line
Sans-serif
The characters in the font have no additional decoration at the end of the line
Monospace
All equal width characters have the same width
2. Font series
The font family property sets the font family of the text.
Font Family attribute should set several font names as a "backup" mechanism. If the browser does not support the first font, it will try the next font. If the name of the Font Family is more than one word, it must use quotation marks, such as Font Family: "Arial".
3. Font style
We can set normal or italic font style!
p.normal {font-style:normal;}
p.italic {font-style:italic;}
4. Font size
Font size property sets the size of the text.
The value of font size can be absolute or relative.
Absolute size:
- Set a specified size of text
- Users are not allowed to change the text size in all browsers
- Absolute size is useful when determining the physical size of the output
Relative size:
- Set the size relative to the surrounding elements
- Allow users to change text size in the browser
4.1 set the font size pixels
In order to control the font size, you can set the font size pixels.
p {font-size:14px;}
You can adjust the font size by scaling the browser, but the actual adjustment is the size of the page.
4.2 use em to set font size
1em is equal to the current font size. The default text size in the browser is 16px. Therefore, the default size of 1em is 16px. Pixels can be converted into em=px/16=em by the following formula.
p {font-size:0.875em;} /* 14px/16=0.875em */
4.3 use percentage and EM combination
In all browser solutions, the default font size for elements is set as a percentage.
body {font-size:100%;}
p {font-size:0.875em;}
In all browsers, the same text size can be displayed, and all browsers are allowed to scale the size of the text.
8, CSS links
1. Link style
Different links can have different styles, and different states of links can also have different styles.
Four states of links:
- a:link - normal, not visited link
- a:visited - links the user has visited
- a:hover - when the user mouse over the link
- a:active - the moment the link is clicked
a:link {color:black;} /* Link not visited*/
a:visited {color:greenyellow;} /* Visited link */
a:hover {color:red;} /* Move the mouse over the link */
a:active {color:blue;} /* When the mouse clicks */
a: Hover must follow a:link and a:visited, and a:active must follow a:hover.
2. Text decoration
The text decoration property is mainly used to delete underscores in links:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
3. Background color
The background color attribute specifies the link background color:
a:link {background-color:#B2FF99;} /* Link not visited*/
a:visited {background-color:#FFFF85;} /* Visited link*/
a:hover {background-color:#FF704D;} /* Move the mouse over the link*/
a:active {background-color:#FF704D;} /* When the mouse clicks*/
9, CSS list
Different list item tags can be used in CSS to implement lists.
1. Unordered list and ordered list
The list style type attribute specifies the type of list item tag.
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: decimal;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
2. List marked as image
<style>
ul {
list-style-image: url('images/1.png');
}
</style>
3. List attribute value abbreviation
All list attributes can be specified in a single attribute, but they must be specified in a certain order!
For example, specify list attributes in the following order:
- list-style-type
- list-style-position
- list-style-image
ul
{
list-style:square url("images/3.png");
}
list-style-type: none; Set the list type to no list item tag!
10, CSS table
1. Table border
Use the border attribute to specify the border of the CSS table.
2. Fold the border
The border collapse property sets whether the border of the table is folded into a single border or separated.
3. Table width and height
The Width and height attributes define the Width and height of the table.
4. Table text alignment
horizontal alignment:
<style>
table, td, th
{
border:1px solid blue;
padding:10px;
width:25%;
text-align:left;
}
th
{
background-color:grey;
color:white;
height:30px;
}
</style>
Vertical alignment:
td
{
height:50px;
vertical-align:bottom;
}
The text alignment in the table is divided into horizontal alignment and vertical alignment:
- The text align property sets the horizontal alignment, left, right, or center.
- The vertical align property sets the vertical alignment, top, bottom, or center.
5. Table filling
The padding attribute of td and th elements can control the spacing between the border and the table content.
td
{
padding:15px;
}
6. Table color
We can specify the color of table border, text color and background color.
<style>
table, td, th
{
border:1px solid blue;
}
th
{
background-color:grey;
color:white;
}
</style>
come on.