"3-24" CSS style sheet categories, selectors, style attributes, formatting layouts

First, CSS style sheet classification:

(i) inline style sheets: style sheets that code is written in tags control the accuracy of code reuse with the highest precedence

Format: <p style= "style properties" > Content </p>

<div style= "Text-decoration:line-through;" > Fourth Third dollar </div>

(b) Inline style sheet: Write code in the label <style type= "Text/css" ></style>, this label is generally written in the head

Inline style sheet Code reusability good no inline exact priority second

Format: <style type= "Text/css" >

. Group name {Style Property}

</style>

(iii) External style sheet: Write css in a separate file with a suffix named. css

Connect with <link> tags in

Format: <link href= "relative path" rel= "stylesheet" >

. div1 {    width:100px;    height:150px;    background-color:red;}    <link href= "3-23 exercises. css" rel= "stylesheet"/>

Second, selector

1. Class Selector

Format:

. Class Name

{

Property Name: property value;

....}

2. ID Selector

Format:

#id名

{

Property Name: property value;

....}

3. Tag Selector

Format:

An HTML tag {

Property Name: property value;

...}

4. Composite Selector

(1) side-by-side composite: Multi-selector name and "," separated, for different labels and parallel

Cases:

. div3,.a1{    width:400px;    height:200px;    border:1px dashed black;}

(2) Descendants compound: separated by a space, applicable to different levels of the same label

Cases:

. Div1. b1 {    width:800px;    height:initial;    Font-size:5px;    Font-style:italic;    Font-family: XXFarEastFont-Xingkai;    Font-weight:bold;    BORDER:1PX solid black;}

Three, style properties

(a) Pattern size:

Width: wide;

Height: high;

(ii) Background properties: (background)

Color: Background-color:;

Picture: Background-image:url (relative path);

Tiling method: Background-repeat:no-repeat;

Scrolling: background-attachment:fixed; (fixed) scroll; (scrolling)

Image size: background-size: pixels;

Position: background-position:left; (horizontal) top (vertical);

(iii) Font properties: (font)

Size:font-size: pixel px;

Colour: color:;

Font:font-family:;

Style: font-style:oblique; (oblique body) italic; (italic) normal; (normal)

Weight: font-weight: Bold;(boldface) lighter; (fine) normal; (normal)

Modifier: text-decoration: underline;(underline) overline; (dash) Line-through; (strikethrough) blink; (flashing)

Variant: font-variant:small-caps; (small capital letter) normal; (normal)

Case: text-transform:capitalize; (capital letter) uppercase; (uppercase) lowercase; (lowercase) none; (none)

Common fonts: (font-family)

(d) Snap to align

align : text-align:justify; (justify) left; (Align right) center; (center)

Vertical alignment : vertical-align:baseline; (baseline) Sub; (subscript) Super; (subscript) top; Text-top; Middle; Bottom Text-bottom;

(need to cooperate with Display:table-cell; use)

indent : text-indent: Value px;

Row height: line-height:normal; (normal)

Word spacing word-spacing:normal; Numerical

Space white-space:pre; (reserved) nowrap; (No line break)

Display: Display:block; (block) inline; (inline) List-item; (list item) run-in; (additional) compact; (compact) marker; (mark) table; inline-table; Table-raw-group; Table-header-group; Table-footer-group; Table-raw; Table-column-group; Table-column; Table-cell; table-caption; (table title)

(v) Border border

outer boundary : margin:; Order: Upper right Down left

inner boundary : padding:;

Border format: border-style:dotted; (dot line) dashed; (dashed) solid; Double, (two lines) groove, (Groove Line) ridge; (ridge) inset; (SAG) outset;

Border width: border-width:;

Border color: border-color:#;

and Write Border : Border:border-width border-style border-color;

(vi) List blocks

ordinal image : List-style-image:url (..);

There is no list number : List-style:none;

Type: List-style-type:disc; circle circle; (circle) square; (square) decimal; (number) Lower-roman; (Small code number) Upper-roman; Lower-alpha; Upper-alpha;

Location: List-style-position:outside; (outside) inside;

(vii) Other common properties

(1)display:none;--hidden, no position reserved

visibility:hidden;--hidden, reserved location

overfllow:scoll;--scroll bar

Transparent: optacity: (0-1);

-moz-opacity: (0-1);

Filter:alpha (opacity=0-100);

Rounded corners: border-radius: pixels;

Shadow: Box-shadow: pixels (left offset) pixels (right offset) pixels (diffusion)

Supplementary retention:

A:link/* Hyperlink text Format */

a:visited/* Visited link text Format */

A:active/* Press the format of the link */

A:hover/* Mouse go to link */

Mouse cursor Style:

Link Finger cursor:hand

Cross Body Cursor:crosshair

Arrow facing down Cursor:s-resize

Cross Arrow Cursor:move

Arrow facing right Cursor:move

Add a question mark Cursor:help

Arrow facing left Cursor:w-resize

Arrow facing up Cursor:n-resize

Arrow to top right cursor:ne-resize

The arrow is facing up to the left Cursor:nw-resize

Text I type Cursor:text

Arrow Oblique Right Bottom cursor:se-resize

Arrow Oblique left Lower cursor:sw-resize

Funnel cursor:wait

Cursor pattern (IE6) p {cursor:url ("cursor filename. cur"), text;}

"3-24" CSS style sheet categories, selectors, style attributes, formatting layouts