Introduction to CSS for Beef Brisket_html/css_WEB-ITnose

Before contacting CSS, we used Html to write web pages like this:

<span style="font-size:18px;">   <title>CSS测试</title>   <center>                                    <!--内容居中显示  -->   <font size="20px" color="red">             <!--设置字体的大小和颜色  -->       <strong>                                <!--字体加粗  -->           <u>                                 <!--加下划线  -->                HTML是一种标记语言             <!--主体内容 -->           </u>       </strong>   </font>   </center></span>

The running results are as follows:

The webpage written in this way has almost no flexibility. If we want to change the display effect of the webpage, then we have to find the corresponding place in the webpage source code and modify it. If there are thousands of such web pages, should we just modify them one by one? NO!

The traditional writing method writes the content and style together. In our common saying, it is written to death, and the maintainability is really poor. We should find a way to separate the text content from the definition of its display effect. This is when CSS comes. Its biggest feature is to separate the content and style of the Web page, so that the page display effect can be flexibly modified. This is similar to what we have done before. Contacted the configuration file config. How to do it specifically? Look down

First, add a style sheet, as shown below

Then write the following code in StyleSheet1.css:

<span style="font-size:18px;">body {    font-size :40px;                /*设置字体大小*/    color :blue ;                   /*设置字体颜色*/    text-decoration :underline ;    /*设置字体加下划线*/    font-weight :bold ;             /*设置字体加粗*/    text-align :center ;            /*设置字体居中显示*/}</span>

We then modify the code in the html file:

The running results are as follows:

This is the so-called CSS technology, which controls the display effect of the page by setting the style of the web page in the style sheet. , so that if we want to change the display effect, we only need to make corresponding modifications in the style sheet, which is particularly flexible and convenient. When it comes to CSS, we have to talk about CSS selectors. According to the video explanation, there are roughly three types: class selectors, ID selectors and HTML tag selectors.

The definition of class selector and ID selector is as shown below:

The last HTML tag selector, if you look carefully After reading this article, you must know how to use it, because when giving the CSS example above, the author used the HTML tag selector, that is, body{ }, and wrote the specific style setting code within the curly brackets. The use of various CSS selectors will be introduced in detail in subsequent blog posts, so I won’t go into details here. This article mainly tells you what CSS is and gives you an intuitive and vivid explanation.