Cascading Style Sheets CSS



1. What is a cascading style sheet
CSS is the display of the style of the Web page to control
2. Several ways to set up CSS
Inline style sheets (inline styles)
Set the Style property of a label
When using inline style sheets, the html4.01 standard recommends adding the following
<meta http-equiv= "Content-style-type" content= "Text/css" >
Cause: New versions of HTML can be used not only with CSS but also in other ways, such as using TEXT/SML to control how XML is displayed in HTML

    Cons: Settings are required in each label, and inline style sheets work on all media
  embed style sheets
    define in     <stype type= "text/css" media= "screen,projection";
    <!--   : Prevent browsers from not supporting CSS
     p{}
   -->   : Prevent browsers from not supporting CSS
    </style>
    the basic format for each style rule defined in the <style></style> label pair is as follows:
    selector{property:value;property:value; ...}
    Selector: When you define a style rule, you must develop page elements that are affected by this rule, and
    page elements defined in a rule are selector (selectors). That is, the page element that selects the style rule
    property: Specifies the name of the style to be modified, that is, CSS properties, such as color
    Value: Values assigned to property, that is, CSS attribute values
   
    Cons: Write on each page

External style sheet
<link rel= "StyleSheet" href= "Test.css" type= "text/css" media= "screen" ></link>
The type and media properties are optional
The external style sheet, saved in the buffer, can speed up the loading of the Web page

Advantage: can make the webpage thin body

Input style Sheet
You can use the CSS @import declaration to input an external style sheet (CSS file) into a CSS file, the input CSS
The style rule definition statements in the file become part of the CSS file that you enter.
You can also use the @import declaration to enter a CSS file into the <style></style> tab of the Web page, the input CSS file
The style rule definition statement becomes the statement in the <style></style> label pair.

The example statement using the @import declaration is as follows:
<style type= "Text/css" media= "Screen,projection" >
<!--
@import url ("Http://www.it315.org/style.css");
p{}
CSS defined in this page, if it conflicts with the input style sheet (same), the style of this page overrides the style in the input style sheet

       -->
      </style>

3. Style rule selector
  HTML selector:html tag
  Class selector:
    To divide the individual page elements created by an HTML tag into categories, you need to set the class property of the HTML tag to a different value
    <p class= "Stop" > PARAGRAPH1 </p
    <p class= "worning" > Paragraph1 </p>
    <p class= "Normal > PARAGRAPH1 </p>
  in a style sheet, you can define style rules for each category of an HTML tag
    <style>
       p.stop{color:red}
      P.worning{color:yellow}
       P.normal{color:green}
    </style>
  in the style sheet, You can define style rules for all HTML tags for a category:
    <style>
     . Blueone (color: Blue)
    </style>
    
   

    <p class=" Blueone "> Blue paragraph </p>

ID Selector
The id attribute is used to define a particular HTML element, and only one element in a Web page file can use an id attribute value
ID selector is to select an HTML element that has an id attribute value for the style rule definition statement.

<SAPN id= "Yellowone" >terst</span>
In the style sheet, the element style rule definition statement for HTML with ID value Yellowone is as follows:
<style>
#yellowone (Color:blue)
</style>

Association Selector
An association selector is a string that consists of two or more single selectors separated by a space
For example: P EM {Background:yellow}
The "P EM" is the association selector, which indicates that the accent text in the paragraph (the contents of the <em></em> label pair) has a yellow background,
and the emphasis text that appears elsewhere is unaffected.

The selection of a style rule defined by an association selector is higher than the precedence of a style rule defined by a single selector, even if the
The following style rule is defined in the later part of P Em{background:yellow}: Em{background:green}
However, the accent text defined in paragraph label <p> still uses a yellow background

Combo Selector
To reduce the repeating declaration of a style sheet, you can combine several selectors in a style rule definition statement, separated by commas (,) between each selector
For example: h1,h2,h3,h4,h5,h6,td{color:red}

Pseudo element Selector
A pseudo-element selector is a way of defining the various states of the same HTML element and part of the content that it contains.
For example, for the normal state of the hyperlink label <a>, the status that you have visited, the state that you selected, the cursor moves to the status on the hyperlink text,
For the first and first lines of a paragraph, you can use the pseudo element selector to define it.
Use pseudo-elements as the selector's style rule definition:
HTML: Pseudo-element {attribute: value}
Common Pseudo-elements:
A:active status when a hyperlink is selected
A:hover the cursor moves to the state on the hyperlink
A:link Normal status of hyperlinks (before any action)
a:visited the status of hyperlinks visited
P:first-line the first line of text in a paragraph
P:first-letter the first letter in a paragraph
The format that class selectors use with pseudo elements:
HTML element. Class Name: pseudo element {attribute: value}

4. Comments on style rules
CSS has a very large number of style attributes, which can be broadly divided into the following categories:
Font, background, text, location, layout, edge, list, other

5. Detailed style properties
Filter (CSS filter)

Cascading Style Sheets CSS