Home > Developer > JavaScript
Web Front-end learning-CSS and web Front-end css
I. Introduction to CSS
The full name of CSS is cascading style sheeding, which is a list of stacked styles. CSS not only allows static modification of webpages, but also supports dynamic formatting of webpage elements in combination with various scripting languages.
Ii. CSS Composition
1. Selector
(1) Tag Selector
<Head> <style> p {background-color: green; height: 48px ;} </style>
(2) ID Selector
<Head> <style> # i1 {background-color: blue; height: 48px ;} </style>
(3) class selector
<Head> <style>. c1 {background-color: yellow; height: 48px ;}</style> </Body>
(4) Association selector (Level selector, space)
A style similar to the p label in a span tag can also be a combination of id, class, and label.
<Head> <style> span p {background-color: darkorchid; height: 48px ;} </style>
(5) combination selector (comma)
<Head> <style>. c1 ,. c2 ,. c3 {background-color: yellow; height: 48px ;} </style>
(6) attribute Selector
Filter the selected tags and then use the attributes.
<Head> <style>. cc [n = "tom"] {background-color: yellow; height: 48px ;} </style>
(7) Row Selector
<Body> <div style = "height: 28px;"> Chinese </div> </body>
2. link introduces external css
Create an exclusive css file and import the css file in other html to use the style of the css file.
The content of 001.css is as follows:
#i1{ background-color: blue; height: 48px; }.c1{ background-color: yellow; height: 48px; }p{ background-color: green; height: 48px; }span p{ background-color: darkorchid; height: 48px; }.cc[n="tom"]{ background-color: yellow; height: 48px; }
The content of 001.html is as follows:
<! DOCTYPE html>
3. Priority
Row style --> head style (top-down first) --> external style
4. css comments
/* Comment */
5. Background and border
Style, width, color, up/down left/right
<Div style = "border: 2px solid red; width: 100px; height: 20px"> Chinese </div>
# Border attributes
Border-top-color: red;
Border-top-style: solid;
Border-top-width: 2px;
Border-right-color: red;
Border-right-style: solid;
Border-right-width: 2px;
Border-bottom-color: red;
Border-bottom-style: solid;
Border-bottom-width: 2px;
Border-left-color: red;
Border-left-style: solid;
Border-left-width: 2px;
Border-image-source: initial;
Border-image-slice: initial;
Border-image-width: initial;
Border-image-outset: initial;
Border-image-repeat: initial;
Background can define the following attributes:
Background-color specifies the background color to be used;
Background-image specifies the background image to be used;
Background-repeat specifies how to repeat background images;
Background-attachment specifies whether the background image is fixed or scrolled along the rest of the page;
Background-position specifies the position of the background image;
<div style="background-image: url(001.jpg);border: 3px;height: 800px;"> chinese</div>
6. float
Drifting, standing close
<Div style = "border: 2px solid red; width: 100px; height: 20px; float: left"> Chinese </div> <div style = "border: 2px solid red; width: 100px; height: 20px; float: left; "> Chinese </div>
7. display
Block, line label conversion, inline, block, inline-block, none
Intra-Row Labels: the height, width, padding, and margin cannot be set.
Block-level labels: set height, width, padding, margin
<body> <span style="display: block">123</span> <div style="display: inline">456</div></body>
8. padding margin
9. Other common style attributes
Width: 100px; # 89%, Border width
Height: 20px; # 89%, border height
Font-size: 19px; # font size
Font-weight: bold; # bold, 80 PX, normal
Font-family: 'Microsoft yahei'; # font style,
Color: red; # font color
Text-align: center; # horizontal font alignment, center/left/right
Line-height: 48px; # align the vertical font of the div
Background-color: red # background color
Text-decoration # font decoration
<A href = "http://www.baidu.com" style = "text-decoration: none"> Baidu </a>
III,
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
