I learned CSS by the way to build a website these days. It is not very professional to learn CSS, but mainly to better improve these interfaces, I wrote this blog to help you learn and create websites with ease.
CSS features: separates the content and style of a webpage. This is a very advantageous feature of CSS, saving us a lot of trouble. Let's take a simple example to see the effect:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.2cto.com <! --
Created by: Chen Zongyi
-->
<Html xmlns = "www.2cto.com">
<Head>
<Title> CSS test </title>
</Head>
<Body>
<Font color = "# 0000ff"> Topic 1 </font>
<Font color = "# 0000ff"> Column 2 </font>
<Font color = "# 0000ff"> column 3 </font>
</Body>
</Html>
Before CSS is available, if we change the color to another color, we can only change the color values one by one. This workload is terrible.
Then we will use CSS for optimization. We will first use the CSS selector:
Class selector: This is a value set for finding classes in HTML.
We use the span tag + class flag. We change the content in the body to the following:
<Body>
<Span class = "menu"> Topic 1 </span>
<Span class = "menu"> Column 2 </span>
<Span class = "menu"> column 3 </span>
</Body>
Then we will create our style file:
. Menu {/* topic style */
Color: # f00;/* text color */
}
In this case, we have completed the previous color settings. To change the color, you only need to open the Style File and change it. This avoids a lot of trouble. Then we can associate the Style File with this content. It's very easy. We just need to pull it in and pull it to this place:
<Head>
<Title> CSS test file </title>
<Link href = "css/StyleSheet1.css" rel = "stylesheet" type = "text/css"/>
</Head>
This produces an association. A style contains an attribute, a colon, and a property value. When we do not know any attribute values, we press a space and VS will list all attribute values so that we can select the expected attribute values.
Author: jlins_you
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
