Scripted CSS
Cascading Style Sheet (CSS) is a standard for specifying the visual representation of HTML documents. CSS is intended to be used by visual designers: it allows designers to accurately specify the font, color, margin, indentation, border, and even positioning of document elements. However, client-side JavaScript programmers are also very interested in CSS because styles can be scripted. Scripted CSS enables a series of interesting visual effects. For example, you can create an animation to "slide in" the document content from the right, or you can create an outline telescopic list in which the user can control the amount of information displayed. The first introduction of similar scripted visual effects is revolutionary. The JavaScript and CSS technologies that create these effects were formerly collectively referred to as dynamic HTML (DHTML), but now the term is no longer popular.
CSS overview
The visual display of HTML documents contains many variables: font, color, spacing and so on. The CSS standard lists these variables, which we call style attributes. CSS defines these attributes to specify font, color, margin, border, background picture, text alignment, element size, and element position. In order to define the visual representation of HTML elements, the values of these CSS attributes are specified. To do this, the property name is followed by a colon and a value, for example:
font-weight: bold
In order to fully describe the visual representation of an element, it is usually necessary to specify more than one attribute. When multiple name / value pairs are required, they are separated by semicolons:
margin-left: 10%; /* The left outer margin is 10% of the page width */ text-indent: .5in; /* 1/2 Inch indent */ font-size: 12pt; /* Font size 12pt */
As you can see, CSS ignores comments between "/ *" and "* /", but it does not support comments after "/ /".
There are two ways to associate a set of CSS attributes that define visual presentation with the corresponding HTML elements. The first method is to set the style attribute value for each individual HTML element, which is called inline style:
<p style="margin: 20px; border: solid red 2px;"> This paragraph has increased margins and is surrounded by a rectangular red border. </p>
However, it is often more useful to separate individual HTML elements from CSS styles and define them in a style sheet. Style sheets associate a set of style attributes with a set of HTML elements described using selectors through selectors. A selector specifies (or "selects") elements in one or more documents based on element ID, class name, or tag name, or more conditions.
The basic elements of CSS style sheets are style rules, which consist of selectors and CSS attributes and values wrapped in a pair of "{}". Each style sheet can contain any number of style rules:
P { /* The selector matches all < p > elements */
text-indent: .5in; /* The first row is reduced by 5 inches */
}
.warning { /* Any element named after the "warning" class */
background-color: yellow; /* Set to yellow background */
border: solid black 5px; /* Large black border */
}
Wrap a CSS style sheet with < style > and < / style > tags and put it in the < head > tag, which is associated with the HTML document. Like < script > elements, < style > element content will not be parsed as HTML:
<html>
<head>
<title>Test Document</title>
<style>
body {
margin-left: 30px;
margin-right: 15px;
background-color: #ffffff
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>Testing, testing</p>
</body>
</html>
When a style sheet needs to be used in multiple pages of a website, it is usually better to save it in your own file, which does not contain any HTML tags. It can be introduced into HTML pages. However, unlike the < script > element, < style > element has no src attribute. To introduce a style sheet into the page, use the < link > tag in the < head > of the document:
<head>
<title>Test Document</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
In short, this is how css works.
Cascade
Recall that in CSS, "C" stands for "cascade". This term indicates that the style rule applied to any given element in the document is the "cascading" effect of each "source":
-
Default style sheet for Web browsers
-
Style sheets for documents
-
The style attribute of each individual HTML element
Of course, the style in the style attribute overrides the style in the style sheet, and the style in the document's style sheet overrides the browser's default style. The visual representation of any given element may be a combination of styles from three sources. An element may even match multiple selectors in the style sheet, in which case the associated style attributes of all these selectors will be applied to the element. (if different selectors define different values for the same style attribute, the value associated with the most specific selector overrides the value associated with the less specific selector.)
In order to display document elements, the Web browser "must" combine the style attribute of the element, including style values from all matching selectors in the document style sheet. The result of the calculation is a set of style attributes and values that are actually used to display elements. This set of values is the calculated style of the element.
CSS history
CSS is a relatively old standard. CSS1 was adopted in December 1996. It defines specific colors, fonts, margins, borders and other basic styles. Older browsers like Netscape 4 and Internet Explorer 4 strongly support CSS1. The second edition of the standard (CSS2) was adopted in May 1998. It defines many advanced features, the most famous of which is to support the absolute positioning of elements. CSS 2.1 clarifies and corrects CSS 2, and it removes features that browser vendors have never implemented. Modern browsers basically fully support CSS2.1, but ie lower than IE 8 still has some missing problems.
In the follow-up work of CSS, for version 3, CSS specification has been divided into various specialized modules to pass the standardization process respectively. Can be in http://www.w3.org/Style/CSS/current-work CSS specifications and working drafts can be found in.
Composite attribute
Some style attributes that are often used together can be combined to use a special composite attribute. For example, the font family, font size and font weight attributes can be set at one time with the compound attribute value of font:
font: bold italic 24pt helvetica;
Similarly, the border, margin and padding attributes are the composite attributes that set the border, outer margin and inner margin (the space between the element and the border) for each edge of the element. For example, instead of using the border attribute, you can use the border left, border right, border top, and border bottom attributes to set each edge of the border independently. In fact, these attributes are also composite attributes. For example, instead of specifying border top, you can specify border top color, border top style, border top width and other attributes respectively.
Nonstandard attributes
When browser vendors implement non-standard CSS properties, they prefix the property name with a vendor prefix. Firefox uses - moz -, Chrome uses - webkit -, and IE uses - ms -, and they even use this way to implement properties that will be standardized in the future. An example is the border radius attribute, which is used to specify the fillet of the element. The prefix is used in the experimental implementation of Firefox 3 and Safari 4. Once the standard is fully mature, Firefox 4 and Safari 5 remove the prefix and directly support border radius. (Chrome and Opera have supported border radius without prefix for a long time. IE9 also supports border radius without prefix, but it is not supported even with prefix in IE 8.)
CSS attributes with different names work together in different browsers. You may find it better to define a class for an attribute:
.radius10 {
border-radius: 10px; /* For modern browsers */
-moz-border-radius: 10px; /* For Firefox 3.x */
-webkit-border-radius: 10px; /* For Safari 3.2 and 4 */
}
Define a class like this called "radius10", which can be added to any class that requires a 10 pixel fillet.
CSS example
The following example is an HTML file that defines and uses a style sheet, which illustrates the selectors for tag names, classes, and ID S, and an example of defining inline styles through the style attribute. The following shows how it is rendered in a browser.
Example: define and use cascading style sheets
<head>
<style type="text/css">
/* Specifies that the title text is displayed in blue and italics */
h1, h2 { color: blue; font-style: italic }
/*
* Any class="WARNING" element is displayed as large, bold text,
* It has a wide margin, a yellow background and a wide red border
*/
.WARNING {
font-weight: bold;
font-size: 150%;
margin: 0 lin 0 lin; /* Upper right lower left */
background-color: yellow;
border: solid red 8px;
padding: 10px; /* 4 All edges are 10 pixels */
}
/*
* class="WARNING"In addition to blue, the text in the h1 or h2 label of the element should also be displayed in the center
*/
.WARNING h1, .WARNING h2 { text-align: center }
/* id="special"The elements are capitalized and centered */
#special {
text-align: center;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Cascading Style Sheets Demo</h1>
<div class="WARNING">
<h2>Warning</h2>
This is a warning!
Notice how it grabs your attention with its bold text and bright colors.
Also notice that the heading is centered and in blue italics.
</div>
<p id="special">
This paragraph is centered<br>
and appears in uppercase letters.<br>
<span style="text-trans-Form: none">
Here we explicitly use an inline style to override the uppercase letters.
</span>
</p>