HTML--CSS style Sheets & Layouts page

CSS style sheet:

First, the role: Beautify the page, page layout.

Second, classification:

Inline, written in the body label style= "" Inside the style, the advantage is control accuracy, reusability is poor.

Embedded, embedded in the head of the Web page, reusable high external, style written in another file, if you want to use directly attached.

Priority: inline > Inline > External

Third, selector:

* On behalf of all the elements of the general page need to write this style, remove some of the label comes with the border, auto represents the center, such as: *{margin:0px auto; padding:0px; }

Tag Selector: Select the element with the name of the tag. such as: div{}

ID selector: Select the element with the ID name of the tag, preceded by the name of the ID with # such as: #d1 {}

Class selector: Select the element with the class name, preceded by the class name. such as:. a{}

Combo selector:

Side-by-side relations: separated by commas, representing juxtaposition. such as:. a1,.a2,.a3{}

Descendant relationship: separated by a space, preceded by a space, is the parent element behind it. such as: #d1 a1{}

Filter relationships: separated by dots.

Style:

1. Foreground and background

1) Foreground: Refers to text font: whether the italic font size is bold or not;

font-family: Modify font font-size: Font size font-style: Font style, italic tilt font-weight: Font weight, bold bold

Color: Font Color text-decoration: Text decoration, none can go underline text-indent: First line Indent

2) Background: background-color: Background color, background-image: Background image, Background-repeat: Tiling method, background-position: Position of background image, Background-attachment: Fixed mode of background image

3) Alignment Text-align: Horizontal Alignment Center Center, vertical-align: Vertical alignment middle center top bottom Bottom line-height: Row height

Note: Before you set the vertical alignment, you must first set the line height

2. Borders and Borders

Border: border: Width style color; border-width:1px; Border-style:solid; Border-color: #F00;

Note: Border-width;border-style;border-color must be set at the same time

Margins: margin: top right lower left; Margin-top: Top margin margin-right: Right margin margin-bottom: Bottom margin margin-left: Left margin

padding: padding: upper right lower left; Padding-top: Inner top margin padding-right: Inside right margin padding-bottom: Inside bottom margin padding-left: inside left margin

3. List and square width: width height: height

List-style: Position type picture; List-style-type: List-marked style, none removed, list-style-image: List picture, list-style-position: Position of List style

4. Format layout

Position location:

Absolute absolute position, relative to the location of the browser boundary;

The relative position of the relative relative to where it should have appeared.

Fixed: fix position, it does not scroll with.

After setting the position, you can use the top right bottom the left of the four styles.

float: flow, flow layout.

Two ways: Left flow right flow

If you want to add something behind the stream, truncate the stream: Clear:both--<div style= "Clear:both" ></div>

Z-index: The larger the value, the higher the upper

5. Other

Display:none Hide (not occupy space, equivalent to remove); block display

Visibility:hidden Hidden (but occupying space, occupying a position); visible display

The difference between display and visibility is that the display hides the same element, and the visibility hides the position of the element, but the content is hidden.

Overflow: Out of range ... Hidden out of hiding (no occupying position); Scroll out of scroll bar

Cursor:pointer; Mouse on display (small hands)

Hover: Is not a style, with the ID of the element or class, followed by a colon hover, which represents the mouse on this element to show which styles

Such as

6. Hyperlink style:

<style type="text/css">a:link-- general link {    color:blue;} a:visited-- visited link format {    color:green;}
a1:hover--set the form when the mouse points to the link

{

Cursor:pointer;

Background-color: #FFF;

Text-decoration:underline;

}

7. Translucent effect (filter):

class= code in"box"> Transparent area </div>    // style . box{    opacity: 0.5 ;     -moz-opacity:0.5;    Filter:alpha (Opacity=)}

Here is the layout of a Web page

<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/><title> Untitled Document </title><style type="Text/css">--embedded, High reusability*--represents all {margin:0px auto;--margin, auto means Auto center padding:0px;--Inner margin font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;--Font} #top {width: -%;--wide height:80px;--High} #tmenu {width: -%;    height:60px; margin:20px 0px 20px 0px;} #tb {width:54.8%;    height:60px; float: left;--flow left padding:0px 0px 0px3.2%;} #menu {width: the%;    height:60px; float: Left;}    #tb img{width:131px; height:60px;}    #menu1 {margin:0px 25px 0px 15px;    width:342px;    height:60px; float: Right;} #menu1 div{float: Left;    height:40px;    margin:20px 15px 0px 15px; Line-height:60px; Vertical-Align:bottom; color:#999999; Font-size:14px;} #menu1 div:hover{color:# the; Cursor:pointer;} #mmenu {width: -%;    height:50px; Background-color: #f8f8f8; Border-top:1px solid #e7e7e7; Border-bottom:1px solid #e7e7e7;} #mmenu div{float: Left;    height:50px; Margin-left:30px; color:#999999; Font-size:14px; Line-height:50px; Vertical-Align:middle;} #mmenu div:hover{color:# the; Cursor:pointer;} #mmenu img{margin:14px 14px 14px 0px;} #img {width: -%;    height:600px; Background-image:url (national%20university%20of%20singapore% --%20home_files/nuss-ragday2015.jpg); Background-repeat:no-repeat; Background-Position:center; Background-size: -%600px;} #imgn {width: -%; Margin-top:1px;} #imgn div{Width: -%; float: Left; Overflow:hidden;} #imgn img{margin:0px 0px 0px 1px;}</style>"width:100%;">--inline, reusability is poor<!--top menu--><div id="Top"> <div id="Tmenu"> <div id="TB"> "National University of Singapore-home_files/logo.png"/>--Image Link</div> <div id="Menu"> <div id="menu1"> <div>News</div> <div>Email</div> &LT;DIV&GT;LIBR ary</div> <div>Student</div> <div>Staff</div> </ Div> </div> </div></div><!--menu--><div id="Mmenu"> <div style="margin-left:35px;">Home</div> <div>Admissions</div> <div>Education</div> <div>research</d iv> <div>About</div> <div>Giving</div> <div style="float:right;margin-right:25px;">"National University of Singapore-home_files/sousuo.png"/></div></div><!--Pictures--><div id="img"></div><div id="IMGN"> <div style="margin-right:-1px">"margin-left:0px;"Src="National University of Singapore-home_files/scrolls.jpg"/></div> <div>"National University of Singapore-home_files/save_sya-1.jpg"/></div> <div>"National University of Singapore-home_files/iaus.jpg"/></div> <div>"National University of Singapore-home_files/nus110-blue.jpg"/></div></div></div></body>
HTML--CSS style Sheets & Layouts page