What is CSS? You may be eager to know the answer. However, vague text descriptions are of little significance. Let's have a perceptual experience first. Look at this HTML file without adding CSS. It is an ordinary webpage. However, by adding CSS rules to this file, we can get a very beautiful webpage.
This is not all. without modifying the HTML, We can get webpages of different styles by adding different CSS rules. Now let's answer the question about CSS.
What is CSS?
CSS is the abbreviation of cascadingstylesheets. It defines the appearance of a webpage (such as font and color). It can also work with JavaScript and other Browser Scripting languages to make a lot of dynamic effects.
Learn the basics of CSS
You should have understood HTML or XHTML before learning CSS.
Do I need any special software to learn CSS?
No. In the same way as learning xhtml, you only need to use the notebook (notepad.exe) that comes with windows. In the future, you may need professional webpage design software, such as Dreamweaver, to add CSS to webpages. But again, you do not need these powerful software when learning CSS. This tutorial only uses notepad to practice handwriting CSS.CodeTo make it easier for readers who do not have software such as Dreamweaver.
Getting started with CSS-basic style sheet syntax (1)
Insert the webpage before and after the style sheet.
To better understand the role of a style sheet, Let's first look at a CSS application instance. In this example, you can easily compare the differences between the two web pages before and after using CSS. Of course, you may not understand the code of CSS. Don't worry, the code will be introduced in the later tutorial.
Let's take a look.Pages not added with CSS. There is only one sentence on the webpage: "the webmaster of cainiao is a dummies! Dummies love big watermelons !". In addition, because the headers are Titles 1, 2, 3, and 4, the font size of the page is also different, and there is also an automatic line feed of the title.
ItsSource codeAs follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> Content = "text/html; charset = gb2312"/> <! -- The CSS will be inserted here -->
Below we simply add a bit of CSS to it to make me no longer stupid ...... Follow the prompts below to modify the webpage code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> Content = "text/html; charset = gb2312"/><Style type = "text/CSS"> <! -- H1 {font-size: 12px;} H2, H4 {font-size: 12px; display: inline;} --> </style></Head> <body> Style = "display: none"> It's a big fool! Dummies
Let's take a lookWebpage after adding CSS. You can easily see the difference between the two web pages. The text size in the page is unified, and only one line break is behind Title 1, and some text is hidden. This is all due to the red code above. They are CSS. Let's take a rough look at the meaning of these codes.
CSS syntaxThe<Style type = "text/CSS">And</Style>It is recognized by the browser as the beginning and end of CSS. While the annotation label<! -->This prevents browsers that do not support CSS from displaying CSS content on the page as the webpage body.
The above content does not define any styles. Its task is to tell the browser where the CSS code is located. The following content is important. The following content makes a significant change in the appearance of the page, that is, the description of CSS (Definition ):
H1 {font-size: 12px;} H2, H4 {font-size: 12px; display: inline ;}...... <H3Style = "display: none"> It's a big fool! Dummies
In general, the description of CSS consists of three parts: selector, attribute, and attribute value. The statement is as follows:
Selector {property: property value ;}
For example:H1 {font-size: 12px ;}
In this example, the selector is the HTML tag you want to describe. Other selectors will be explained in the following tutorial. The selector in the above example is the H1 tag. Attribute and attribute value indicate which attribute of H1 you want to describe and the value of this attribute. For example, in the above example, the H1 font size attribute is 12 pixels and is written as font-size: 12px. The attribute and attribute values are separated by a colon ":" and ended with a semicolon ";". Do not forget to enclose it with a pair of braces.
We can also define multiple styles for a selector at the same time, separated by semicolons. You can also define a set of styles for several tags at the same time. tags are separated by commas. These two statements may be a bit confusing, but in fact the second line of code in the above example uses this feature of CSS. Statement"H2, H4 {font-size: 12px; display: inline ;}"Two styles are defined for both H2 and H4 labels. Of course, to make your CSS code easier to read and maintain, you can write these attributes by branch:
H2, H4 {font-size: 12px; display: inline ;}
Note 1: Now I will explain the last line of the above Code, in Style = "display: none">, We do not see the selector. This is because the position of the inserted CSS is different and it will directly work with the elements in the current tag. Different CSS insertion methods will be discussed in subsequent tutorials.
Note 2: The CSS writing method can be determined based on your preferences. However, the ultimate goal is very clear, which improves the efficiency of CSS code maintenance.
CSS comments
Here is an example of how to insert comments in CSS:
<Style type = "text/CSS"> <! -- H1 {font-size: 12px ;}/* Define the title size as 12 pixels */
H2, H4 {font-size: 12px; display: inline ;}
--> </Style>
In CSS, the Comment starts with "/*" and ends with "*/". The content in the comment is meaningless for the browser.
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
