What is CSS?

What is CSS?

CSS is the abbreviation for cascading style sheets, and Chinese is called Cascading style sheets.

Attribute and property values are separated by colons, ending with semicolons.

CSS four ways to introduce:

1. in-line

Inline is the CSS style that is set in the label's Style property.

1	<div style= "..." ></div>

2. Embedded

Inline is a set of CSS styles that are written in the

1 2 3 4 5 6

... <style type= "Text/css" > ... Write CSS style here </style>

3. Import Type
Introducing a standalone. css file into an HTML file, the import uses @import to introduce an external CSS file,<style> tag is also written in the

The import will load the CSS file after the entire page has been loaded.

1 2 3 4 5 6

... <style type= "Text/css" > @import "My.css"; Note the path to the. css file here </style>

4. Link-type
Introduce a standalone. css file into an HTML file, using the <link> tag to write in the

The link loads the CSS file before the body of the page file is loaded.

1 2 3 4

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

　　

Style Application Order:

• In-line style has the highest precedence
• For the same style attributes, different style properties are rendered in a merged fashion
• The same style and the same attributes, which are rendered in the order of

!important

• Specify style rules apply top priority

1 2 3

. Nick { Color:yellow!important; }

Selector (Selector)

Basic selector:

1. Universal Element Selector

* Indicates that all labels are applied.

1	* {Color:yellow}

2. Tag Selector

Matches all elements that use div tags (can match all tags)

1	div {Color:yellow}

3. Class Selector

Matches all elements of the class attribute that contain info.

Syntax:. class name {style} (class names cannot start with a number, class names are case-sensitive.) ）

1 2	. MyColor {Color:yellow}

4.ID Selector

Using the id attribute to invoke the style, the value of the ID in a Web page is unique (it is a specification, not a rule, so there is no error).

Syntax: #ID名 {style} (ID name cannot start with a number)

1 2	#Mycolor {Color:yellow}

　　

Combo selector:

1. Multi-Element Selector

Match the H3,H4 label at the same time, separated by commas.

1 2 3

H3,H4 {color:yellow;}

2. Descendant element Selector

Matches all the P tags nested within the div tag, separated by a space.

1 2 3 4 5 6 7 8

Div p {color:yellow;} <div> <p>Nick</p> <div> <p>Nick</p> </div> </div>

3. Child element Selector

Match all div tags nested within the child P tags, separated by >.

1 2 3 4 5 6

div > P {color:yellow;} <div> <p>Nick</p> <p>Nick</p> </div>

4. Adjacent element selector

Match all of the sibling tags immediately following the div tag p, separated by + (only one can be matched).

1 2 3 4

div + p {color:yellow;} <div>Nick</div> <p>Nick</p>

　　

Property selector:

1.[title] & P[title]

Sets all label elements with the title attribute;

Sets all P tag elements that have the title attribute.

1 2 3 4 5 6 7 8 9 10 11

[Title] { Color:yellow; } P[title] { Color:yellow; } <div title>nick</div> <p title>nick</p>

2.[title=nick]

Sets all tag elements that have the title attribute equal to "Nick".

1 2 3 4 5 6

[title= "Nick"] { Color:yellow; } <p title= "Nick" >Nick</p>

3.[title~=nick]

Set all title properties with multiple space-delimited values, one of which equals "Nick" in the label element.

1 2 3 4 5 6 7

[title~= "Nick"] { Color:yellow; } <p title= "Nick Jenny" >Nick</p> <p title= "Jenny Nick" >Nick</p>

4.[title|=nick]

Sets all the title properties with multiple hyphen-delimited (hyphen-separated) values, one of the label elements with a value beginning with "Nick" .

Example: lang attribute: "en", "us-en", "EN-GB", etc.

1 2 3 4 5 6

[title|= "Nick"] { Color:yellow; } <p title= "Nick-jenny" >Nick</p>

5.[title^=nick]

Sets the property value to specify each label element at the beginning of the value.

1 2 3 4 5 6

[title^= "Nick"] { Color:yellow; } <p title= "Nickjenny" >Nick</p>

6.[title$=nick]

Sets the property value to specify each label element at the end of the value.

1 2 3 4 5 6

[title$= "Nick"] { Color:yellow; } <p title= "Jennynick" >Nick</p>

7.[title*=nick]

Sets each element in the property value that contains the specified value

1 2 3 4 5 6

[title*= "Nick"] { Color:yellow; } <p title= "Snickjenny" >Nick</p>

　　

