CSS style Sheets

CSS History

• December 1996 CSS First edition was born. • May 1998 CSS2 officially released • 2004 css2.1 released CSS3 release .... Not a time but a time period Basic concepts of CSS–css is a cascading style sheet (cascading style Sheet) the role of CSSUsed to control the appearance of the Web page, decorate and beautify the HTML tags, the implementation of the structure and form of separation.

Advantages of using Css+div

Using Css+div for Web page reconstruction relative to the traditional table page layout has the following 3 notable advantages

1: Performance and Content Separation 2: Improve page browsing Speed 3: Easy maintenance and revision – How styles are defined

selector {Style 1: Style value 1; Style 2: Style value 2; ...}

Classification of Style sheets

1, in-line style sheet

Within HTML tags, use the Style property to define CSS styles.

such as: <p style= "color: #00ffdc;" ></p>

, an inline style is a style that adds CSS to

The syntax is as follows:

<style>

/* Write CSS content here */

</style>

3. Define the CSS style sheet externally and link to a style in the page with the <link/> link tag.

Grammar:

<link href= "Style.css" rel= "stylesheet" type= "Text/css"/>

4. Define the CSS style sheet externally and link to a style in the page by importing.

Grammar:

<style>

@import URL ();

</style>

Style sheet Precedence

• Nearest principle CSS Selector• How styles are defined

selector {Style 1: Style value 1; Style 2: Style value 2; ...}

–CSS Selector • Global Selector

Set all labels to use the same style, denoted by *

Global selector Syntax: *{}

• Tag Selector

Syntax for tag selector: p{}

Class Selector

Class selector: Used to define the same style for a series of labels

Syntax for class selector:. classname{}

Define First

. Blue{color: #00000ff;}

and then reference

<H2 class= "Blue" > One-stop shop

ID Selector

Syntax for ID selector: #idname {}

Define First

#green {color: #0000ff;}

Re-reference style

<H2 id= "Green" > One-stop shop

Usage is similar to class, but note that the same ID name can only appear once in the same page

Priority and weight of selectors

• In-line >id>class>element>*

Weight

– In-line/1000

–ID/100,

–CLASS/10,

ELEMENT/1,

*/0

• Base style propertiescolor: color; Specify color values for color word names such as (red) or hex-worthy colors such as (#ff0000) or for RGB-worthy colors such as (RGB (255,0,0)); width: width; Set element width value, value is number; PX (pixel) , EM (character),% (percent), default = Auto (auto, automatically calculates width value in pixels by browser) height: height; Sets the height value of the element, the value is a number, the unit is px (pixels), EM (character),% (percent), the default value is auto (auto, The width value is automatically calculated in pixels by the browser background-color: background color; Specifies the color value for color word names such as (red) or hex-worthy colors such as (#ff0000) or for RGB-worthy colors such as (RGB (255,0,0)); Inherit: Attribute values, most properties have the attribute value meaning to inherit.

Representation of color values

• Word representation –red green blue yellow pink orange... hexadecimal notation – #ff0000 #00ff00 #0000ff #000000 #ffffff – #f00 #0f0, #00f-#000 #fff RGB Table Notation – (255,0,0) Rgba notation – (255,255,0,0.3)

CSS style Sheets