[Reprinted] CSS style sheet full contact

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Now, using FrontPage to create a web page is as simple as using a paint brush to draw a picture on white paper. However, as the content of the website continues to enrich, images, animations, subtitles, and other controls on the webpage are also constantly increasing. to precisely locate these elements on the webpage, these elements must be adjusted separately. I am afraid this can only be done by those who are obsessed with creating web pages. This is not the right tool and flexibility. Imagine opening a text file and editing a few lines to change the entire web site. Imagine creating a page with complex graphics, rich font sizes, and other special effects online, with a size of only 10 KB. How can this effect be achieved?
At the end of 1996, a technology called stylesheets emerged. The full name should be the abbreviation of cascade style sheet, that is, Cascading Style Sheet. We also often call it a style sheet. As the name suggests, it is used for webpage style design. For example, if I want my link words to be blue when they are not clicked, the words will become red and underlined after the mouse moves up. This is a style. By setting up a style sheet, we can uniformly control the display attributes of each flag in hmtl. It provides more precise control over la S, fonts, colors, backgrounds, and other text graphs. By modifying only one file, we can change the appearance and format of webpages with no counted pages to ensure compatibility between all browsers and platforms, with less encoding, fewer pages, and faster download speed. In addition to fully supporting most of our commonly used browsers, CSS has made outstanding achievements in implementing other commitments. CSS is changing the way we create a style sheet. It laid the foundation for most web page innovations.
I. Role of Style Sheets

1. format and structure separation

HTML has never intended to control the webpage format or appearance. This language defines the structure and features of a web page, and allows the browser to determine the appearance of each element. However, web designers require more. Therefore, when Netscape launched a new HTML Tag that can control the appearance of the webpage, webpage designers were all excited. We can use <font face> and <I> packages to control the appearance of the article subject outside <p>. Then we put everything into a table and use an implicit GIF space to generate a 20-pixel margin. Everything is messy. Coding becomes increasingly bloated, and it becomes increasingly difficult to quickly add content to webpages.

The concatenation style sheet separates the parts of the definition structure from the parts of the definition format so that we can apply more control to the layout of the page. HTML remains simple and clear. CSS Code independently controls the appearance of the page from another perspective.

2. You can control the page layout with unprecedented capabilities

<Font size> This allows us to adjust the font size. Table labels help us generate margins, which is true. However, we have limited overall control over HTML. We cannot accurately generate a height of 80 pixels. We cannot control the line spacing or word spacing. We cannot precisely locate the image position on the screen. But now, style sheets make it all possible. The upcoming new CSS feature is even more exciting.

3. You can create a web page that is smaller and faster to download.

There are better messages: style sheets are just simple text, just like HTML. It does not require images, programs, plug-ins, and streaming. It is as fast as HTML commands. With CSS, you can now use CSS to turn to GIF. Also, as I mentioned earlier, using a string style sheet can reduce table labels and other code that increases the HTML size, reduce image usage, and reduce file size.

4. A large number of web pages can be maintained and updated more quickly and easily.

If I want to update the font of all the subject text on the entire site without a style sheet, I must modify each webpage one page at a time. Even if the site uses a database to provide services, I still need to update all templates and update the <font face> of each instance in each template. The main purpose of a style sheet is to separate the format and structure. For style sheets, I can direct all the web pages on the site to a single CSS file. As long as I modify a row in the CSS file, the whole site will change accordingly.

5. the browser will become your more friendly interface

Unlike other network technologies, the style sheet code has good compatibility. That is to say, if a user loses a plug-in, it will not be interrupted, or the old version of browsers will not be messy. You can apply a style sheet to a browser that can recognize it.

Ii. style sheet syntax

A style sheet consists of style syntax to show the browser how to present a document. there are many ways to add style syntax to your HTML document, but the simplest way to start is to use the HTML style component. this element is placed in the head part of the document and contains the style rules of the webpage.

1. Selector

The composition of each rule includes a selector-usually an HTML element, such as body, P, or Em and the style accepted by the selector. there are many attributes that can be used to define an element. each attribute has a value to describe how to present the selector. style rules are composed of the following:

