CSS (cascading style sheets)

Cascading style sheets are a computer language used to represent file styles such as HTML (an application of the standard Universal Markup Language) or XML (a subset of the standard Universal Markup Language).

CSS is currently the latest version of CSS3, is to be able to truly achieve Web page performance and content separation of a style design language. Compared to the performance of traditional HTML, CSS can control the placement of objects in the Web page with pixel-level precision, support almost all font size styles, have the ability to edit Web objects and model styles, and be able to conduct preliminary interaction design, is currently based on the best performance design language text display. CSS can be based on the understanding of different users to simplify or optimize the writing, for all types of people, have a strong legibility.

Chinese name: Cascading style sheet

Foreign Name: Cascading Style Sheets

Foreign language abbreviations: CSS (also known as file extension)

Other salutation: Cascading Style Sheets

Instance

If you want to set CSS styles in HTML elements, you need to set the "id" and "class" selectors in the element.

The ID selector can specify a specific style for an HTML element that is labeled with a specific ID.

The HTML element sets the ID selector with the id attribute, and the ID selector in the CSS is defined as "#".

The following style rules apply to element properties Id= "PARA1":

Instance

#para1 {text-align:center;color:red;}

The id attribute does not start with a number, and the ID at the beginning of the number does not work in the Mozilla/firefox browser.

Class Selector

The class selector is used to describe the style of a set of elements, which differs from the ID selector, and class can be used in multiple elements.

The class selector is represented in the HTML as a class attribute, and in CSS, the category selector takes a point "." Number display:

In the following example, all HTML elements that have a center class are centered.

Instance

. center{Text-align:center;}

You can also specify a specific HTML element to use class.

In the following instance, all P elements use class= "center" to center the text of the element:

Instance

p.center{Text-align:center;}

The first character of a class name cannot use a number! It doesn't work in Mozilla or Firefox.

Development history

CSS1

As a recommendation, CSS1 was released on December 17, 1996. This recommendation was re-revised on January 11, 1999.

CSS2

As a recommendation, CSS2 was released on January 11, 1999. CSS2 adds support for media (printers and auditory devices) and downloadable fonts.

CSS3

CSS3 plans to divide the CSS into smaller modules.

CSS specification and Timeline

Tabular data cannot be displayed temporarily

How to use

There are three ways to use style sheets on a site page:

• An linking (also called an external style): Links a Web page to an external style sheet.

• Inline embedding (also called Inner page style): Creates an embedded style sheet on a Web page.

• Inline inline (also called inline style): Applies an inline style to individual page elements.

Among them, priority: inline > Embedded > External

External style sheet

An external style sheet is an ideal choice when the style needs to be applied to many pages. With an external style sheet, you can change the appearance of the entire site by changing a file.

