20. CSS

Css

Cascading style sheets (cascading style Sheets).

Used to define the display HTML style.

Div and Span

A DIV is a block-level element.

Span is a row-level element.

Wrap the contents of some pages together to set the style uniformly.

CSS syntax

Characteristics: value;

Three ways to embed CSS in a page

inline style

<style= "color:red;" > This is the red word. </ Div >

In-page styles

<style type= "Text/css" > Selector {property:value;} </div>

Introducing external style sheet files

<!--Mode 1 -<Linkrel= "stylesheet"type= "Text/css"href= "Css/style.css" ><!--Mode 2 -<styletype= "Text/css">@import URL (css/style.css);</style>

Priority: The nearest principle, in-line priority and within the page, prior to the external file.

CSS Annotations

/**/

Selector Selector

Class Selector

. class Name {style attribute: value;}

<style>p.red{Color:Red} </style><!--when used -<Pclass= "Red">Class Selector</P>

ID Selector

#id名 {style attribute: value;}

<style>#id{Color:Red}</style><!--when used - <PID= "id">ID Selector</P>

Tag Selector

Tag name {style attribute: value;}

< style >     body{color:red}</style > < Body > selector </body>

Group Selector

Property 1, Property 2, Property 3 {  Style property: value;}

 <  style  >   h1,h2,h3,h5,p  { color  :   #000  ;   </ Span style= "color: #800000;" >style  >  <  H1  >  selector </ H1  >  

Descendant Selector

<style>  ul>li{list-style:none}</style><ul><li>1 </li><li>2</li></ul>

Background Selector

<style>ul a{List-style:None}</style><ul><Li><ahref= ' '>123</a></Li><Li>2</Li></ul>

Universal Selector

 <  style  >   *  { color  :   #000  ;   </ Span style= "color: #800000;" >style  >  <  H1  >  selector </ H1  >  

Pseudo-Class selectors

: Link Default style: visited clicked Style: Active tap style

Pseudo element Selector

: First-letter First Letter: First-line first line

Selector priority:!important > #id >.class > Selector

Units and values

Inheritance: It is the style of the external label that is wrapped inside the label, but border, margin, padding, background will not be inherited.

<p style= ' color:red ' > Inheritance <em> italic </em></p> display as: Inherit italic

The EM sign inherits the red of the P tag.

Display Properties: None (Hidden), blocks (block display), inline (row display), List-item (list display).

Color property: Foreground color can be RGB (100%,100%,100%), RGB (255,255,255), hexadecimal value #ffffff;, short hex #fff;

Absolute length units: in inches, cm cm, mm mm, pt lb.

Relative length unit: The EM text itself size, ex 1ex=0.5em ex half, px pixels.

Percent value: percent percent, 150% equivalent to 1.5em

Background

Background-color: Background color, transparent transparent. Background-image:url () Background image background-repeat: tiling repeat-x Landscape, repeat-y portrait, no-repeat uneven background-position: Position top, Bottom, left, right, centerbackground-attachment: Background fixed fixed fix does not scroll with screen Background:[color | image | position | repeat | Attachment] Shorthand

Text

Text-indent: Text indent, common first indent 2emtext-align: Alignment Left (Ieft), right (Starboard), Center (center), justify (both ends) White-space: Handling whitespace Normal (only one blank), pre (without whitespace), nowrap (no wrapping) Line-height: line spacing, handling the distance between document lines and rows vertical-align: Vertical alignment Baseline (baseline alignment), sub (subscript aligned), Super (superscript aligned), bottom (bottom-aligned), Text-bootom (bottom of text), Top (top-aligned), middle (Middle-aligned) word-spacing: text interval <span style= "word-spacing : 0.4em "> Widened text </span><span style=" Word-spacing:-0.4em "> narrower text </span>letter-spacing: letter Interval <s Pan style= "Letter-spacing:0.4em" >abcd</span> <span style= "Letter-spacing:-0.2em" >abcd</span> Text-transform: Text conversion uppercase (convert all uppercase), lowercase (convert all lowercase), capitalize (first letter uppercase) Text-decoration: Text decoration None (no underscore), Underline (underscore), overline (top of text), Line-through (Strikethrough), Blink (text blink)

Font

Font-famliy: Font "Microsoft Jas Black" Font-weight: Bold Bold (Coarse), Ligter (100~900) font-size: Size px, EM,%font-style: Style italic (italic), Oblique (italic) Font-variant: Morph Normal (default), Small-caps (small capital Letter) font:[Font-famliy | font-weight | font-style | font-size | Font-variant | Line-height]

List

List-style-type: List style disc (solid dots), circle (hollow Dot), square (drop block), none (None)

List-style-image: List images use pictures as symbols

List-style-position: List location inside, outside

list-style:[Type | image | position]

Boxes and Borders

Width: widths px,%, autoheight: height px,%, autopadding: Margin padding-top, Padding-right, Padding-bottom, Padding-left One-sided margin margin: boundary margin-top, Margin-right, Margin-bottom, padding-left one-sided boundary these two abbreviations padding|margin [Top|right|bottom|left] in turn Top, right, bottom, left p{margin:1px 2px} is equivalent to p{margin:1px 2px 1px 2px}border: Border Border-style: Border Style None (none), dashed (dashed line), solid (solid), dotted, Double, groove, Ridge, inset, outsetborder-width: Border width border-color: border color above three properties can be set on a single side, such as: Border-top-style:none, border-right-width:2px,border-left-color:red.border:[Width | style | color] border:1px solid #fff;

Floating and positioning

float: Floating left (floating), right (floating), Nont (None) Clear: Clear left (clearly floating), right (clear to float), both (clear All), none (unclear) when using float, you need to pay attention to the width, If the width cannot be contained in the current page, the line will be wrapped. Remember to clear the float after using the float, otherwise the following elements will also float. Position: Positioning mode static (default), relative (relative), Absolute (absolute), fixed (absolute), Inherit (inheritance) Top,right,left,bottom location. When using positioning, you can specify the location container relative in a div, and the positioning used in this container is relative to the container instead of the browser. such as bottom 1px is at the bottom of the div instead of the bottom of the browser. Overflow: Overflow handles visible (show default), Hidden (hidden), scoll (scroll bar) handling when exceeding a specified height or width z-index: The larger the display level, the higher the number, to avoid being obscured, or to deliberately obscure a block.

20. CSS