Python development "frontend": CSS

Last Update:2016-11-09 Source: Internet

Author: User

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

CSS style selector

Set the Style property on the label:

<body>    <div style= "Background-color: #2459a2; height:48px;" > First floor </div>    <div style= "Background-color: #2459a2; height:48px;" > Second floor </div>    <div style= "Background-color: #2459a2; height:48px;" > Third Level </div></body>

Write the corresponding style directly in the DIV

ID Selector


Write the style into the head, named after the #, and call the corresponding style in the div with the id attribute to specify the corresponding ID name
Class selector (most commonly used)
Write the style to the head, named after the. Name, call the corresponding style in the Div.
Tag Selector
Tag Selector, set the div style, the contents of all div tags inside the body will be applied
Association selector (Hierarchy selector)
Apply styles only to the DIV tag within span, and can be nested in multiple layers
Combo Selector
Combo selector, plus, number, same style multiple naming
Property Selector
Filter matching based on attributes, only the first input tag matches the corresponding style
CSS Style reference
CSS style Precedence
If the styles do not conflict, the styles are applied, and if the style is conflicting, the style style has the highest precedence, followed by the order in which the other installations are written, the closer the priority
File Way Reference style
Define styles and save to commons.css file
. C1{background-color:red;color:white;}. C2{background-color:black;}
referencing commons.css files
<! DOCTYPE html>
　　
CSS style border
Basic border
<body>    <div style= "border:1px dotted red;" >        First layer Border    </div><!--border: Border width  solid: Border Style solid line (dotted dashed) color:red--></body>
Border other styles
<body>    <div style= "HEIGHT:48PX;    width:80%;    border:1px solid Brown;    font-size:16px;    Text-align:center;    line-height:48px;    " > Second Border </div>    <!--height:48px Border height    -<!--width:80% Width page 80%-->    <!--border: 1px solid brown border width, style, color-    <!--font-size:16px;  Font Size-    <!--text-align:center, horizontal center-    <!--line-height:48px; vertically centered--></body>
-" Click to show Effect
CSS style floating
First knowledge of float
<body>    <div style= "width:20%;background-color:red;float:left;" > Left </div>    <div style= "width:80%;background-color:black;float:right;" > Right </div></body>
-" Click to show Effect
Float test Page
-" Click to show Effect
Note: <body style= "margin:0 auto;" > Remove the gap from the top of the browser;<div style= "Clear:both" ></div> child border floats, displays the border lines of the parent border
CSS style display
Block-level labels and inline labels are converted to each other
<body>    <div style= "Background-color:red;display:inline" > Block-level </div>    <span style= " Background-color: #2459a2;d Isplay:block "> in-line </span></body>
-" Click to show Effect
Note: Display:inline is converted to inline labels, display:block to block-level labels, and Display:none not displayed
Inline Tags: Unable to set height, width, padding margin
Block-level Tags: set height, width, padding margin
<body>    <span style= "Background-color: #2459a2;d isplay:inline-block;height:50px;width:70px" > inline </span>    <div style= "Background-color:red;display:inline" > block-level </div></body>
-" Click to show Effect
Note: Display:inline-block has the properties of inline (the default number of its own) and the properties of the block (you can set the height, width, padding, margin)
CSS style margin
Margins margin
<body>    <div style= "border:2px solid red;height:70px;" >        <div style= "background-color:green;height:50px;        margin-top:25px; " ></div>    </div></body>
-" Click to show Effect
Note: margin-top:25px represents the margin, and the distance between the child border and the parent border top is 25px
Internal margin padding
<body>    <div style= "border:2px solid red;height:70px;" >        <div style= "background-color:green;height:50px;        padding-top:25px; " ></div>    </div></body>
-""  Click Show Effects
Note: padding-top:25px represents the inner margin, and the distance between itself and top within the child border is 25px
Python development "frontend": CSS

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