Selector {property: Value}

The compound style declaration of a single selector should be separated by semicolons:

Selector {attribute 1: value 1; Attribute 2: Value 2}

The following section defines the color and font size attributes of H1 and H2 elements:

<Head>

<Title> CSS example </title>

Em {font-size: 150%; color: Blue}

</Style>

</Head>

The style sheet above tells the browser to display the highlighted content on the webpage in a blue font of 1.5 times.

2. class selector

A single selector can have different classes, so the same element can have different styles. For example, a Web Builder may want to display the code in different colors depending on the language:

Code.html {color: #191970}

Code.css {color: #4b0082}

The preceding example creates two classes, CSS and HTML, for the code elements of a webpage. The class attribute is a class used to specify elements in a webpage. For example, <P class = CSS>, each selector only allows one class. A good habit is to name classes according to their functions rather than their appearance. The CSS class in the preceding example can also be named effect.

3. ID Selector

The ID selector individually defines the components of each element. This option should be used as few as possible, because it has certain limitations. The specified ID must have an indicator "#" before the name. For example, the ID selector can specify the following:

<! --

# First {color: Green}

# Second {color: teal}

-->

</Style>

4. Association Selector

An association selector is a string consisting of two or more single separators separated by spaces. These delimiters can specify general attributes, and their priority is higher than that of a single delimiters due to cascade order rules. For example, the following context Selector

P em {Background: yellow}. This value indicates that the highlighted text in a paragraph will be a yellow background, while the highlighted text in the title will not be affected.

5. pseudo classes and pseudo elements

Pseudo classes and pseudo elements are special classes and elements that can be automatically recognized by browsers that support CSS. Pseudo-classes differentiate different types of elements (for example, visited links (accessed connections) and active links (activable connections) that describe the types of two anchors ). A pseudo element is a part of an element, such as the first letter of a paragraph.

The format of pseudo-class or pseudo-element rules is as follows: selector: pseudo class {property: Value} Or selector: pseudo element {property: Value}

Pseudo classes and pseudo elements do not need to be specified by the class attribute of HTML. Common classes can be used with pseudo classes and pseudo elements, as shown below:

Selector. Class: pseudo class {property: Value}

Selector. Class: pseudo element {attribute: Value}

6. positioning the pseudo-anchor

A pseudo-class can specify a element to display the connection (LINKS), accessed connections (visited links), and active connections (active links) in different ways ). The positioning anchor element can be pseudo-link, visited, or active. An accessed connection can be defined as a display of different colors, or even different font sizes and styles. An interesting effect is to make the current (or "activable") connections display in different colors and larger fonts. Then, when the accessed connection of the webpage is reselected, it is displayed in different colors and smaller fonts. An example of this style sheet is as follows:

A: link {color: Red}

A: active {color: Blue; font-size: 125%}

A: visited {color: green; font-size: 85%}

7. pseudo elements in the first line

The first line of the text, for example, in an article in a newspaper, is displayed in uppercase and in bold. Css1 includes this function and uses it as a pseudo element. The first line of pseudo elements can be used for any block-level elements (such as P and H1 ). The following is an example of a pseudo-element in the first line:

P: first-line {

Iii. style sheet attributes

1. Background attributes
You are familiar with background color and background image. Here we will introduce two interesting background pattern attributes background-attachment. This attribute has two values: Scroll and fixed. Scroll is the initial value, the result is that a common background pattern flows along with the text on the page. Fixed attribute refers to the special effect of text flowing on the background because the background is not static, for example, body {background-Attachment: Fixed }. Background-Position

This attribute is the starting position for setting the background pattern, which can be set by percentage and length values. The initial values are 0 and 0, for example, body {background-position: 50% 50%}

2. Text attributes

Here are some common text attributes: "text-decoration" "text-aling" "line-heigth" "text-indent ".

Text-decoration I believe everyone is familiar with this attribute. For example, we often see a hyperlink without underscores on the Internet, which is achieved by setting this attribute. The commonly used attribute values include:

Attribute value description

None none

Underline underline

Overline

Lineth-rough strikethrough

After the preceding attribute values are displayed, we can remove the underline from the hyperlink and set it as follows: A: link {text-Decoration: None}

Text-align defines the align of text, which is similar to "align" in HTML. There are four alignment modes defined by alignment:

Left alignment

Right

Center

Justify

The line-height attribute defines the height of a text line, that is, the distance between two adjacent lines. This attribute can be defined by numbers, lengths, and percentages. For example:

Body {Line-heigth: 1.5; font-size: 10pt}

Body {Line-heigth: 150%; font-size: 10pt}

The row height produced by these two definitions is 15pt; that is, the Row Height attribute value is multiplied by the font size.

Text-indent: This attribute defines the indent mode of the first line of text, that is, the indent effect of the first line seen when using wordsoftware; this attribute value can be negative. For example:

P {text-indent: 5em}

P {text-indent:-5em}

Add any of the above statements to HTML to see the effect.

3. Font attributes

Font attributes are the most commonly used. common attributes of CSS fonts include:

Font-family match font body {font-family: Arial, times, impact}

Font-weight font fine P {font-weight: bolder} font to bold

Font-size font size body {font-size: 10pt}

Font-family font P {font-family: italic}: Set the font to italic.

The meaning of font-family: first look for the font name (Arial), if this font is installed on the computer, use it. If not, move to the following font (times). If not, move to the 3rd font. You can add any font name to the list. When you are unsure about the name of a font on different operating platforms, this is a good way. In addition, you can define all attributes at one time. For example:

Body {fotn-family:, Arial; font-weight: bolder; fint-size: 10pt; color: Blue}

Iv. Positioning of Style Sheets

The "positon" attribute of CSS positioning can be used to locate HTML elements in two ways: relative positioning and absolute positioning. Relative positioning allows elements to be offset relative to the original position of the Document Layout. Absolute positioning allows elements to be separated from the original document layout and can be located at will. There are a total of nine CSS positioning attributes:

Position, left, top, width, height, overflow, Z-index, and visibility position

The positon attribute values include absolute, relative, and static. When the absolute positioning element absolute is used, the located element is independent of the upper and lower levels, and completely independent from other content. When relative Relative is used, this element is used to locate the position of the upper-level element. Through relative positioning, the animation effect can be achieved using the script language.

Left, top

When formatting a document, CSS places objects in containers and then formats them. The upper left corner of the container is the reference point for positioning. The left value is the distance from the upper left vertex of the container to the upper left border of the container. The "TOP" is the distance from the upper left vertex of the container to the upper edge element.

Width and height

For absolute positioning elements, "width" and "height" define the space occupied by the elements. Available percentage or number definition.

Overflow

This attribute defines how the browser handles an element when its content exceeds the width and height of the container. The attribute values include:

Visible: the excess part is displayed unconditionally regardless of the defined width and height.

Hidden: the width and height of the container that exceeds the definition will be cut.

Scroll: the browser provides a set of scrolling tools.

Auto: a set of scrolling tools are usually provided based on different browsers.

V. Introduction of Style Sheets

I have learned how to define CSS. The following describes how to introduce CSS in HTML.

1. Use <link> to link an external style form. For example:

<Head>

<Title> my stylesheet </title>

</Head>

One of the biggest advantages of applying a CSS file is that you can reference this file in each HTML file, so that the hmtl files of the entire site are consistent in style, avoid repeated CSS attribute settings. In addition, you can directly modify the CSS file when you modify the style or make some major adjustments. Of course, HTML files always reference recently updated style sheets, instead of finishing each HTML file. Isn't that convenient! Note that if you want to build your own website, you should not ignore this aspect. If you do not have a unified planning of the website style at the beginning and form a CSS file, there will be more content in the future, if you want to adjust the style, you will be exhausted.

2. Place the Definition Statement between the

<! --

TD {color: green; font-size: 15px; font-family: Arial}

-->

</Style>

3. Use CSS "@ import" to import a style form. For example:

<! --

@ Import url(mystyles.css );

-->

</Style>

4. Use the "style" tag in the <body> internal element to define it. For example:

<P style = "color: red; font-size: 20px; font-family: Arial"> my style sheet </P>

5. Direct plug-in

Direct plug-in is simple, but you can write CSS attributes after every HTML sign. This method is very direct. If we want to specify that the word in a table flag is red and the font size is 10 pt, we can write as follows:

This method is mainly used to adjust the specific logo, and its scope is limited to this logo.

V. Introduction of Style Sheets

I have learned how to define CSS. The following describes how to introduce CSS in HTML.

1. Use <link> to link an external style form. For example:

<Head>

<Title> my stylesheet </title>

</Head>

2. Place the Definition Statement between the

<! --

TD {color: green; font-size: 15px; font-family: Arial}

-->

</Style>

3. Use CSS "@ import" to import a style form. For example:

<! --

@ Import url(mystyles.css );

-->

</Style>

4. Use the "style" tag in the <body> internal element to define it. For example:

<P style = "color: red; font-size: 20px; font-family: Arial"> my style sheet </P>

5. Direct plug-in

This method is mainly used to adjust the specific logo, and its scope is limited to this logo.

6. style sheet filter Composition

As a member of the style sheet family, filters have the same definition and application methods as other style sheet elements, it can be directly defined between the

Mark {filter: Filter Name (attribute name 1 = attribute value 1, attribute name 2 = attribute value 2 ,....);}

It indicates that, for content within the tag range, the style sheet filter will perform special effect Processing Based on the object defined by the attribute name in the parentheses according to the value set by the attribute value. Mark it as any mark in the HTML syntax, such as span, P, BR, etc. The filter name is the 14 filter names involved below; each filter has its own attribute name and attribute value.

Example: P {filter: alpha (opacity = 80, style = 1 );}

The above is the definition method for using style sheet filters.

7. Types of static Filters

In ie4.0 or later browsers, the following 14 style sheet filters are supported:

Filter Name Description

Alpha makes the object show a gradient translucent Effect

Blur makes the object blur

Dropshadow gives the object a Falling Shadow.

Glow creates a halo and blur effect around the object.

Chroma converts a color in the image to a transparent color.

Fliph converts HTML Objects horizontally

Flipv converts HTML Objects vertically

Wave generates a horizontal or vertical sine wave for HTML Objects

Shadow creates a shadow for an object.

Mask uses an HTML object to generate an image mask on another object.

Light places a light and shade on the HTML Element

Gray converts a color image to a gray image.

Invert allows an object to produce a photo negative.

Xray highlights object outlines

These filters are like the special effects provided by the Photoshop image processing software. With these special effects, you can directly process the images in HTML, instead of using a dedicated image processing software to edit images. Style filter not only applies to images, but also to text. For convenience, I will use text as an example to talk about the filter parameters and their functions.

8. filter parameters and their functions

1. Alpha Filter

Syntax: {filter: alpha (opacity = attribute value 1, finishopacity = attribute value 2, style = attribute value 3, startx = attribute value 4, starty = attribute value 5, finishx = attribute value 6, finishy = attribute value 7 )}

Purpose: this filter can make the object show a gradient translucent effect. Its effect is determined by the attribute names in parentheses and their corresponding attribute values.

Parameter: The opacity attribute specifies the degree of opacity. The percentage indicates the attribute value. The size ranges from 0 to 100. The 0 table is completely transparent, and the table is completely opaque.

The finishopacity attribute is an optional parameter used with the same opacity. When both opacity and finishopacity are set, transparent and progressive effects can be produced; the attribute value is also from 0 to 100. The 0 table is completely transparent, and indicates completely opaque.

The style attribute is used to set the gradient style. When both opacity and finishopacity are set to generate a transparent progressive state, it is mainly used to specify a progressive display shape. 0 indicates a uniform progressive state; 1 represents linear evolution; 2 represents progressive radiation; 3 represents progressive right angle.

The startx attribute is used to set the starting position of the progressive horizontal direction.

The finishx attribute is used to set the progressive end position in the horizontal direction.

The finishy attribute is used to set the vertical progressive end position.

Instance:

<HTML>

<Head>

<Title> style filter instance </title>

<Style>

<! --

P {color: # ff0000; font-size: 36pt; text-Decoration: Blink; font-weight: bold} p {filter: alpha (opacity = 80, style = 0, starx = 2, finishx = 4 );}

-->

</Style>

</Head>

<Body>

<P> style sheet filter instance </P>

</Body>

</Html>

2. blur filter

Syntax: {filter: blur (add = attribute value 1, direction = attribute value 2, strength = attribute value 3 );}

Purpose: this filter can blur an object. Its effect is determined by the attribute names in parentheses and their corresponding attribute values.

Parameter: The add attribute is used to determine whether to use the original target in motion blur. Its Attribute values include 0 and 1. The value 0 indicates that the original target is not used in Fuzzy motion, in most cases, this parameter is applicable to images. 1. The attribute value indicates that the original object is used in Fuzzy motion and applies to text in most cases.

The direction attribute is used to indicate the angle of The Blur movement. Its Attribute Value ranges from 0 to 360 degrees.

The strength attribute is used to indicate the distance during fuzzy movement. This attribute value can be set at will.

Instance:

<HTML>

<Head>

<Title> style filter instance </title>

<Style>

<! --

P {color: # ff0000; font-size: 36pt; text-Decoration: Blink; font-weight: bold}

P {filter: blur (add = 1, direction = 60, strength = 2 );}

-->

</Style>

</Head>

<Body>

<P> style sheet filter instance </P>

</Body>

</Html>

3. dropshadow Filter

Syntax: {filter: dropshadow (color = attribute value 1, offx = attribute value 2, offy = attribute value 3, positive = attribute value 4 );}

Purpose: this filter is mainly used to produce overlapping effects. Its effect is produced by the attribute names in parentheses and their corresponding attribute values.

Parameter: The color attribute is used to set the color of the projection text.

The offx attribute indicates the horizontal offset between the projected text and the original text.

The offy attribute represents the offset in the vertical direction between the projection text and the original text.

The positive attribute is a Boolean value (0 or 1). If it is set to "true (not 0)", a visible projection is created for any non-transparent pixel; if it is "fasle (0)", a transparent effect is created for the transparent pixel part.

Instance:

<HTML>

<Head>

<Title> style filter instance </title>

<Style>

<! --

P {color: # ff0000; font-size: 36pt; text-Decoration: Blink; font-weight: bold}

P {filter: dropshadow (color = # ff0080, offx = 2, offy = 2, positive = 0); color: #00ff11}

-->

</Style>

</Head>

<Body>

<P> style sheet filter instance </P>

</Body>

</Html>

4. Glow filter

Syntax: {filter: glow (color = attribute value 1, strength = attribute value 2 );}

Purpose: this filter produces a similar effect on the original object. The effect is produced by the attribute names in parentheses and their corresponding attribute values.

Parameter: The color attribute specifies the color of the glow.

Strength represents the luminous intensity, or the thickness of the Halo. The intensity can be specified by any integer ranging from 1 to 255.

Instance:

<HTML>

<Head>

<Title> style filter instance </title>

<Style>

<! --

P {color: # ff0000; font-size: 36pt; text-Decoration: Blink; font-weight: bold}

P {filter: glow (color = #880088, strength = 3 );}

-->

</Style>

</Head>

<Body>

<P> style sheet filter instance </P>

</Body>

</Html>

5. chroma Filter

Syntax: {filter: chroma (color = attribute value );}

Purpose: this filter turns a color in the image into a transparent color.

Parameter: The color attribute is used to specify the color to be transparent. By setting the attribute value, we can filter the specified color in an image.

Instance:

<HTML>

<Head>

<Title> style filter instance </title>

<Style>

<! --

P {color: # ff0000; font-size: 36pt; text-Decoration: Blink; font-weight: bold}

P {filter: chroma (color = # 0000fe );}

-->

</Style>

</Head>

<Body>

<P> style sheet filter instance </P>

</Body>

</Html>

6. fliph Filter

Syntax: {filter: filph}

Function: this filter enables the HTML object to be swapped between the left and right, which is generally applicable to image objects.

Parameter: this filter has no parameters.

7. flipv Filter

Syntax: {filter: filpv}

Function: this filter enables up and down Conversion of HTML objects. It is generally applicable to image objects.

Parameter: this filter has no parameters.

8. Wave Filter

Syntax: {filter: Wave (add = attribute value 1, freq = attribute value 2, lightstrength = attribute value 3, phase = attribute value 4, strength = attribute value 5 );}

Purpose: this filter can generate a sine wave for the filtered object, thus forming a deformation illusion. The specific effect is produced by the attribute names in parentheses and their corresponding attribute values, it is applicable to image objects.

Parameter: The add attribute is a Boolean value used to determine whether to add the original image to the final effect.

The freq attribute refers to the ripple frequency, that is, the total number of ripple to be generated on the object.

The phase attribute is used to set the offset of the sine wave, that is, to determine the shape of the waveform. The value range of the attribute value is from 0 to 360 degrees.

The lightstrength attribute can be used to enhance the effect of Ripple shadow. Its value ranges from 0 to 100.

The strength attribute is used to determine the waveform amplitude.

9. Shadow Filter

Syntax: {filter: Shadow (color = attribute value 1, direction = attribute value 2 );}

Purpose: this filter can produce a shadow effect for an object. The effect is produced by the attribute names in parentheses and their corresponding attribute values.

Parameter: The color attribute is used to set the color of the shadow.

The direction attribute is used to set the direction of the projection. The value ranges from 0 degrees to 360 degrees. 0 degrees indicates vertical up, and then every 45 degrees is a unit, the default value of this attribute is 270 degrees to the left.

Instance:

<HTML>

<Head>

<Title> style filter instance </title>

<Style>

<! --

P {color: # ff0000; font-size: 36pt; text-Decoration: Blink; font-weight: bold}

P {filter: Shadow (color = #00ff00, direction = 2 );}

-->

</Style>

</Head>

<Body>

<P> style sheet filter instance </P>

</Body>

</Html>

10. mask filter

Syntax: {filter: mask (color = attribute value );}

Purpose: this filter can use an HTML object to generate an image mask on another object. It can create a film covering the surface of the object, the effect is the same as that of wearing colored glasses. It is generally applicable to image objects.

Parameter: The color attribute is used to specify the color to be masked.

11. Light Filter

Syntax: {filter: Light}

Purpose: this filter can simulate the projection effect of a light source for an HTML object. Once the light filter attribute is defined for the object, you can call its method to set or change the attribute. Available Methods of light include:

Movelight mobile Light Source

Changcolor changes the color of light

Addambient adds a surrounded Light Source

Addpoint

Clear clear all light sources

Addcone added to conical Light Source

Changstrength changes the intensity of the light source

You can define the virtual position of the light source, and control the focus position of the light source by adjusting the values of the X and Y axes. You can also adjust the light source form (point light source or conical light source) specifies whether a light source has blurred borders, color, brightness, and other attributes. If the light source is set dynamically, unexpected results may occur.

Parameter: this filter has no parameters.

12. Gray Filter

Syntax: {filter: Gray}

Function: this filter can convert a color image to a gray image, which is generally applicable to image objects.

Parameter: no parameters are attached to the filter.

13. Invert Filter

Syntax: {filter: Invert}

Role: this filter can make the image produce a photo negative effect, which is generally applicable to image objects.

Parameter: this filter has no parameters.

14. Xray Filter

Syntax: {filter: Xray}

Purpose: this filter allows an object to reflect its outlines and highlight these outlines. It is generally applicable to image objects.

Parameter: this filter has no parameters.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More