Internal style sheet
An internal style sheet can be used when a particular style is required for a single file. You can define an internal style sheet in the head section through the <style> tag.
inline style
Inline styles are used when special styles need to be applied to individual elements. The way to use inline styles is to use style attributes in related tags. Style properties can contain any CSS properties. The following example shows how to change the color and left margin of a paragraph.
<p style= "color:red; margin-left:20px "> This is a paragraph </p>
Layout features
For spiders crawling a site page, if there are too many garbage code, will make the search spider to its unfriendly, distrust, while the spider crawl speed will therefore slow down, for the website SEO, is a big taboo. As with the traditional table page, we need to do code optimization on the site, and that requires Css+div, and here are some of the benefits of using Css+div for code optimization.
I. Streamline the code and reduce the difficulty of refactoring.
The site uses DIV+CSS layout to make the code is very concise, I believe most friends are also slightly heard, CSS files can be called on any page of the site, and if you use table table to modify some of the page is very cumbersome. If a portal site, you need to manually change a lot of pages, and look at those tables will also feel very messy and waste of time, but using the Css+div layout only need to modify a CSS file in a code.
Two. Page access speed
Using the Div+css layout of the page compared to the table layout, a lot of streamlining the page code, the browsing speed of the natural to improve, and thus improve the user experience of the site.
Three. SEO optimization
The website with div-css layout is very friendly to the search engine, so it avoids the problem that the table nesting level is too much to be crawled by the search engine, and the concise, structured code is more advantageous to highlight the focus and fit for the search engine crawl.
Four. Browser compatibility
Div+css is more prone to multiple browser incompatibilities than table layouts, mainly because different browsers have different default values for Web standards. Domestic mainstream is ie,firefox and chrome with less, in the compatibility test, the first need to ensure that in the IE multi-version does not appear, here are some methods and techniques, can be specific problems in the site to find solutions.
Five. Css+div Web page layout often made a small error
1. Check HTML elements for spelling errors, forgetting to end tags
Even a veteran often makes a mistake about the nesting of Div's relationships. You can use the Dreamweaver validation feature to check for errors.
2. Check that the CSS is written correctly
Check to see if there are any spelling errors, forgetting the end of the}, and so on. You can use CLEANCSS to check for spelling errors in your CSS. CLEANCSS is a tool for the CSS to lose weight, but can also check spelling errors.
3. Use the Delete method to determine where the error occurred
If the error affects the overall layout, you can delete the DIV block one at a-until you delete a DIV block and the display returns to normal to determine where the error occurred.
4. Use the Border property to determine the layout characteristics of an error element
Using the Float property layout is an error when you accidentally make a mistake. The element boundary is determined by adding the border attribute to the element, which causes the error to be known.
5. The parent element of the float element cannot specify the clear property
Macie if the clear property is used on the parent element of the float element, the layout of the float elements around it is confusing. This is Macie's famous bug, if you do not know it will be a detour.
6. Float element Be sure to specify the Width property
Many browsers have bugs when displaying a float element that does not have a width specified. So regardless of the contents of the float element, be sure to specify the width property for it.
When specifying an element, use EM instead of PX as a unit.
7. Float element cannot specify attributes such as margin and padding
IE has a bug when displaying float elements that specify margin and padding. Therefore, do not specify the margin and padding properties on the float element (you can nest a div inside a float element to set margin and padding). You can also use the Hack method to specify special values for IE.
8. The sum of the width of the float element is less than 100%
If the width of the float element is exactly 100%, some old browsers will not display properly. So make sure the sum of the widths is less than 99%.
9. Do you want to reset the default style?
Some properties, such as margin, padding, and so on, can be interpreted differently by different browsers. Therefore, it is best to first set all the margin, padding to 0, the list style to none, etc. before development.
10. Have you forgotten to write a DTD?
If the results are not the same regardless of how different browsers are displayed, then you can check the beginning of the page to see if you forgot to write the DTD declaration.
Finally, it should be noted that spiders do not like a page has too many CSS code, or else will also affect the spider crawling, affecting the search engine collection, so the use of external calls to call CSS is a very good way. At the same time, if you don't have to have too many fancy sites, using CSS layouts, you can also get the results you want. such as text color changes in the site navigation, drop-down menus, and so on.
Create edits
Creating and editing CSS is more commonly used in Adobedreamweaver series software, visual editing is more conducive to web engineers to quickly create and edit CSS, the new version CS5.0, CS5.5, CS6.0, CC, including Adobe Browserlab, Used to test the compatibility of CSS against multiple browsers. Adobe Dreamweaver is an essential tool for creating and editing CSS!
FrontPage2000 contains templates that you can use to create external style sheets for your site. You can create (for example, Arcs) with a blank template or a template that already contains a style. When you save a style sheet, FrontPage will use the. CSS as the file name extension. To edit a style sheet, double-click the style sheet in the Folder list.
When you create or modify a page style, you can use the Style command on the Format menu, and FrontPage automatically creates an embedded style sheet (if it doesn't already exist) and saves the style as a class selector within the embedded style sheet.
You can use the Style dialog box to create a new class selector, modify or delete an existing class selector, or apply a CSS formatting property to a standard HTML tag such as <H1>. When you click OK to close the dialog box, FrontPage writes the formatting feature back to an external or embedded style sheet that uses the correct syntax. Alternatively, you can type the style information with the correct CSS syntax. To type the style information for the embedded style sheet, click the HTML tab in Page view mode.
If you select the Apply CSS check box for a theme that is applied to a site, FrontPage creates a file named Theme 1. CSS in the root directory of the site, where Theme is the name of the theme. If you modify the theme, FrontPage will automatically rewrite it back to the theme CSS. You can also modify the theme by editing the theme CSS directly.
Basic syntax
A CSS rule consists of two main parts: a selector, and one or more declarations.
selector {Declaration 1; Declaration 2; Declaration N}
Selectors are usually HTML elements that you need to change the style.
Each declaration consists of an attribute and a value.
The property is the style property (style attribute) that you want to set. Each property has a value. Attributes and values are separated by colons.
selector {Property:value}
The next line of code is to define the text color within the H1 element to be red, while setting the font size to 14 pixels.
In this example, H1 is a selector, color and font-size are attributes, and red and 14px are values.
h1 {color:red; font-size:14px;}
The following shows you the structure of the above code:
Different notation and units of values
In addition to the English word red, we can also use the hexadecimal color value #ff0000:
p{color: #ff0000;}
To save bytes, we can use the abbreviated form of CSS:
p{color: #f00;}
We can also use the " red-green-blue "RGB values in two ways:
p{Color:rgb (255,0,0);} p{Color:rgb (100%,0%,0%);}
Note that when RGB percentages are used, the percent sign is written even if the value is 0 o'clock. But in other cases it is not necessary to do so. For example, when the size is 0 pixels, px units are not required after 0, because 0 is 0, regardless of the unit.
A value of several words must be written in quotation marks
Tip: If the value is a number of words, enclose the value in quotation marks, and the value in Chinese is also recommended:
p{font-family: "Sansserif";}
Multiple declarations
If you want to define more than one declaration, you need to separate each declaration with a semicolon. The following example shows how to define a centered paragraph of a red text. The last rule does not require a semicolon, because the semicolon is a delimited symbol in English, not a closing symbol. However, most experienced designers add semicolons at the end of each statement, and the benefit is that when you increment or decrement a statement from an existing rule, you minimize the likelihood of errors. Just like this:
p{Text-align:center; color:red;}
You should describe only one attribute per line, which can enhance the readability of the style definition, like this:
p{Text-align:center;  Color:black; Font-family:arial;}
Spaces and case
Most style sheets contain more than one rule, and most rules contain more than one declaration. The use of multiple declarations and spaces makes it easier to edit a style sheet:
body{color: #000;  Background: #fff;  margin:0;  padding:0; Font-family:georgia,palatino,serif;}
The inclusion of spaces does not affect how the CSS works in the browser, and, unlike XHTML, the CSS is not sensitive to casing. However, there is one exception: class and ID names are sensitive to capitalization if they involve working with HTML documents.
Advanced syntax
Grouping of selectors
You can group selectors so that the grouped selectors can share the same claims. Separate the selectors that need to be grouped with commas. In the following example, we group all the header elements. All the caption elements are green.
H1, H2, H3, H4, H5, h6 {color:green;}

　　
Inheritance and its problems
Depending on the CSS, child elements inherit attributes from the parent element. But it doesn't always work this way. Take a look at the following rule:
body{Font-family:verdana,sans-serif;}

　　
According to the above rule, the BODY element of the site will use the Verdana font (if the font exists in the visitor's system).
With CSS inheritance, child elements inherit the attributes owned by the highest-level elements (in this case, the body) (these child elements such as P, TD, UL, OL, UL, Li, DL, DT, and DD). No additional rules are required, and all child elements of the body should display the Verdana font, as are the child elements of the child element. And in most modern browsers, it is true.
But that is not necessarily the case in the bloody era of browser wars, when support for standards is not a business priority. For example, Netscape 4 does not support inheritance, it ignores inheritance, and also ignores rules applied to the BODY element. Ie/windows until IE6 there is a related problem, the font style inside the table is ignored. What are we supposed to be doing?
With respect to inheritance, there is also a special place, if the 
Not all attributes can be inherited, such as CSS box model-related properties that cannot be inherited.
Is inheritance a curse?
What if you don't want the "Verdana, Sans-serif" font to be inherited by all the child elements? For example, you want the font of the paragraph to be times. No problem. Create a special rule for P so that it will get rid of the rules of the parent element:
body {Font-family:verdana,sans-serif;} TD, UL, OL, UL, Li, DL, DT, DD {font-family:verdana,sans-serif;} p {font-family:times, "Timesnewroman", serif;}
Regarding inheritance is actually a very good, very powerful function, because there is inheritance, we can write a lot less code.
Delete a style
When you use FrontPage editing, open the style file in print layout view. Format/Style command, select the style you want to delete from the Open Styles dialog box, and click Delete.
Professionals may write CSS styles in code, such as giving a content connection style inside a div block using the following statement: <div class= "ClassName", and when you want to delete the style, put the "class= ' classname '" inside the angle brackets The statement can be removed.
CSS (cascading style sheets)