Pseudo-Class selectors:

1. Link, hover, active, visited

• A:link (link State not visited), which defines the general link state.
• A:hover (the state on which the mouse is placed on the link) for creating visual effects.
• A:active (the state when the mouse is pressed on the link).
• a:visited (visited link status), you can see the links that have been visited.

1 2 3 4 5 6

A:link{color:black} A:hover{color:yellow} A:active{color:blue} A:visited{color:red} <a href= "#" >Nick</a>

2. Before, after

• P:before Insert content before the contents of each <p> element;
• P:after inserts content after each <p> element's content.

+ View Code

Common Properties

1. Color properties:

Color

• Hex (hex color: color: #FFFF00--abbreviation: #FF0)
• RGB (red-green-blue, use: Color:rgb (255,255,0) or Color:rgb (100%,100%,0%))
• RGBA (red-green-blue transparency, A is the value of transparency between 0~1. Usage: Color:rgba (255,255,0,0.5))
• HSL (CSS3 valid, h for Hue, s for saturation, l for brightness, usage: COLOR:HSL (360,100%,50%))
• HSLA (similar to HSL, a represents alpha transparency and 0~1 between values.) ）

Transparent

• full transparency, use:color:transparent;

Opacity

• Elements of transparency, syntax:opacity:0.5;
• property values range from 0.0 to 1.0, 0 is transparent, and 1 is opaque.
• Filter Filter properties (only for earlier IE browsers, syntax: Filter:alpha (OPACITY:20);).

2. Font properties:

Font-style: Used to specify italic text

• Normal text is displayed normally
• Italic text italic display
• Oblique text skew display

Font-weight: Setting the thickness of text

• Normal (default)
• Bold (bold)
• Bolder (equivalent to <strong> and <b> tags)
• Lighter (general)
• 100 ~ 900 Whole hundred (400=normal,700=bold)

font-size: Setting the size of the font

• Default value:medium
• <absolute-size> Optional parameter values: Xx-small, X-small, small, medium, large, X-large, Xx-large
• <relative-size> adjusts the size of the font relative to the parent tag. Optional parameter values: smaller, larger
• <percentage> percent specifies the text size.
• <length> Specifies the text size with a length value and does not allow negative values.

font-family: Font name

• Use commas to separate multiple fonts (priority backward, if the current font is not found in the system, look behind)

font: Shorthand property

• Syntax:fonts: Font size/Line height font; (font to last)

3. Text properties:

White-space: How to handle whitespace in a set element

• Normal: The default processing mode.
• Pre: Preserves spaces and does not wrap when text is out of bounds
• NoWrap: Do not preserve spaces, forcing all text to be displayed in the same line until the text ends or the BR tag is encountered
• Pre-wrap: Preserves whitespace, wraps when text touches the border
• Pre-line: Do not preserve spaces, keep text wrapping, and wrap text when it touches the boundary.

Direction: Specify the direction of the text

• LTR defaults to text orientation from left to right.
• RTL text direction from right to left.

text-align: Horizontal alignment of text

• Left
• Center
• Right

Line-height: Text line Height

• Normal default

vertical-align: Vertical alignment of the line height of the text

• Baseline default
• Sub vertical aligned subscript with the same effect as the <sub> tag
• Super vertical alignment with the same effect as the <sup> tag
• The top of the top object is aligned with the top of the container
• Aligns the top of the Text-top object with the top of the line text
• Middle element objects are aligned vertically based on the baseline
• Aligns the bottom of the bottom object with the base of the text on the line
• Aligns the bottom of the Text-bottom object with the bottom of the line text

text-indent: Text Indent

Letter-spacing: Add a space between letters

Word-spacing: Add white space between each word

Text-transform: Property controls the case of text

• Each word in the capitalize text begins with an uppercase letter.
• The uppercase definition has only uppercase letters.
• The lowercase definition has only lowercase letters.

Text-overflow: text overflow style

• Clip trim text.
• Ellipsis display ellipsis ... To represent the trimmed text.
• String uses the given string to represent the trimmed text.

+ View Code

text-decoration: The decoration of the text

• None defaults.
• Underline underline.
• The overline is underlined.
• Line-through midline.

Text-shadow: Text Shadow

• The first parameter is the left and right position
• The second parameter is the upper and lower position
• The third parameter is a blur effect
• The fourth parameter is a color
• text-shadow:5px 5px 5px #888;

word-wrap: Wrap Line

• Word-wrap:break-word;

What is CSS?