CSS style Sheets

1. Inline style sheet

<div style="background-color: #0F3; height:100px; width:200px; ">125151678</div><span style="background-color: #F00" >span can not be changed, because it is stipulated in the beginning, how much the span uses to occupy how much </span>

2. inline style sheet

P
{background-color: #FF9;
font-size:24px;
Color: #0FF;
width:400px;
}

<p>21321231351</p>
<p>21321231351</p>
<p>21321231351</p>

3. external style sheet

Create a new CSS file to place the style sheet. If you want to call a style sheet in an HTML file, you need to right-click in the HTML file to →css the style sheet → attach the style sheet. The link connection method is generally used.

Some labels have default margins, which are usually removed when writing style sheet code (and other styles can be set), as follows:

Selector Selector

Tag Selector. Use the tag name to make the selector.

<style type= "Text/css" >

P//format works on P tags

{

Style

}

</style>

class The selector. It's all about "."   start. Border border line solid solid line line-height Row height

class="aa">1516156156156156</div>. aa{width : 300px;height:300px;border:1px;border:1px solid red;}

The ID selector. start with "#"

<div id="aa">156156165156</div>#aa/*ID Selector  */{height:100px;width:100px;background-color: #6FF; border:1px solid #F00;}

Composite Selector

(1) separated by "," to indicate juxtaposition.

(2) separated by a space, indicating descendants.

(3) filter ".".

Three, style properties

1. Background and Prospect

/* Background color, style sheet high priority */

Background-image:url (path); /* Set background picture (default) */

background-attachment:fixed; /* Background is fixed, does not scroll with the font */

Background-attachment:scroll; /* Background scrolls with font */

Background-repeat:no-repeat; /*no-repeat, uneven paved, repeat, tiled, repeat-x, horizontally tiled, repeat-y, tiled vertically */

Background-position:center; /* Background image is centered, repeat must be "no-repreat" * * When setting the background map position

Background-position:right top; /* Background map to the upper right corner (bearing can change itself) */

Background-position:left 100px top 200px; /* 100 pixels from the left, 200 pixels from the top (can be set to a negative value) */

Font

Font-family: "New song Body"; /* Font. Commonly used Microsoft Ya hei, song body. */

font-size:12px; /* Font size. Common pixels 12px, 14px, 18px. You can also use "em", "2.5em" that is: 2.5 times times the default font. You can also use percentages */

Font-weight:bold; /*bold is bold, normal is OK */

Font-style:italic; /* tilt, normal is not tilted */

Color: #03C; /* Color */

Text-decoration:underline; /* underline, overline is underlined, Line-through is strikethrough, none is remove underline */

Text-align:center; /* (Horizontal alignment) center aligned, left aligned, right justified */

Vertical-align:middle; /* (vertical alignment) is centered, top is aligned to the front, and bottom is the bottom alignment. Generally set the line height after use. */

text-indent:28px; /* First Line Indent */

line-height:24px; /* Row height. Typically 1.5~2 times the font size. */

Display:none; /*none, do not display, Inline-block, display as block, do not wrap, width height can be set, block, display as block, wrap, inline, effect with span label, do not wrap, wide height is not set. */

Visibility:hidden; /* Visibility. Hidden, hiding but occupying space; visible, showing. */

2. Borders and Borders

Border (table border, style, etc.), margin (out-of-table spacing), padding (content and cell spacing)

BORDER:5PX solid blue; /* Four border: 5 pixels wide, solid line, blue (equivalent to the following three lines) */

border-width:5px;

Border-style:solid;

Border-color:blue;

BORDER-TOP:5PX solid blue; /* Top border: 5 pixels wide, solid line, blue (write as above) */

BORDER-BOTTOM:5PX solid blue; /* Bottom border: 5 pixels wide, solid line, blue (write as above) */

BORDER-LEFT:5PX solid blue; /* Left frame: 5 pixels wide, solid, blue (write as above) *

BORDER-RIGHT:5PX solid blue; /* Right border: 5 pixels wide, solid line, blue (write as above) */

margin:10px; /* The outer border is 10 pixels wide. Auto, centered. */

margin-top:10px; /* The upper border is 10 pixels wide and the other three-side borders are similar *

margin:20px 0px 20px 0px; /* Upper-right-bottom-left, four-sided border clockwise order */

padding:10px; /* Content and border have a four-sided spacing of 10 pixels */

padding-top:10px; /* The top spacing between the content and the border is 10 pixels; other three-side spacing is similar */

padding:20px 0px 20px 0px; /* up-right-bottom-left, content and border with four-sided spacing in clockwise order */

3. List and block

width, height, (top, bottom, left, right) are only useful in the case of absolute coordinates

List-style:none; /* Cancel Serial number */

List-style:circle; /* number becomes circle, style is unordered */

List-style-image:url (image address); /* Picture do serial number */

List-style-position:outside; /* Serial number outside the content */

List-style-position:inside; /* Serial number with content together */

Iv. format and layout

1, position:fixed

Lock position (relative to the browser's location), such as the bottom right corner of some sites pop-up window

2, Position:absolute

1), the outer layer has no position:absolute (or relative), then the DIV is positioned relative to the browser

2), the outer layer has position:absolute (or relative), then the DIV is positioned relative to the outer border

3, Position:relative

Move relative to the default position.

Note: The actual position of the relative position is still the default position, just to visually move a label

4. Layering (Z-index)

Layered in the direction of z-axis, it can be understood to be divided into a stack of paper, the higher the number of layers on top.

5, Float:left,right

Overflow:hidden; To hide or scroll, to display a scroll bar;

V. Attached

1. Hyperlink style

The status of link before clicking

Visited post-click Status (same as before Click)

Hover state when hovering over a mouse

Status when active is clicked

LVHA Order

2. Translucent Effect

<div class= "box" > Transparent area </div>

Code in style sheet:

. box

{

opacity:0.5; -moz-opacity:0.5; Filter:alpha (OPACITY=50)

}

3. Shadow effect

box-shadow:2px 2px 3px Gray; (right top gradient color, respectively)

4. Transition

transition:0.7s; (transition time 0.7 seconds)

5, mouse hover

Cursor:pointer (when the pointer changes to a hand when the mouse hovers)

CSS style Sheets