Home > Developer > CSS

CSS learning experience

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I have been engaged in Web development for a long time, have done many projects, and have done countless daily development tasks. However, I only focus on understanding requirements and system design, however, I pay little attention to the presentation of web pages. In case of page problems, I often hand over to my colleagues in the UED department to handle them. In the long run, I have also developed inertia, regardless of the size of the page, the problem is solved by them, which not only affects the efficiency of their work, but also brings a lot of trouble to the UED colleagues. Work in the past few days is not very tight.

There are three ways to insert a style sheet:
External style sheet:

  1. <LINK rel = "stylesheet" type = "text/CSS" href = "mystyle.css"/>

Internal style sheet:

  1. <Head>
  2. <Style type = "text/CSS">
  3. HR {color: Sienna}
  4. P {margin-left: 20px}
  5. Body {background-image: URL ("images/back40.gif ")}
  6. </Style>
  7. </Head>

Inline style:

  1. <P style = "color: Sienna; margin-left: 20px">
  2. This is a paragraph
  3. </P>

Their priorities are from low to high. When the three styles exist simultaneously, the inline styles have the highest priority.
CSS
The syntax generally has the following forms: selector, attribute, and value: Selector {property:
Value}. If the value is a number of words, enclose the value with quotation marks, for example:

  1. P {text-align: center; color: black; font-family: Arial ;}

We have grouped all the title elements, such:

  1. H1, H2, H2, H3, H5, H6 {color: green ;}

We can also use the derived selector to limit the scope of the style, such:

  1. Li strong {font-style: italic; font-weight: normal ;}


Its function scope is: The style takes effect only when the <strong> label is included in the <li> label.
Id selector: Use # To define a style, for example:

  1. # Red {color: red ;}
  2. # Green {color: green ;}

Reference as ID on the page

  1. <P id = "red">
  2. This paragraph is red.
  3. </P>
  4. <P id = "green">
  5. This section is green.
  6. </P>

There are also several forms such:

  1. # Sidebar P {
  2. Font-style: italic;
  3. Text-align: right;
  4. Margin-top: 0.5em;
  5. }
  6. Div # sidebar {
  7. Border: 1px dotted #000;
  8. Padding: 10px;
  9. }

In CSS, the class selector is displayed with a dot:. Center {text-align: Center}, for example:

  1. <H1 class = "center">
  2. This heading will be center-aligned
  3. </H1>

You can also use it with the derivation tool:

  1. . Fancy TD {
  2. Color: # f60;
  3. Background: #666;
  4. }
  5. TD. Fancy {
  6. Color: # f60;
  7. Background: #666;
  8. }

Bytes

There is also a good video site, there is time to see or good http://www.caopeng.org/

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More