Front-end Development Engineer-01. Page Creation-4th chapter. Css

4th chapter. CSSIntroduction to CSS

Cascading style Sheet Cascading style Sheets: Defining presentation styles in a page

History

CSS1 (1996)--css2 (1998)--Start CSS3 draft (split into many modules) (2001)--css2.1 Revision (2007)--Full promotion on-going (partial attributes already implemented)

How do I introduce CSS?

External style sheet: page styles are many

<link rel= "stylesheet" href= "Base.css" >

Internal style sheet: fewer styles on the page

<style>...</style>

Inline style: not conducive to maintenance, not recommended

<p style= "..." >...</p>

Syntax:

Selector {//Selector

Property1:value; Property Name: Property Value = Property declaration

Property2:value;

...

}

Comment/*...*/(not supported//)

Browser Private properties:

In order to differentiate, it is preceded by a special prefix i.e.

chrome/safari:-webkit-

firefox:-moz-

ie:-ms-

opera:-o-

In order to be compatible with different browsers, the private attributes are written before the standard is written in the last

i.e.

Property value Syntax:

margin: [<length>|<percentage>|auto] {1,4}

Basic element:<length><percentage>auto; Combo symbol: [] | ; Quantity symbol {1,4}

Basic elements:

Keywords: auto, solid, bold ...

Type:

Base type: <length><percentage><color>..

Other types: base type combination:< ' Padding-width ' > (padding-width and attribute with the same name, need to quote), <color-stop>

Symbol:/, used to split attribute values

Inherit/initial: Each property can take these two values

Combo symbol:

Spaces: Must appear, and the order must be the same

i.e. < ' font-size ' >< ' font-family ' >--Legal value: 12px Arial

&&: Must appear (order not required)

i.e. <length>&&<color>--Legal value: Green 2px/1em Blue

|| : There is at least one

underline| | overline| | line-through| | Blink--Legal value: Blink underline

|: There can only be one

<color> | Transparent--Legal value: orange/transparent

[]: Grouping action, in parentheses as a whole

bold [Thin | | <length>]--Legal value: Bold Thin/blod 2em

Quantity symbol:

None: Appears once

+: Occurs one or more times

?: appears 0 or one time

{}: The range of occurrences (included)

*: occurs 0 times or more

#: Occurs 1 or more times, the middle must be used, separated

The above is the general rule of the syntax, there is a rule called @:

@ identifier ...;

@ identifier ... {}

i.e.

@media: The device conforms to the media query condition, the style will only take effect

@keyframes: Intermediate steps to describe CSS animations

@font-face: Introducing fonts to the Web

Wait a minute

Selector Selector

Simple Selector

Tag Selector: p{...}: P is the P tag

Class Selector: Add the class attribute and the corresponding value in the tag (note: The value of class can be multiple),. Class_value {...}

classname:naming Convention letters, numbers, dashes, underscores, must start with a letter, case sensitive

ID selector: include the id attribute and the corresponding value within the tag

Similar to class selector, the difference: #id_value {...} ; unique ID;

Wildcard selector: * Select all elements within the page

Property selector:

Select the element that has a property [attribute] {...}

i.e. case Change password

<formAction="">    <Div>        <inputDisabled Type= "text"value= "Zhang San">//user cannot modify, CSS can use disabled property selector    </Div>    <Div>        <inputtype= "Password"placeholder= "Password">    </Div></form>

[Disabled] {...}

Select an element for which a property is a value [Attribute=value] {...}

i.e. [Type=button] {...}

#id即为该类属性选择器的特例

Select an element with a value for a property [Attribute~=value] {...}

i.e. [Class~=sports] {...}

. class is a special case of this class of property selectors

Select an element whose property starts with a value [Attribute|=value] {...}

i.e. [lang |= en] {...} /*lang the element with the value of en or the value starting with en */

Select an element whose property starts with a value [Attribute^=value] {...}

i.e. [href ^= "#"] {...} /*href the element whose property value begins with #/(if the attribute value is a symbol or contains a space inside, you need to use quotation marks)

Select the element with a property that ends with a value [Attribute$=value] {...}

i.e. [href $= pdf] {...} /*href attribute value ends with a PDF element */

Select the element that contains a property value for a property [Attribute*=value] {...}

i.e. [href *= "lady.163.com"] {...}

Pseudo element Selector

Combo Selector

Front-end Development Engineer-01. Page Creation-4th chapter. Css