HTML+CSS style settings--css will

Source: Internet
Author: User
Tags set background

HTML+CSS style settings

CSS: (cascading style Sheets) cascading style settings table.

The display of the Web page has a great relationship with its layout. Layout is mainly based on CSS to set, adjust.

The following is the process of using CSS in conjunction with HTML :

(1) Create a new CSS file (typically placed in a CSS folder in the same path as the HTML file)

(2) in HTML tag, use <link/> to CSS To reference

<link rel= "stylesheet" type= "Text/css" href= "file address /css filename . css"/>

(3) write style setting code in CSS file based on HTML tag or identifier

the basic syntax for CSS is: selector (Selector), property,and property value ( value )

The code form is:selector{property:Value}

Main selector : Tag tag ( tag of HTML itself),class identifier (custom), and ID Identifier (custom).

The selector uses the syntax :

(1) Tag tag directly after using tag with {}, example body{},table{},p{} , font{} and so on.

(2) Class identifier, with ". Identifier { attribute : property value;}" The form, for example. xs{Color:blue;}

(3) ID identifier, with "# identifier { attribute : property value;}" The form, example #xs {color:blue;}

Add: tag tag Selector When used, if more than one label set the same effect, can be combined to write. Set multiple labels with a space separated by a {} , and the different effects can be set separately.


Example:

HTML Code:

CSS Code:

           /*id Identifier • Example */#all {background-color: #F0F0F0;/* Set background color to light gray */width:600px;/* set this section to a width of 600 pixels */height:700px;/* height of 700 pixels */}.set{/* */text-align:center;/* text to the 1th row 1th column style setting */font-weight:bold/* text bold */}table{/* style settings for the whole table */width:500px;/* Set the table width to 500 pixels */height:400px;/* table Height 400 pixels */}

There are four ways to style settings: (see CSS features and four ways to add a webpage )

The 3 common types are:

(1) write directly in the label, such as

      <table style= "border-left-width:2px" ></table>/* Set table left border width is 2 pixels */

(2) written in , the syntax is:

<style type= "Text/css" >p{text-align:center;}/* Set the text center of the p label */</style>

(3) Save as an external . CSS file, referenced by <link/> statement. Example

      
style sheetSettable.cssfiles are placed inCSSfolder.

HTML+CSS style settings--css will

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.