Basic knowledge of CSS
A brief introduction to CSS
Css is called Cascading Style Sheet in Chinese, which is a computer language used to represent file styles such as html or xml
There is a div tag in HTML, which is a tag that provides structure and background for large blocks of content in the html document
We can simply understand the role of Css as:
Div is a container for storing content (text, pictures, elements);
Css is used to specify how to display the content placed in the div, including the position and appearance of these contents
CSS inheritance
There is inheritance in java, and there is also an inheritance relationship in Css, but inheritance in Css is not all inheritance, but a part of the attributes. Inheritance is a rule that allows styles to be applied not only to a particular HTML tag element, but also to its descendants.
CSS specificity
Sometimes we set different CSS style codes for the same element, so which CSS style will the element enable? The browser also solves this problem, which is to judge which style to choose according to the weight, and which css style is used if the weight is high.
The label has a weight of 1, the class selector has a weight of 10, and the ID selector has a weight of up to 100.
Importance of CSS
When we are doing web page code, there are some special cases where we need to set the highest weight for certain styles, what should we do?
At this time we can use !important to solve it.
The following code:
p{color:red!important;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>At this time, the text in the p paragraph will display red red.
Note: !important should be written before the semicolon. Note here that when the web page maker does not set the css style, the browser will display the web page according to its own set of styles. And users can also set their own custom styles in the browser. For example, some users are used to setting the font size to be larger, so that they can view the text of the web page more clearly.
At this time, note that the style priority is: the default style of the browser < the style of the webpage maker < the style set by the user, but remember that the !important priority style is an exception, and the weight is higher than the style set by the user.
How to import CSS style sheets
1. Inline style/inline style (inside the HTML element) Inline style, different attribute values of the same attribute are separated by semicolons.
<font style="font-size:80px; color:red;">北京欢迎你</font>2. Embedded/internal style sheet (located inside the tag) Write the control style under the title in the head
<head> <styletype="text/css"> body { background-color: red } </style> </head>3. Externally write a css file externally, and define the resource reference address of the file through the link tag in the head
Weighting problem: !important > inline (inter) style > embedded style > external style.
<head> <link rel="stylesheet"type="text/css" href="index.css"> </head>