Original tutorial, reproduced please indicate the source: Web Teaching Network
CSS is the abbreviation of "cascading style Sheets", Chinese translation is "threaded style sheet", and some people translate it as "style sheet". CSS used as a Web page layout and style design, in the Web Standard station, the CSS familiarity and use is a very important content. The role of CSS is to make up for the lack of HTML, so that the design of the Web page more flexible.
This article simply introduces you to the basics of CSS, and guides you through a basic tutorial on how to contribute to Web standards.
Speaking of my own experience, a lot of people are now promoting web standards, in fact, for beginners, do not need to learn when the standard, learn some simple or easy to get started, because now HTML still use Ah, so I hope beginners learn not to follow the standard, when you get started, when you do the Web page, Find it difficult to use the table when you should go to find a simple way, and then it is not too late Ah, if you like the new technology then you start school standard bar, according to the actual individual to act. Let's start learning.
One, how to apply CSS in HTML.
You can add a CSS-specified format to HTML in the following 3 ways:
1. Add a hyperlink to the HTML file to connect to the external CSS document. (external link CSS)
This method is most convenient to manage the Web page style of the entire website, it lets the page text content and the layout design separate. You just need to be in a CSS document (with the extension. CSS) to define the style of the Web page, and then add a hyperlink to the page to connect to the document, then your page will be in the CSS document defined in the style displayed.
The specific use of prevention is:
<HTML>
<HEAD>
<TITLE> title of Web page file </TITLE>
<link rel= "stylesheet" href= "Style.css" type= "Text/css" >
</HEAD>
Note: The location of the Style.css file.
2. In the HTML file between the <HEAD>.......</HEAD> tags, add a section of CSS description content. (CSS defined inside)
This method is useful for specifying a Web page, in addition to the style defined by the external CSS document, while also expressing the CSS specified in the HTML document itself.
If the CSS description added internally is in conflict with the CSS description of the external connection, the performance of the Web page will be based on a built-in CSS description, i.e. the external description will no longer work.
The specific use method is:
<HTML>
<HEAD>
<TITLE> Page Title </TITLE>
<style type= "Text/css" >
<!--
Body {font:12pt}
H1 {font:16pt}
P {font-weight:bold;
Color:green}
-->
</STYLE>
</HEAD>
<BODY>
Web page content ...
</BODY>
</HTML>
It is worth noting that in order to prevent browsers that do not support CSS to mistake the CSS style description between tags as a common string, but on the Web page, you'd better insert CSS narrative text between the <!--and-->.
3. In the text content of the HTML file, at any time need to add a small section of CSS description of the specified style. (Text between CSS)
This method applies to the rendering style of a small piece of text within a specified page.
External CSS and internal definition of CSS if and this definition has the same item, then the CSS style of this definition, the external CSS document and the definition of CSS and the definition of the same item is not the same as the normal display, but also display the text content between the CSS style.
The specific use method is:
<HTML>
<HEAD>
<TITLE> Page Title </TITLE>
</HEAD>
<BODY>
<p style= "color:red" >
The content of this page ...
</P>
</BODY>
</HTML>
The above 3 kinds of CSS, can be used at the same time, you can choose your good, single or dual use. If the narrative between the CSS conflict, then the inherent definition of CSS will cover the external link of the CSS, the text between the CSS will overwrite the inherent definition of CSS.
Second, the picker, the attribute and the value.
First, for example: h3{Color:blue} indicates that only the text with H3 labels in the text is green in color. Where H3 is the picker, color is the property, and blue is the value of the Color property. The selector is a form-style component, usually a name for an external CSS or a style defined within the CSS definition, and is understood as a label name in this beginner's tutorial. Attributes are the attributes of the picker, equivalent to the label attribute in the HTML syntax. The value is the specific content of the attribute.
In CSS when we use a property value, the usual value has a metric, which means that the value has a unit. For example, what do we usually say when you go from home to school 1,1? m, km, or walk for 1 hours. Usually in the CSS units are: relative units and absolute units of two units specific as follows:
"Em" (such as FONT-SIZE:2EM): the proportional factor relative to the letter height.
"%" (for example, font-size:80%): an example of a percentage relative to the length unit (usually the size of the current font).
' px ' (for example, font-size:12px): Pixel (System preset unit).
' PT ' (e.g. font-size:12pt): like Dot.
There are also ' PC ' (print type units), ' cm ' (cm), ' mm ' (mm) and ' in ' (inch) units.
When the value is 0 o'clock, we do not need to set the unit, for example you do not want to have a border then we directly set border=0.
I'll say one more thing here, is to emphasize the use of units, when I made the Web page I want to change the resolution, font size changes then we use the unit% and EM, if you want your Web page regardless of how the resolution is fixed size so we use PX, PT and other elements. Oh!
Third, the color setting and use.
CSS provides 16,777,216 colors that we can use, usually showing colors in three different ways: color names, RGB (Red/green/blue) values, and hexadecimal numbers, as shown below:
Red can be expressed as: red, RGB (255,0,0), RGB (100%,0%,0%), #ff0000, and #f00 five ways.
#RRGGBB: The values of red, green, and blue Primary colors of 0 to 2,550 values, respectively, are represented by a value of three 00 to FF 16.
#RGB: abbreviated notation, using only three 0 to F 16 carry value, respectively, for red, green, blue three primary colors. In fact, the browser automatically expands to six-16-digit values, such as "#ABC" will change to "#AABBCC". However, it is not obvious that such a notation is accurate.
RGB (R,G,B): color is represented by the values of red, green, and blue primaries of 0 to 2,550 decimal colors.
RGB (r%,g%,b%): a color, such as RGB (60%,100%,75%), that is relative to each other in red, green, and blue.
Color_name: Color is directly represented by the color name, there are 141 kinds of standard color names.
Usually when we set the color, we usually set the color of the text and one of the background colors. If you set the following figure:
We can save the text and browse and you can see the effect.
Iv. setting of text.
We can use a variety of properties to change the size and shape of the page text so that the content of the page text looks more beautiful.
font-family: Set text font can take Family-name value, example: SPAN {family-name: "italics"} or Example: <span style= "family-name: Italics" >.
Font-style: Set font style, you can take the value of the normal word, italic italic; Example: SPAN {font-style:italic}.
Font-weight: Set the font weight, you can take the value of the normal word, bold bold text, bolder relative to the parent element slightly thicker, lighter relative to the parent element slightly finer, 100,200,300,400,500,600,700,800,900 Numbers from small to large represent strokes from thin to coarse, for example: normal=400 bold=700; Example: SPAN {Font-weight:bolder}.
Font-size: Sets the text size.
Text-decoration: Set text decoration, may be the value of none ordinary words, underline text and the bottom line, overline text plus the top line, line-through text plus delete line, blink set text flashing; Example: SPAN {text- Decoration:blink}
Text-transform: Set text conversion; Possible values have none common word, capitalize converts one letter of English word to uppercase, uppercase converts all text to uppercase, lowercase converts all text to lowercase; Example: SPAN {t Ext-transform:uppercase}.
Five, edge and block settings.
MARGIN: Edge, although it is a transparent part, but can be adjusted by the edge width to achieve the purpose of the content element position adjustment. PADDING: Filler, which is the distance and space between the content element and the frame, can also be used to control the size of the CSS commands.
Change the code as shown:
Their properties are: Margin-top (top edge width), margin-right (right edge width), margin-bottom (bottom edge width), Margin-left (left edge width), padding-top (upper padding width), Padding-right (right filler width), padding-bottom (padding width below) and padding-left (left padding width).
Here is a diagram to show you:
Take a look at the map to understand the point of it! Now let's start with the border.
six, the border border nature set.Borders can also be applied to most of the HTML tags, you can make the page more beautiful, the specific properties of the border has Border-top: integrated set up the border nature, Border-right: Integrated set the right side of the box nature, Border-bottom: Integrated set down the nature of the border, Border-left: Set the nature of the left box.
Border-style integrated set border style, possible values: solid (solid line), dotted (dashed), dashed (short line), double (double straight line), Groove (3d Groove), Ridge (3d convex line), inset (3d embedded) and O Utset (3d Uplift).
Border-width set the width of the border, you can set the Border-top-width (set the width of the top border), Border-right-width (set the width of the right side), Border-bottom-width (set the bottom border width) and Border-left-width (set left border width).
Border-color set the border color synthetically.
Add the following code to your Web page to see the effect:
This article is introduced here, because it is a beginner's introductory course, so the content appears to be pitiful. Later will introduce some of the more advanced content, I hope you support me Ah!
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
