CSS (cascading stylesheets) is a new technology used to create web pages. It is now supported by most browsers and has become an indispensable tool for Web page design.
W3C (the World Wide Web Consortium) divides Dynamic HTML (Dynamic HTML) into three parts for implementation: script language (including JavaScript, VBScript, etc) browsers that support dynamic effects (including Internet Explorer and Netscape Navigator) and CSS style sheets.
I. Features of stacked Style Sheets
Not to mention the lack of dynamic web pages in the past, that is, there are also many difficulties in the layout of webpage content. If it is not a professional or especially patient person, it is difficult for a webpage to display information based on its own ideas and ideas. Even those who have mastered the essence of the HTML language can control the formatting of such information through multiple tests. The process is very long and painful. For the development of the Internet, more people can step into this colorful world as soon as possible, and the new HTML auxiliary tools are coming soon.
A style sheet is born under such a demand. The first thing it needs to do is to precisely locate the elements on the webpage, so that the webpage designer can be like a director, it is easy to control actors composed of texts and images and perform well on the webpage as required by the script.
Secondly, it separates the content structure and format control on the webpage. The viewer wants to view the content structure on the webpage. In order to make the viewer better see the information, it is necessary to use format control to help. In the past, the distribution of the two on the web page was staggered and it was inconvenient to view and modify. Now, separating the two will greatly facilitate the web page designers. The content structure and format control are separated so that the webpage can be composed of content, and the format control of all webpages points to a CSS style sheet file. In this way, the performance is shown in two aspects:
First, simplified the webpage formatCodeThe external style sheets will be saved in the cache by the browser, accelerating the download and display speed, it also reduces the number of codes to be uploaded (because the format set repeatedly will be saved only once ).
Second, you only need to modify and save the CSS style sheet file in the website format to change the style and features of the entire site. This is especially useful when you modify a large number of websites. The modification of one web page is avoided, greatly reducing the workload of repetitive work. When you are faced with hundreds of web pages, CSS is like a gift from God! Pai_^
2. How to add a stacked style sheet
There are four ways to add a style sheet to a webpage.
1. The simplest method is to directly add it to the HTML Tag:
<Tag style = "properties"> webpage content </Tag>
For example:
<P style = "color: Blue; font-size: 10pt"> CSS instance </P>
Code Description:
Display the "CSS instance" with a font size of 10 pt in blue ". Although it is easy to use and intuitive to display, this method is not very commonly used, because the addition of this method cannot take full advantage of the advantages of the style sheet "content structure and format control are saved separately ".
2. Add it to the HTML header information identifier
<Head>
<Style type = "text/CSS">
<! --
Style sheet content
-->
</Style>
</Head>
Type = "text/CSS" indicates that the style sheet uses the MIME type. This helps CSS browsers that do not support CSS Filter out CSS code, so that CSS code is not directly stored in front of the browser.Source codeDisplay the style sheet we set. However, to ensure that the above conditions do not occur, it is necessary to add the annotation identifier "<! -- Comment content --> ".
3. Link style sheet
It is also added to the HTML header information identifier
<Head>
<LINK rel = "stylesheet" href = "*. CSS" type = "text/CSS" Media = "screen">
</Head>
*. CSS is a separately saved style table file, which cannot contain <style> identifiers and can only be suffixed with CSS.
Media is an optional attribute, indicating the media output that will be used by a webpage using a style sheet. Value range:
· Screen (default): output to computer screen
· Print: output to printer
· TV: output to TV
· Projection: output to the projector
· Aural: output to speaker
· Braille: output to a convex-text Tactile Sensing Device
· TTY: output to the telex typewriter
· All: output to all devices above
To output data to multiple media sets, use commas to separate the value tables.
The rel attribute indicates how the style sheet will be combined with HTML documents. Value range:
· Stylesheet: Specifies an external style sheet.
· Alternate stylesheet: Specifies to use an interactive style sheet.
4. Joint Use Of Style Sheets
It is also added to the HTML header information identifier
<Head>
<Style type = "text/CSS">
<! --
@ Import "*. CSS"
Declaration of other style sheets
-->
</Style>
</Head>
The join style table input method starting with @ import is similar to that of the link style table, but the join style table input method is more advantageous. The combination method allows you to make style rules that are not required by other webpages based on the specific situation of the webpage while linking the external style sheet.
Note that:
· The Union input style sheet must start with @ import.
· If multiple style sheets are entered at the same time, the webpage will be typeset according to the first style sheet.
· If the entered style sheet conflicts with the style rules on the webpage, use an external style sheet.
Iii. Format of stacked Style Sheets
In general, the declaration of a style sheet is divided into selector and block {} (Block). The block contains properties and value. The basic format is as follows:
Selector {property: Value}
Other formats 1:
1, 2, 3 {attribute 1: value 1; 2: Value 2; 3: Value 3}
Sometimes multiple delimiters use the same settings. to simplify the code, we can set styles for them at one time and separate them with commas.
When multiple attributes exist, they must be separated.
Other formats 2:
Selector 1 selector 2 {attribute 1: value 1; Attribute 2: Value 2; Attribute 3: Value 3}
It is very similar to format 1. It only adds "," to the selection operator, but the function is very different. It indicates that the Set style rule takes effect only when both the content in character 2 is included in character 1.
Iv. Classification of stacked Style Sheets
In order to make the webpage format not monotonous, the same selector must be able to be classified and different style designs can be performed according to different categories. The basic format is as follows:
Selector. category name {attribute: Value}
CATEGORY names can be referenced in HTML identifiers:
<Identifier class = category Name> webpage content
5. Pseudo-classes of stacked Style Sheets
In addition to the preceding classification methods, a pseudo-class concept is introduced to make the classification more flexible and diverse. What is the difference between a class and a pseudo class?
Generally, the selector can be set in the form of a bundle for multiple classes. Although multiple styles can be created for the same selector, however, the bundled form also limits the set class to be used by other selector. Pseudo classes are generated to solve this problem. Each Pre-declared pseudo class can be referenced by all HTML identifiers, except for some block-level content settings. The basic format is as follows:
. Pseudo class name {attribute: Value}
Pseudo classes can be referenced by any identifier in HTML.
<Identifier class = pseudo Class Name> webpage content
6. Control the Font Style
The control font style consists of four parts: Control font type, font size, font style, and font width.
1. font type
When using word processing software such as word, you often need to adjust the font display. For example, fonts such as "Arial", "impact", and "verdana" are mostly used by the author.
The basic format is as follows:
Font-family: font name
If multiple font names are added to the font-family, the browser searches for installed fonts in the user's computer one by one based on the font name order, once a font matches the requirement, the webpage content is displayed in the font and the search is stopped. If the Font does not match, the search continues until it is found, if all fonts in the style sheet are not installed, the browser will use its default font to display the webpage content.
Note:
· Use commas (,) to separate multiple font names.
· When the font name contains more than two separate words, use "" to enclose the font name.
· If "" exists outside the style rule, use ''instead of" ".
2. font size
The basic format is as follows:
Font-size: font size parameter
Font size value range:
· Point: applicable to all browsers and operating platforms
· In EM: the size of the letter element, which is the same distance as the point
· Pixel as the unit: pixels can be used on all operating platforms, but the display effect may vary depending on the browser's screen resolution.
· In (INCHES)
· In cm (cm)
· In mm (mm)
· Unit: PC (Printer Font size)
· In the unit of Ex (X-height)
· Smaller: smaller than the default size of the current text.
· Larger: smaller than the default size of the current text.
· Proportional Relationship
· XX-small
· X-small
· Small
· Medium
· Large
· X-large
· XX-large
3. Font Style
The font style can only control the display of various italics.
The basic format is as follows:
Font-style: name of Italic
4. Font width
The font width controls the display of bold characters. The value ranges from 100 ~ 900. The default font width of the browser is 400. In addition, the lighter and bolder parameters can be used to make the font appear finer or thicker on the original basis.
The basic format is as follows:
Font-weight: font width
7. Control text styles
Controls the text style, including the text case and text modifier.
1. Text case sensitivity
The text case makes it unnecessary for the webpage designer to complete the text case when entering the text. However, after the text is input, you can set the text case as needed.
The basic format is as follows:
Text-transform: Parameter
Value range:
· Uppercase: all text is displayed in uppercase.
· Lowercase: lowercase display of all text
· Capitalize: uppercase letters and headers of each word are displayed.
· None: do not inherit the text deformation parameter of the parent.
Note: Inheritance refers to the inheritance of HTML identifiers for parameters containing their own identifiers.
2. Text Modifier
The main purpose of text modifier is to change the underline when the browser displays text links.
The basic format is as follows:
Text-Decoration: Parameter
Value range:
· Underline: underline the text
· Overline: overline the text.
· Line-through: adds strikethrough to text.
· Blink: Flashing Text
· None: no effect is displayed.
8. Control text styles
Controls text styles, including word distance, letter distance, text line spacing, horizontal text alignment, and vertical text indent.
1. Word spacing
Word spacing refers to the distance between each word in English, excluding Chinese characters.
The basic format is as follows:
Word-Spacing: interval
Values of the interval: points, em, pixes, In, CM, mm, PC, ex, and normal.
2. letter spacing
Letter spacing refers to the distance, function, usage, and parameter settings between English letters and words.
The basic format is as follows:
Letter-Spacing: letter spacing
3. Line spacing
Line spacing refers to the vertical distance between the upper and lower line baselines. Generally, the English five-line exercise book is the baseline of the row that the computer considers as the third horizontal line from top to bottom.
The basic format is as follows:
Line-Height: line spacing
Line spacing value:
· Number without unit: 1 as the base, equivalent to 100% of the proportional relationship
· Number with length unit: Subject to the specific unit
· Proportional Relationship
Note: If the text font is large and the line spacing is relatively small, the upper and lower lines may overlap with each other.
4. Horizontal text alignment
Horizontal text alignment can control horizontal text alignment, not only for text content, but also for setting the alignment of images and images.
The basic format is as follows:
Text-align: Parameter
Parameter values:
· Left: Left alignment
· Right: Right-aligned
· Center: center alignment
· Justify: relatively left-right alignment
Note that text-Alight is a block-Level Attribute and can only be used for <p>, <blockquqte>, <ul>,
5. Vertical text alignment
The vertical alignment of text should be relative to the position of the text parent, not the vertical alignment of text in the webpage. For example, if a table cell contains a piece of text, setting vertical center for the text is measured for cells. That is to say, the text is displayed in the middle of the cell, rather than the center of the entire webpage.
The basic format is as follows:
Vertical-align: Parameter
Parameter values:
· Top: Top alignment
· Bottom: Bottom alignment
· Text-top: Align to the top of the text
· Text-bottom: Align to the bottom of the text
· Baseline: Baseline alignment
· Middle: center alignment
· Sub: displays the following objects.
· Super: The above mark is displayed.
6. Text indent
Text indent allows the text to be displayed in a region with a narrow default value. It is mainly used for the first line indent of the Chinese plate, or for the reference text and remarks of a large section to be indented.
The basic format is as follows:
Text-indent: Indentation distance
Indent distance value:
· Numbers with length units
· Proportional Relationship
However, when using the proportional relationship, some people think that the default browser proportion is relative to the width of the paragraph. In fact, this is not the case, the window of the entire browser is the default reference object of the browser.
In addition, text-indent is a block-Level Attribute and can only be used for <p>, <blockquqte>, <ul>, 9. Control the color and background Style
The style that controls the color and background includes the color attributes, background color, background image, repeated background image, fixed background image, and background positioning.
1. color attributes
The basic format is as follows:
Color: Parameter
Color parameter value range:
· Expressed in RGB values
· Expressed in hex color values
· Use the English name of the default color
The English name of the default color is undoubtedly the most convenient, but because there are too few predefined color types, more web designers prefer RGB. The RGB method has many advantages. It not only accurately represents the color in numbers, but also is the default specification used in many image production software (such as PhotoShop, this laid a solid foundation for better integration of images and webpages.
2. Background Color
In HTML, there is only one way to add a background color to an object, that is, first create a table, set the background color in the table, and then put the object into the cell. This is more troublesome, not only the code is too large, but also the size and positioning of the table hurt some brains. Now you can use CSS to easily solve the problem, and the object can be a piece of text or a word or a letter.
The basic format is as follows:
Background-color: Parameter
The parameter value is the same as the color attribute.
3. Background Image
The basic format is as follows:
Background-image: URL)
The URL is the path where the background image is stored. If "NONE" is used to replace the path where the background image is stored, nothing is displayed.
4. Duplicate background images
The background image repeatedly controls whether or not the background image is tiled. That is to say, a background image can be displayed somewhere on the webpage with the background positioning control.
The basic format is as follows:
Background-repeat: Parameter
Value range:
· No-repeat: tiled background images are not repeated.
· Repeat-X: enables the image to be tiled only horizontally.
· Repeat-Y: enables the image to be tiled only vertically.
If you do not specify the duplicate attribute of the background image, the default attribute of the browser is that the background image is tiled horizontally and vertically.
5. Fixed background images
The background image is fixed to control whether the background image is scrolled along the webpage. If you do not set the fixed attributes of the background image, the default background image of the browser will scroll along with the page. To prevent the viewer's eyesight from being damaged by a too-fancy background image while scrolling, You can unbind the background image and text content from the browser window.
The basic format is as follows:
Background-Attachment: Parameter
Value range:
· Fixed: When a webpage is scrolling, the background image is not fixed as the browser's window.
· Scroll: When a webpage is scrolling, the background image is rolled together with the browser window.
6. Background Positioning
Background positioning controls the position of a background image displayed on a webpage.
The basic format is as follows:
Background-position: parameter table
Value range:
· Number parameters with length units
· Top: Align to the top of the foreground object
· Bottom: Align to the bottom of the foreground object
· Left: Left alignment relative to foreground object
· Right: Right-aligned relative to foreground object
· Center: align with the center of the foreground object
· Proportional Relationship
If the center parameter is used before another parameter, it indicates horizontal center; if it is used after another parameter, it indicates vertical center.
10. Control the style of the List
The list is a useful Display Method in HTML. You can arrange the related parallel content vertically to make the webpage clean and professional and give the viewer a clear view.
The style sheet adds some functions to the list. The style of the Control List includes the list style, graphical symbol, and list position.
1. List symbols
A list symbol is the symbol ID displayed before each list item.
The basic format is as follows:
List-style-type: Parameter
Value range:
· Disc: Circle
· Circle: hollow circle
· Square: Square
· Decimal: decimal number
· Lower-Roman: lowercase roman numerals
· Upper-Roman: upper-case roman numerals
· Lower-Alpha: lowercase Greek letter
· Upper-Alpha: uppercase Greek letters
· None: Unsigned display
The disc parameter is the default option.
2. graphical symbols
A graphical symbol indicates that the project symbol in the original list can be replaced by a graphic.
The basic format is as follows:
List-style-image: URL
A URL is the address of the graphic file used to replace the project symbol. You can use a relative address or an absolute address.
3. List location
List location description where the list is displayed.
The basic format is as follows:
List-style-position: Parameter
Value range:
· Inside: displayed inside the box model
· Outside: displayed outside the box model
Here, a new concept is introduced: the box model. Box is a container that contains objects that apply style rules.
11. Control the style of the user interface
On a webpage, the mouse is usually in the arrow shape. When pointing to a link, it becomes a hand shape, and when the webpage is downloaded, it becomes an hourglass shape ...... This seems to be a convention. Although such a design can let us know the current status of the browser or what we can do, it seems that these cannot fully meet our needs. Taking the link as an example, it can point to a Help file, or a forward or backward page. It cannot be explained if you rely on the same hand-shaped mouse for so many functions. Fortunately, CSS provides up to 13 mouse shapes for us to choose from.
The basic format is as follows:
Cursor: Mouse shape parameter
CSS Mouse shape parameter table:
CSS code
Mouse shape
Style = "cursor: hand"
Hand shape
Style = "cursor: crosshair"
Cross
Style = "cursor: Text"
Text
Style = "cursor: Wait"
Hourglass
Style = "cursor: Move"
Cross arrow
Style = "cursor: help"
Question mark
Style = "cursor: E-resize"
Right arrow
Style = "cursor: N-resize"
Up Arrow
Style = "cursor: NW-resize"
Upper left arrow
Style = "cursor: W-resize"
Left arrow
Style = "cursor: S-resize"
Down Arrow
Style = "cursor: Se-resize"
Bottom right arrow
Style = "cursor: Sw-resize"
Down-left arrow
12. Control the box style
A style sheet defines a container box that stores all the operable styles of an object. It includes four aspects: object itself, border blank, object border, and object gap.
Css_1.gif ">
For a better understanding of the meaning and relationship between these attributes, see the following figure:
1. Blank border (margin)
Located in the outermost layer of the box model, including four attributes.
The formats are as follows:
· Margin-top: margin on top
· Margin-Right: margin on the right
· Margin-bottom: margin at the bottom
· Margin-left: left blank distance
The blank distance can be represented by numbers with length units.
If you use the simplified Margin Method of the preceding attributes, you can add four consecutive numbers with length units, to represent margin-top, margin-right, margin-bottom, and margin-left, respectively. Separate the numbers with spaces.
2. Object border (Border)
Is located between the border space and the object space, including seven attributes.
The formats are as follows:
· Border-top: Top Border Width
· Border-Right: Right Border Width
· Border-bottom: Bottom Border Width
· Border-left: width of the Left Border
· Border-width: width of all borders
· Border-color: border color
· Border-style: border style parameters
Border-width can be used to set the width of all borders at a time. When border-color is used to set the color of the four border borders, four colors can be written consecutively and separated by spaces. The borders set in the preceding sequence are in the order of border-top, border-right, border-bottom, and border-left.
Border-style is slightly more complex than other attributes, because it also includes parameters of multiple border styles:
· None: no border.
· Dotted: the border is a dotted line.
· Dashed: the border is a long and short line.
· Solid: The border is solid.
· Double: the border is a double line.
· Groove: displays 3D borders with different effects based on the color attribute.
· Ridge: displays 3D borders with different effects based on the color attribute.
· Inset: displays 3D borders with different effects based on the color attribute.
· Outset: Display 3D borders with different effects based on the color attribute
3. Object gap (padding)
, Between the object border and object, including four attributes.
The basic format is as follows:
· Padding-top: top gap
· Padding-Right: Right gap
· Padding-bottom: Bottom gap
· Padding-left: Left gap
Similar to margin, padding can also use padding to set all object gaps at a time. The format is similar to margin and will not be listed one by one.
13. display control style
The basic format is as follows:
Display: Parameter
Value range:
· Block (default): line feed before and after the object
· Inline: no line breaks before and after an object
· List-item: A line break is added before and after the object.
· None: no display
14. blank control style
The basic format is as follows:
The blank attribute determines how to process spaces in an element.
White-space: Parameter
Value range:
Normal: replace multiple spaces with one for display.
Pre: faithfully display spaces by input
Nowrap: Disable line feed
Note that write-space is also a block-level attribute.
. The full text is complete.
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
