HTML + CSS style settings-CSS will be used once you learn, css will be used once you learn

Source: Internet
Author: User

HTML + CSS style settings-CSS will be used once you learn, css will be used once you learn

HTML + CSS style settings

CSS :( Cascading Style Sheets) cascade Style settings table.

The Display Effect of a webpage is closely related to its layout. CSS is used to set and adjust the layout.

The following describes the process of joint use of CSS and HTML:

(1) create a CSS file (usually placed in the css folder in the same path as the HTML file ).

(2) In the HTML

<Link rel = "stylesheet" type = "text/css" href = "file address/css file name .css"/>.

(3) write the style setting code in the CSS file based on the HTML Tag or identifier.


CSSBasic syntaxSelector, Property, and Value)

The code format is: selector {property: value }.


MainSelector: Tag tags (html tags), class Identifiers (custom), and id Identifiers (custom)

Selector syntaxIs:

(1) tag tags are directly followed by {}, such as body {}, table {}, p {}, and font.

(2) Class Identifier, in the form of ". identifier {property: property value;}", for example,. xs {color: blue ;}.

(3) id Identifier, in the form of "# identifier {property: property value;}", for example, # xs {color: blue ;}.

Supplement: When the tag selector is used, if multiple tags have the same effect, you can write them together. Separate multiple labels with spaces and use one {} to set them. Different effects can be set separately. Example table tr td {color: red }.


HTML code:


CSS code:

/* Id Identifier · example */# all {Background-color: # F0F0F0;/* set the Background color to light gray */width: 600px; /* set the width of this forum to 600 pixels */height: 700px;/* The height is 700 pixels */}. set {/* set */text-align: center for 1st rows and 1st columns;/* center text */font-weight: bold/* Text bold */} table {/* set the overall style of the table */width: 500px;/* set the table width to 500 pixels */height: 400px; /* Table Height: 400 pixels */}

There are four style settings: (SeeCSS features and four methods for adding a webpage)

The following are commonly used:

(1) directly write in the tag, such

<Table style = "border-left-width: 2px"> </table>/* set the width of the left border of the table to 2 pixels */

(2) in

<Style type = "text/css"> p {text-align: center;}/* set the text center of the p tag */</style>

(3)save as an external .css file and use the <link/> statement to reference it. Example

      <link rel=”stylesheet” type=”text/css” href=”css/setTable.css” /> 

The sample table settable.css file is placed in the css folder.

For details about CSS processing results, we recommend that you[Proficient in DIV. CSS webpage style and layout]. He Li. HD scan version with directory

Related Article

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: 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.