Python development [front-end]: CSS, python front-end css
Css style Selector
Set the style attribute on the tag:
<Body> <div> directly write the corresponding style in the div
Id Selector
<Head> <meta charset = "UTF-8"> <title> Title </title> <style> # i1 {background-color: #2459a2; height: 48px ;} </style>Write the style to the head and name it at the beginning of #. Call the corresponding style to specify the corresponding id name using the id attribute in the div.
Class selector (most commonly used)
<Head> <meta charset = "UTF-8"> <title> Title </title> <style>. c1 {background-color: #2459a2; height: 48px ;} </style>Write the style to the head and name it at the beginning of ".". Call the corresponding style. Use the class attribute in the div to specify the corresponding class name. Multiple div calls can be made.
Tag Selector
<Head> <meta charset = "UTF-8"> <title> Title </title> <style> div {background-color: #2459a2; height: 48px ;} </style>Tag selector. If you set the div style, the content in all div labels in the body will apply this content.
Association selector (hierarchical selector)
<Head> <meta charset = "UTF-8"> <title> Title </title> <style> span div {background-color: #2459a2; height: 48px ;} </style>Only apply the style to the div label in the span, which can be nested in multiple layers.
Combination Selector
<Head> <meta charset = "UTF-8"> <title> Title </title> <style> # i1, # i2, # i3 {background-color: #2459a2; height: 48px ;} </style>Combination selector, addition, number, multiple names with the same style
Attribute Selector
Filters and matches based on attributes. Only the first input tag matches the corresponding style.
Css style reference
Css style priority
<Head> <meta charset = "UTF-8"> <title> Title </title> <style>. c1 {background-color: red; color: white ;}. c2 {background-color: black ;}</style>File Reference Style
Define the sample and save it to the commons.css File
.c1{background-color: red;color: white;}.c2{background-color:black;}REFERENCE The commons.css File
<! DOCTYPE html> Basic border<Body> <div> other border styles<Body> <div>-> Click Show effect.
CSS style float
First glance at float
<Body> <div>-> Click Show effect.Float test page
<Head> <meta charset = "UTF-8"> <title> Title </title> <style>. pg-header {height: 38px; background-color: # dddddd; line-height: 38px ;}</style>Note: <body> <div>CSS style display
Block-level labels and intra-Row Labels convert each other
<Body> <div>-> Click Show effect.Note: display: inline is converted to intra-Row Labels, display: block is converted to block-level labels, and display: none is not displayed.
Intra-row label: the height, width, and padding margin cannot be set.
Block-level labels: Set the height, width, and padding margin.<Body> <span>-> Click Show effect.Note: display: inline-block has both the attributes of inline (the default value is the number of items you have) and the attributes of block (you can set the height, width, padding, and margin)
CSS style margin
Margin
<Body> <div>-> Click Show effect.Note: margin-top: 25px indicates the margin. The distance between the sub-border and the parent border top is 25px.
Padding
<Body> <div>-> Click Show effect.Note: padding-top: 25px indicates the padding. The distance between the subborder and the top is 25px.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
