CSS (cascading stylesheets, cascading style sheets) is a new technology for making Web pages that is now supported by most browsers and is one of the essential tools for Web design. The use of CSS can simplify the format of the page code, speed up the download display, but also reduce the number of code to upload, greatly reducing the amount of duplication of work. Especially when you are faced with a site with hundreds of pages, CSS is like God's gift to us!
Preface
CSS (cascading stylesheets, cascading style sheets) is a new technology for making Web pages that is now supported by most browsers and is one of the essential tools for Web design.
The World Wide Web Consortium The Dynamic HTML into three parts: scripting languages (including JavaScript, VBScript, and so on), browsers that support dynamic effects, including the Internet Explorer, Netscape Navigator, and so on) and CSS style sheets.
one. Features of cascading style sheets
And do not say the past lack of dynamic web pages, that is, the layout of the content of the Web page also has a lot of difficulties, if not professionals or particularly patient people, it is difficult to let the Web page according to their own ideas and ideas to display information. Even those who have mastered the essence of the HTML language will have to pass many tests to master the layout of the information, the process is very long and painful. For the development of the Internet, let more people set foot in this colorful world as soon as possible, new HTML auxiliary tool is ready to be ready.
The style sheet is born under this kind of demand, the first thing to do is to precisely position the elements on the Web page, so that web designers like the director, easy to control by the text, the image of the actors, in the Web site on the stage according to the script requirements to perform well.
Second, it separates the content structure and format control on the Web page. The viewer wants to see the content structure on the Web page, and in order for the viewer to see this information better, it is necessary to help by formatting control. The previous two on the Web page distribution is staggered, see the modification is inconvenient, and now the two separate will greatly facilitate the designer of the Web page. The separation of the content structure from the format control allows the Web page to be composed of content, while the formatting of all pages is controlled to a CSS style sheet file. This is done in two ways:
First, the format code for the Web page is simplified, and the external stylesheet is saved in the cache by the browser, speeding up the download display and reducing the number of code that needs to be uploaded (because the format of the duplicate settings will be saved only once).
Second, as long as the changes to preserve the Web site format CSS style sheet files can change the style of the entire site, in the number of pages to modify the huge site, it is particularly useful. Avoid a Web page modification, greatly reducing the workload of duplication of work, when you are facing a site with hundreds of pages, CSS is like God's gift to us! ^_^
Two Ways to add cascading style sheets
There are four ways we can add style sheets to a Web page.
1. The simplest method is to add directly to the HTML identifier (TAG):
< Tag style= "Properties" > Web content </tag>
As an example:
< P style= "color:blue; Font-size:10pt ">CSS Example </p>
Code Description:
Displays a "CSS instance" with a font size of 10pt in blue. Although simple and intuitive to use, this approach is less common because it adds the advantage of not being able to fully play the style sheet. "Content structure and formatting control are saved separately."
2. Added in the header information identifier < head> of HTML:
| The following is a reference fragment: < head> < style type= "Text/css" > <!-- What the style sheet is about --> </style> |
3. Link Style sheet
The same is added to the header information identifier < head> in HTML:
| The following is a reference fragment: < head> < link rel= "stylesheet" href= "*.css" type= "text/css" media= "screen" > |
4. Using style sheets jointly
The same is added to the header information identifier < head> in HTML:
| The following is a reference fragment: < head> < style type= "Text/css" > <!-- @import "*.css" Declaration of other style sheets --> </style> |
Three Format of cascading style sheets
In general, the Declaration of a stylesheet is divided into selectors (selector) and blocks {} (block), which contain attributes (properties) and the value of the property (value), and the basic format is as follows:
Selection character
Other format 1:
Selector 1, selector 2, selector 3
Sometimes multiple selectors will use the same settings, in order to simplify the code, we can set the style for them, and add "," between multiple selectors to separate them.
When you have more than one attribute, you must separate the two attributes with ";".
Other Format 2:
Selector 1 Selector 2
and format 1 are very similar, but only less between the selector ",", but the effect is very different. Represents a style rule that is set when the selection character 2 includes content that is included in the selector 1.
Four Classification of cascading Style sheets
In order to make the format of the Web page not excessively monotonous, it is necessary to have the same selector to be categorized and to design different styles according to different categories. The basic format is as follows:
Selector. Class Alias
A category name can be referenced in an character of an HTML ID:
< identifier class= category name > Web page content
Five Pseudo class for Cascading style sheets
In addition to the above classification methods, in order to make the use of classification more flexible and diverse, but also produced the concept of Pseudo-class. What is the difference between a class and a pseudo class?
Generally speaking, a selector can be set in bundles with multiple classes, so that although it can create many different styles for the same selector, the form of bundling also restricts the set class to be used by other selectors. Pseudo class is created to solve this problem, each of the predefined pseudo class can be referenced by all HTML identifiers, of course, some block-level content, except the settings. The basic format is as follows:
. Pseudo class Name
A pseudo class can be referenced in HTML by any identifier.
< identifier class= pseudo class name > Web page content
Six. Control the style of a font
Control font styles include four parts that control font type, font size, font style, and font weight.
1. Font type
Usually in the use of Word and other word processing software, often need to adjust the display of fonts, such as "Arial", "Impact", "Verdana" and other fonts are the author used more.
The basic format is as follows:
Font-family: Font Name
If you add a variety of font names after font-family, browser back to the order of the font name in the user's computer to find the installed fonts, once encountered with the required matching font, the font to display the content of the page, and stop the search; If all the fonts in the stylesheet are not installed, the browser will use its default font instead of displaying the contents of the page.
Attention:
• Use "," to separate each font name when you specify more than one font.
• When the font name contains more than two separate words, enclose the font name with "".
• When there is already "" in the style rule, use ' instead of '.
2. Font size
The basic format is as follows:
Font-size: Font Size parameters
Value range of font size:
• Point unit: DOT units are available on all browsers and operating platforms
• In EM: The size of the letter element, the same distance as point
• In pixes: pixels can be used for all operating platforms, but may result in differences in display results due to the different screen resolution of the viewer
• In (inches)
• In cm (cm)
• in mm (mm) as the unit
• PC (printer font size)
• In EX (x-height)
smaller: Smaller than the default size of the current text
larger: Smaller than the default size of the current text
• Use proportional relationships
Xx-small
X-small
Small
Medium
Large
X-large
Xx-large
3. Font style
Font style can only control the display of various italic characters.
The basic format is as follows:
Font-style: Name of italic word
4. Font weight
Font weight controls the display of bold characters, ranging from digital 100~900 to a browser default font weight of 400. In addition, the lighter and bolder can be used to make the font appear thinner or thicker on the original basis.
The basic format is as follows:
Font-weight: Font weight
Seven. Control the style of text
The style of control text includes two parts, such as text capitalization and text decoration.
1. Text case
Text case so that the designer of the Web page does not have to fill in the text when the text is completed, but you can enter the finished, and then the local text to be set to case.
The basic format is as follows:
Text-transform: Parameters
Parameter value range:
Uppercase: All text capitalization display
lowercase: All text lowercase display
capitalize: Capitalize the first letter of each word
None: Do not inherit the text deformation parameters of the mother
Note: Inheritance means that an identifier for an HTML inherits from an argument that contains its own identifier.
2. Text decoration
The main purpose of the text decorations is to change the underline when the browser displays text links.
The basic format is as follows:
Text-decoration: Parameters
Parameter value range:
Underline: Underline text
overline: Underline text
Line-through: Delete lines for text
blink: Make text blink
None: Do not show any of the above effects
Eight. Control the style of text
Control text styles include word distance, letter distance, text spacing, text horizontal alignment, and text indented six sections vertically.
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 distance
Distance between the values: points, EM, pixes, in, CM, MM, PC, ex, normal and so on.
2. Letter Spacing
Letter spacing refers to the distance between English letters, function, usage, and the setting of parameters and the spacing of words is very similar.
The basic format is as follows:
Letter-spacing: Letter Spacing
3. Spaced
Line spacing refers to the vertical distance between the two lines of baseline. Generally speaking, the English five-grid exercise book, the third line from the top down is the computer's thought that the line of the baseline.
The basic format is as follows:
Line-height: Distance between rows
Distance between rows:
• Number with no units: 1 as the base, equal to 100% of the proportional relationship
• Number with length units: whichever is the specific unit
• Proportional relationship
Note: If the text has a large font size and the line spacing is relatively small, the two lines of text may overlap.
4. Text Horizontal Alignment
Text horizontal alignment controls the horizontal alignment of text, and does not just refer to text content, but also to the alignment of settings for pictures and image data.
The basic format is as follows:
Text-align: Parameters
The value of the parameter:
left: left-aligned
right: Align Right
Center: Center Alignment
Justify: Relative right and left alignment
It should be noted, however, that Text-alight is a block-level attribute and can only be used in identifiers such as < p>, < blockquqte>, < ul>, < h1>~< h6>, and so on.
5. Text vertically aligned
The vertical alignment of text should be relative to the position of the text parent, not the text being vertically aligned in the Web page. For example, a table cell has a paragraph of text, so the vertical center of the text is measured against the cell, that is, the text will appear in the center of the cell, not the entire page.
The basic format is as follows:
Vertical-align: Parameters
Parameter values:
Top: Top alignment
Bottom: Bottom alignment
text-top: Align relative to top of text
text-bottom: Align relative to text bottom
Baseline: Baseline alignment
Middle: Center Alignment
Sub: The form shown below
Super: The above standard form shows
6. Text indent
Text indentation enables text to be displayed in areas with a narrower default value, mainly for first-line indentation in Chinese plate, or for indented text and notes for large paragraphs.
The basic format is as follows:
Text-indent: Indent Distance
Indent Distance Value:
• Number with length units
• Proportional relationship
However, it should be noted that when using proportional relationships, some people think that the default ratio of browsers is relative to the width of the paragraph, in fact, this is not the case, the entire browser window is the browser's default reference.
In addition, Text-indent is a block-level attribute and can only be used in identifiers such as < p>, < blockquqte>, < ul>, < h1>~< h6>, and so on.
Nine. Control the style of colors and backgrounds
The styles that control color and background include color attributes, background color, background picture, background picture repetition, background picture fixed, background positioning six parts.
1. Color Properties
The basic format is as follows:
Color: Parameter
Color parameter values range:
• Expressed as an RGB value
• The color value of the 16 (hex) represents
• In English name of default color
The default color of the English name is undoubtedly the most convenient, but because the predefined color types are too few, so more web designers like to use RGB way. RGB way of many benefits, not only can use the form of digital accurate color, but also a lot of image production software (such as Photoshop) in the default use of the specification, so that the picture and the Web better combine to lay a solid foundation.
2. Background color
In HTML, the only way to add a background color to an object is to make a table, set the background color in the table, and put the object in the cell. This is more cumbersome, not only the code more, but also for the size and location of the table to hurt some brains. Now with CSS can easily be directly done, and the scope of the object is very wide, can be a paragraph of text, can also be just a word or a letter.
The basic format is as follows:
Background-color: Parameters
Parameter takes the same value as the Color property.
3. Background picture
The basic format is as follows:
Background-image:url (URL)
The URL is the location of the background image. If you use "none" instead of the background image's storage path, nothing will appear.
4. Duplicate background picture
Background image Repeat control is the background image tile or not, that is, the combination of background positioning control can be on the page of a separate display of a background picture.
The basic format is as follows:
Background-repeat: Parameters
Parameter value range:
no-repeat: Do not repeat tile background picture
repeat-x: Tile the picture in horizontal direction only
repeat-y: Tile the picture in the vertical direction only
If you do not specify a background picture repeating property, the browser defaults to a background picture tiled horizontally, vertically, two directions.
5. Background picture fixed
Background picture fixed controls whether the background picture scrolls with the scrolling of the page. If you do not set the background picture fixed property, the browser default background picture scrolls with the scrolling of the page. To avoid overly flashy background images that damage the viewer's eyesight when scrolling, you can remove the bundle of background pictures and text content, which is tied to the browser window.
The basic format is as follows:
Background-attachment: Parameters
Parameter value range:
fixed: When the Web page scrolls, the background image is fixed as opposed to the browser window
Scroll: When a Web page scrolls, the background image scrolls with the browser's window
6. Background positioning
Background positioning is used to control where a background picture is displayed in a Web page.
The basic format is as follows:
Background-position: Parameter table
Parameter value range:
• Numeric parameters with length units
Top: Top alignment relative to foreground object
bottom: Base alignment relative to foreground object
left: left-aligned relative foreground object
right: Align to right of relative foreground object
Center: Center alignment relative to foreground object
• Proportional relationship
Center of the argument if used in front of another parameter, the center is centered, and if it is followed by another argument, it is centered vertically.
10. Control List Style The
list is a useful display in HTML, which arranges the relevant side-by-side content neatly and vertically, making the Web page look neat and professional, and gives the viewer a clear feeling. The
Style sheet adds functionality to the list, and the control list style includes a list style, a graphical symbol, and a list position of three parts.
1. The list symbol
list symbol refers to the symbol ID that is displayed for each list item. The
Basic format is as follows:
List-style-type: Parameters
Parameter values range:
disc: Circular
circle: Hollow Circle
Squar E: Box
decimal: decimal digit
lower-roman: lowercase roman numerals
upper-roman: Uppercase Roman numerals
lower-alpha: lowercase Greek letter
upper-alpha: Uppercase Greek letters
none: Disc in unsigned
parameters is the default option.
2. Graphical symbols The
graphic symbol means that the bullets from the original list can be replaced with graphics. The
Basic format is as follows: The
List-style-image:url
URL is the address of a graphics file that is used in place of bullets, and you can use relative or absolute addresses.
3. List location
List location describes where the list is displayed. The
Basic format is as follows:
list-style-position: Parameters
Parameter range:
inside: Displaying inside box model
outside: In box mode Type external display
Here comes a new concept: the box model. Box refers to a container that contains an object that applies style rules, as described in the following article.
11. Control the style of the user interface
On the Web page, the mouse is usually arrow-shaped, pointing to the link to become a hand-shaped, waiting for the Web page to download when the hourglass-shaped ... This seems to be a conventional one. Although this design allows us to know the current state of the browser or what can be done, but these do not seem to fully meet our needs. Take the link, you can point to a Help file, it can be to move forward a page or to back a page, for so many features light by the same hand-shaped mouse can not explain the problem. Thankfully, CSS provides up to 13 kinds of mouse shapes for us to choose from.
The basic format is as follows:
Cursor: Mouse shape parameters
CSS Mouse shape parameter table:
Mouse shapes: CSS code
Style= "Cursor:hand" hand shape
Style= "Cursor:crosshair" Cross
style= "Cursor:text" text form
Style= "cursor:wait" hourglass shape
Style= "Cursor:move" Cross Arrow-shaped:
style= "Cursor:help" question mark form
style= "cursor:e-resize" right arrow shape
Style= "cursor:n-resize" Up Arrow shape
style= "Cursor:nw-resize" upper left Arrow shape
Style= "Cursor:w-resize" Left arrow shape
Style= "cursor:s-resize" down arrow shape
style= "Cursor:se-resize" right down arrow shape
Style= "Cursor:sw-resize" Left down arrow shape
12. Control the style of box
The stylesheet provides a container box that will store all the operable styles of an object. Includes four aspects of the object itself, border whitespace, object borders, and object clearance.
For a better understanding of the meaning of these attributes and the relationship between them, see the following illustration:
1. Border Blank (MARGIN)
The outermost layer of the box model, as shown in the figure, includes four properties.
The formats are as follows:
margin-top: Top blank distance
margin-right: Right blank distance
margin-bottom: Bottom blank distance
margin-left: Left blank distance
Blank distances can be represented by a number with a length unit.
If you margin by using the simplified method of the above property, you can add four consecutive digits with length units to represent the Margin-top, Margin-right, Margin-bottom, Margin-left respectively, separated by a space in the middle of each number.
2. Object Border (BORDER)
As shown in the figure, between the border whitespace and the object gap, seven properties are included.
The formats are as follows:
border-top: Top Border width
border-right: Right Border width
border-bottom: Bottom Border width
Border-left: Left Border width
border-width: All border widths
border-color: Border color
border-style: Border Style parameters
Where border-width can set all the width of the border at once, border-color the color of the four sides of the border, you can write four colors consecutively, separated by a space. The contiguous set of borders is in the order of Border-top, Border-right, Border-bottom, Border-left.
Border-style is slightly more complex than the other attributes because it also includes parameters for multiple border styles:
None: No border.
dotted: The border is a dotted line.
dashed: The border is a short line.
Solid: The border is a solid line.
Double: The border is two lines.
Groove: Displays a 3D border with different effects based on the Color property
Ridge: Displays a 3D border with different effects based on the Color property
inset: Displays a 3D border with different effects based on the Color property
outset: Displays a 3D border with different effects based on the Color property
3. Object Gap (PADDING)
As shown in the figure, it is located between the object border and the object, including four properties.
The basic format is as follows:
padding-top: Top Clearance
Padding-right: Right Clearance
Padding-bottom: Bottom Clearance
Padding-left: Left Clearance
Similar to margin, padding can also use padding to set all object gaps at once, and the format is similar to margin, no longer enumerated.
13. Show control style
The basic format is as follows:
Display: Parameters
Parameter value range:
block (default): Wrapping lines before and after objects
Inline: No wrapping before and after the object.
List-item: Wrapping lines before and after objects, adding bullets
None: No display
14. Blank control style
The basic format is as follows:
The whitespace property determines how spaces within an element are handled.
White-space: Parameters
Parameter value range:
Normal: Replace multiple spaces with one to display
Pre: Faithfully press ENTER to display spaces
NoWrap: No Line wrapping
Note, however, that Write-space is also a block-level attribute.
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
