CSS learning notes 01 CSS introduction and css learning notes 01 Introduction
1. CSS Definition
CSS refers to a Cascading Style Sheet. It is a Style sheet language used to describe the rendering of HTML or XML (including XML branch languages such as SVG and XHTML) documents. CSS describes how elements on the screen, paper, audio, and other media are rendered.
2. why CSS?A webpage consists of HTML tags. These tags are typeset and rendered based on the browser's default method. to change these default styles, we recommend that you use CSS, this not only achieves the separation of content and performance, but also makes it easier to maintain.
3. CSS syntaxCSS syntax consists of two main parts: Selector and one or more declarations.
selector {declaration1; declaration2; ... declarationN }
Each statement consists of an attribute and a value.
selector {property: value}
In the following example, h1 is the selector, color and font-size are attributes, and red and 14px are values.
h1 {color:red; font-size:14px;}
This image represents the structure of the above Code
CSS is not sensitive to space and case. That is to say, it can be case sensitive. Whether it contains spaces does not affect the effect of CSS in the browser.
/* The attribute is size, the value is lower case, and there are multiple spaces after the colon */. box {COLOR: blue;}/* Recommended format */. box {color: blue ;}
The two methods above show the same effect in the browser.
4. CSS commentsLike HTML, CSS also has annotations.
4.1 single line comment/* This is a comment indicating a single line */
NOTE: Annotations cannot be nested. For example, the following statements are incorrect.
/* This indicates */single line comment * // * This indicates single line comment /**/*/4.2 multi-line comment
/** This is a multi-line comment * Comment content 1 * Comment content 2 */5. Introduction Method 5.1, intra-row
The Inline style is to set the CSS style in the style attribute of the label.
<div style="..."></div>5.2 embedded
Embedded is the
<Head> <meta charset = "UTF-8"> <title> embedded </title>... <style type = "text/css">... write CSS styles here </style> 5.3. External ConnectionWrite the CSS style in a separate file, and then introduce the CSS style file through the link tag.
<Head> <meta charset = "UTF-8"> <title> external </title>... <link rel = "stylesheet" href = "outer.css"/>Type attribute: only one option, "text/css", specifies that the current file is a css text file.
5.4. Pilot type (not recommended)
Rel: specifies that the relationship between the current HTML file and the CSS file is a style sheet.
Href: Specify the path of the external style table.Write the CSS style in an independent file, and then use the @ import tag to introduce the CSS style file.
<Head> <meta charset = "UTF-8"> <title> pilot </title> <style type = "text/css"> @ import url (css/outer.css ); /* Other css styles */</style>Note: the writing of imported styles must be completed before all css rules are written. Otherwise, the imported external styles are similar to those linked to external styles, which is equivalent to being used directly in files, this will occupy the space of html files, so this method is not recommended, and some browsers will finally load the imported style, resulting in no style at the beginning of the web page, the style will not be imported until the loading is complete. The user experience is poor.
Another purpose of importing external style sheets is to put the style sheets to be referenced in one file if a file needs to reference many external style sheets, then, you only need to reference one file, as shown in figure
The content of import.css is as follows:
@ Import into a.css"
@ Import export B .css"
@ Import export c.css"In addition to the above four imported styles, we need to know that all labels have a default style, which is called Browser style or default style. That is, without adding any style, the HTML Tag is displayed in the browser.
6. Suggestions and notesSome Suggestions
Style application sequence
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
