首頁 > 開發者 > JavaScript
Web前端學習——CSS，web前端css
一、CSS簡介
CSS全稱cascading style sheeding，層疊樣式列表。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
二、CSS組成
1、選取器
（1）標籤選取器
<head> <style> p{ background-color: green; height: 48px; } </style></head><body> <p>中國人</p></body>
（2）ID選取器
<head> <style> #i1{ background-color: blue; height: 48px; } </style></head><body> <div id="i1"> 中國人 </div></body>
（3）class選取器
<head> <style> .c1{ background-color: yellow; height: 48px; } </style></head><body> <div class="c1"> 中國人 </div>
</body>
（4）關聯選取器（層級選取器，空格）
類似span標籤裡的p標籤的樣式，也可以是id,class,標籤等組合
<head> <style> span p{ background-color: darkorchid; height: 48px; } </style></head><body> <p>中國人</p> <span> <p>中國人</p> </span> <p>中國人</p></body>
（5）組合選取器(逗號)
<head> <style> .c1,.c2,.c3{ background-color: yellow; height: 48px; } </style></head><body> <div class="c1"> 中國人 </div> <div class="c2"> 中國人 </div> <div class="c3"> 中國人 </div></body>
（6）屬性選取器
對選擇的標籤過濾後再通過屬性進行過濾
<head> <style> .cc[n="tom"]{ background-color: yellow; height: 48px; } </style></head><body> <div class="cc"> 中國人 </div> <div class="cc" n="tom"> 中國人 </div></body>
（7）資料列選取器
<body> <div style=" height: 28px;"> 中國人 </div></body>
2、link引入外部css
通過建立專屬的css檔案，在其他html匯入css檔案，從而使用css檔案的樣式
001.css內容如下：
#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; }
001.html內容如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="001.css"></head><body> <p>中國人</p></body></html>
3、優先順序
row style——>head style (按照編寫順序，自上而下優先)——> external style
4、css注釋
/* 注釋內容 */
5、背景、邊框
樣式、寬度、顏色、上下左右
<div style="border: 2px solid red ;width: 100px ;height: 20px"> 中國人</div>
##下面為邊框屬性
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可以定義如下屬性：
background-color 規定要使用的背景顏色；
background-image 規定要使用的背景映像；
background-repeat 規定如何重複背景映像；
background-attachment 規定背景映像是否固定或者隨著頁面的其餘部分滾動；
background-position 指定背景映像的位置；
<div style="background-image: url(001.jpg);border: 3px;height: 800px;"> chinese</div>
6、float
漂移，挨著站齊
<div style="border: 2px solid red ;width: 100px ;height: 20px;float: left"> 中國人</div><div style="border: 2px solid red ;width: 100px ;height: 20px;float: left;"> 中國人</div>
7、display
塊、列標籤轉換,inline、block、inline-block、none
行內標籤：無法設定高度、寬度、padding、margin
塊級標籤：設定高度、寬度、padding、margin
<body> <span style="display: block">123</span> <div style="display: inline">456</div></body>
8、padding margin
9、其他常用style屬性
width: 100px ; ##可以使用89%,邊框寬度
height: 20px ; ##可以使用89%,邊框高度
font-size:19px; ##字型大小
font-weight:bold ; ##加粗,80px,normal
font-family:'Microsoft YaHei'; ##字型樣式,
color:red; ##字型顏色
text-align:center; ##水平方向字型對齊，center/left/right
line-height:48px; ##根據div,垂直方向字型置中
background-color:red ##背景色
text-decoration ##字型裝飾
<a href="http://www.baidu.com" style="text-decoration: none">百度</a>
三、
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
