CSS for a look at!!!

Last Update:2018-09-03 Source: Internet

Author: User

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

Introduction to CSS

CSS (cascading style sheet, cascading style sheets): In order to let the content of the Web page of the core style separation;
When the browser reads a stylesheet, it formats (renders) the document according to the style sheet;

CSS Syntax

- A CSS style consists of two components: a selector and a declaration, and a declaration that includes attributes and attribute values, ending with a semicolon;
- H1 (selector) {color (attribute): red (value); font-size:14px;}

CSS Introduction Method:

Inline style: Set CSS styles in the properties of the tagged style, not recommended for mass use
```
<style= "color:red">Hello World. </ P >
```
Internal style: Embedded CSS style set in the

<style>Body{margin:0;font-family:Ebrima,helvetica,sans-serif;        }. Topnav{Overflow:Hidden;Background-color:Aquamarine;        } </style>

External style: The CSS is written in a separate file, and then introduced in the page;

<Head>    <MetaCharSet= "UTF-8">    <title>Mishopping</title> <link  rel= "stylesheet"  href= "Object.css"> # Use link here to import     </Head>

CSS Selector

Basic selector: priority (inline style -1000 >> ID selector -100 >> class selector -10 >> element selector (1))
- Element Selector
- ```
Div{color: "Red";}
```
- ID Selector
- ```
HTML: <    = ' C1 ' ></div > CSS: #c1 {backgroud-color:red;} 
```
- Class Selector
- ```
HTML: <   = ' C1 ' ></div > css:.c1 {font-size:14px;}    div.c1 {  color:red;}
```
  Note: The style class name does not start with a number (some browsers do not recognize) the class attribute in the label if there are more than one, separated by a space;
- Universal Selector: * No.

Combo Selector
- Descendant selector: Search for descendants of parent tags
- ```
Div    a{color:green;} #在HTML文件中, all the a tags under the div tag will be found;
```
- Son selector: Only the next generation can be found, and all of the next-generation peers will be searched.
- ```
div>p {color:red;} All p tags at the next level of all div will be found;
```
- Adjacent selector: next to the front label, no other labels in the middle
- ```
div+p {margin:5px} just look closely next to the DIV tag there is no P tag;
```
- Brother selector: A bit higher than the adjacent selector, which is all the target tags under the front tab
- ```
div~p {color:Red} all sibling P tags after div
```

CSS for a look at!!!

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.

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

CSS for a look at!!!

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support