Series of article links
1. Background knowledge and learning route
2. Basic knowledge of HTML
3. Basic knowledge of
CSS 4. Basic knowledge of JavaScript
Article directory
1. Basic concepts
1.1 CSS definition
CSS is an acronym for Cascading Style Sheets, which is used to add style and layout to HTML documents.
CSS is a style sheet language which is used along with HTML to create web pages. CSS uses selectors to locate HTML elements and uses properties and values to define the style and layout of those elements.
1.2 CSS usage
-
Style Control: CSS can be used to control the appearance and style of HTML elements such as fonts, colors, sizes, spacing, borders, and more.
-
Layout control: CSS can be used to control the position and layout of HTML elements, such as page layout, text alignment, floating, etc.
-
Responsive design: CSS can implement responsive design through media queries, and adjust the style and layout of web pages according to the size and screen size of different devices.
-
Animation effects: CSS can use animation and transition effects to realize dynamic changes and interactive effects of web page elements.
-
Reusability: CSS can define styles in an external style sheet and then reference them in multiple HTML documents to achieve reusability and maintainability of styles.
In short, CSS can make web page development more flexible, efficient, beautiful and interactive.
1.3 Examples of attributes supported by CSS
There are many attributes and values supported by CSS. The following are some of the commonly used attributes and values:
- Color properties:
- color: defines the text color.
- background-color: Defines the background color.
- Text properties:
- font-family: defines the font type.
- font-size: defines the font size.
- font-weight: defines the font weight.
- text-align: Defines the text alignment.
- text-decoration: Define text decoration.
- Box model properties:
- width: defines the width of the element.
- height: defines the height of the element.
- margin: defines the outer margin.
- padding: defines the inner margin.
- border: defines the border.
- Layout properties:
- display: Defines how the element is displayed.
- position: defines how the element is positioned.
- float: Defines how the element floats.
- clear: Clear the float.
- overflow: defines how the element overflows.
- Animation properties:
- transition: defines the transition effect of the element.
- animation: defines the animation effect of the element.
- Responsive properties:
- media queries: Adjust the style and layout of web pages according to the size and screen size of different devices.
- viewport: Defines the visible area of a web page on a mobile device.
2. Basic syntax of CSS
2.1 demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {
background-color:tan;}
h1 {
color:maroon;font-size:20pt;}
hr {
color:navy;}
p {
font-size:11pt;margin-left:15px;}
a:link {
color:green;}
a:visited {
color:yellow;}
a:hover {
color:black;}
a:active {
color:blue;}
</style>
</head>
<body>
<h1>这是标题</h1>
<hr>
<p>你可以看到这个段落是
被设定的 CSS 渲染的。</p>
<p><a href="https://www.runoob.com"
target="_blank">这是一个链接</a></p>
</body>
</html>
-
To make CSS more readable, you can only describe one property per line
-
CSS comments start with /* and end with */
<!DOCTYPE html> <html> <head> <style> /*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; } </style> </head> </html>
2.2 Selector
- id selector
- The id selector can specify a specific style for HTML elements marked with a specific id.
- HTML elements use the id attribute to set the id selector, and the id selector in CSS is defined with "#".
- class selector
- The class selector is used to describe the style of a group of elements. The class selector is different from the id selector. The class can be used in multiple elements.
- The class selector is represented by the class attribute in HTML, and in CSS, the class selector is displayed by a dot.
- Note : Numbers cannot be used as the first character of the class name! It doesn't work in Mozilla or Firefox.
2.3 CSS Creation
There are three ways to insert style sheets:
- External style sheet
- Internal style sheet
- Inline style
Multiple style priority
(inline style) Inline style > (internal style) Internal style sheet > (external style) External style sheet > browser default style
2.3.1 External Style Sheets
External style sheets are ideal when styles need to be applied to many pages. In the case of external style sheets, you can change the look of the entire site by changing one file. Each page links to a style sheet using a tag. tags in the head (of the document)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The browser will read the style declaration from the file mystyle.css and format the document according to it.
External style sheets can be edited in any text editor.
The file cannot contain any html tags.
Style sheets should be saved with a .css extension.
The following is an example of a stylesheet file:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
2.3.2 Internal Style Sheets
Internal style sheets should be used when individual documents require specific styles. you can use
<head>
<style>
hr {
color:sienna;}
p {
margin-left:20px;}
body {
background-image:url("images/back40.gif");}
</style>
</head>
2.3.3 Inline styles
Inline styles lose many of the advantages of style sheets by mixing presentation and content. Use this approach sparingly, for example when styles only need to be applied once on an element.
To use inline styles, you need to use the style (style) attribute in the relevant tags. The Style attribute can contain any CSS property. This example shows how to change the color and left margin of a paragraph:
<p style="color:sienna;margin-left:20px">
这是一个段落。
</p>
3. Summary
3.1 Summary of CSS Basic Grammar
The basic syntax of CSS consists of three parts: selectors, attributes, and values.
- Selector:
A selector is used to select one or more HTML elements to set styles for them. - Attributes and values:
CSS attributes are used to define the style of HTML elements. Commonly used CSS attributes include color, font-size, width, height, background, etc. The value of a CSS property can be a specific value, color value, word value or some other special value. - Comments:
Comments can be used in CSS to explain or mark the code. CSS comments are wrapped using /.../