Web应用开发技术-CSS
HTML元素屬性分類(lèi)：
-
特有屬性
-
全局屬性(所有HTML都可以使用的屬性，如id等)
-
事件屬性
?
CSS
Cascading Style Sheet，層疊樣式表，一種樣式表語(yǔ)言，其作用是控制頁(yè)面內(nèi)容的顯示外觀效果
?
CSS樣式設(shè)置：
1.瀏覽器默認(rèn)樣式
2.外部樣式表(在文檔頭通過(guò)link元素鏈接CSS文件)
3.內(nèi)部樣式表(直接在文檔頭通過(guò)style元素指定)
4.內(nèi)聯(lián)樣式(直接在某個(gè)元素的style屬性中指定)
樣式設(shè)置的優(yōu)先級(jí)從上往下依次遞增，即內(nèi)聯(lián)樣式的優(yōu)先級(jí)最高，對(duì)于重復(fù)設(shè)置的某個(gè)樣式規(guī)則，優(yōu)先級(jí)高的將會(huì)覆蓋優(yōu)先級(jí)低的
?
除了內(nèi)聯(lián)樣式，樣式表是由若干個(gè)CSS規(guī)則集構(gòu)成，每個(gè)規(guī)則集由選擇器(Selector，選擇要設(shè)置樣式的元素)和一對(duì)花括號(hào)構(gòu)成，花括號(hào)中包含若干條聲明(Declaration即若干條具體樣式規(guī)則)，每個(gè)聲明都要以分號(hào)結(jié)尾，一個(gè)聲明內(nèi)部是由屬性名和屬性值構(gòu)成，它們以冒號(hào)分隔，如果屬性值含有空格，還需要用引號(hào)括起來(lái)
?
CSS中使用/* */括起來(lái)的為注釋內(nèi)容
?
盒子模型(Box Model)
在CSS眼中，一個(gè)占據(jù)頁(yè)面空間的HTML元素就是一個(gè)盒子，每個(gè)盒子都具有外邊距(Margin)，邊框(border)，內(nèi)邊距(Padding)，內(nèi)容(Content)這些屬性
?
CSS學(xué)習(xí)方法：熟練掌握常用樣式規(guī)則的意義和寫(xiě)法
?
文本相關(guān)樣式
color：設(shè)置文本顏色
font-size：字號(hào)，常用單位有px，em，rem
font-family：字體設(shè)置，通常使用字體列表，瀏覽器會(huì)從左向右一次匹配，直到找到系統(tǒng)中可用的字體，如果沒(méi)有找到就使用瀏覽器默認(rèn)字體
font-size：字體樣式，常用就是italic，即斜體
font-weight：字體粗細(xì)，常用就是bold，即粗體
text-decoration：文本裝飾，常用就是underline，overline，line-through
text-align：文本排列方式，常用就是left，center，right
letter-spacing：字符間距
line-height：行高
text-indent：文本縮進(jìn)
?
index 索引之頁(yè)， apache，nginx如果不指定訪問(wèn)的網(wǎng)頁(yè)，默認(rèn)情況下會(huì)訪問(wèn)index，所以才會(huì)把主頁(yè)命名為index
?
margin的使用：
? margin-top: -20px;
? margin-left: 200px;
/*margin: 50px 上下左右都為50*/
/*margin: 50px -100px 上下為50 左右為100*/
/*margin: 50px 100px 200px 上為50 左右為100 下為200px */
/*margin: 50px 100px -500px 100px 上為50 右為100 下為500px 左為100px*/
?
絕對(duì)單位：
px：像素，是多少像素就是多少像素
相對(duì)單位：
em：倍數(shù)，這個(gè)倍數(shù)是相對(duì)于父元素來(lái)計(jì)算的，其父元素是20px，那么它就是40px
rem：相對(duì)根元素(即html元素)來(lái)參考，不論其父元素的大小怎么變都不會(huì)變
?
font-*
font-size：設(shè)置字體大小，也可理解為字體的高度
font-family 設(shè)置字體，后面可以直接跟楷體，黑體等字樣，當(dāng)然需要瀏覽器安裝這種字樣。一般建議使用所有瀏覽器都安裝過(guò)的字體，因?yàn)榫退隳愕臑g覽器裝過(guò)這種字體，別人的瀏覽器沒(méi)裝過(guò)，就會(huì)顯示默認(rèn)字體，達(dá)不到你的預(yù)期期望。font-family后面可以跟多種字體，你可以把你最期望的字體寫(xiě)在最前面，其次期望的寫(xiě)在后面，別人的瀏覽器就會(huì)一次判斷有無(wú)此字體，如果有就用，都沒(méi)有就使用默認(rèn)字體
font-style：italic： 斜體
font-weight：字體的重量，例如后面跟bold即為加粗
?
text-*
text-decoration：underline 下劃線 (但一般前端工程師不會(huì)這樣做，因?yàn)橐恍┳帜溉?g等會(huì)穿過(guò)下劃線，看起來(lái)不美觀)
text-decoration：line-through 刪除線
text-align：設(shè)置文本的排列方式，后面可跟center(居中)，right(右對(duì)齊)等
letter-spacing： 設(shè)置字符間距 如 3rem 等
line-height：行高
text-indent：首行縮進(jìn)
?
設(shè)置背景
background
background: url("圖片路徑"); 設(shè)置背景圖片
后面可以跟no-repeat top 表示只要一張圖并且居中
?
link
用來(lái)連接外部CSS樣式表文件
<link rel="stylesheet" href="樣式文件(以.css結(jié)尾)" type="text/css"
?
CSS當(dāng)前最新版本為3.0，注意CSS3新增的特性并不是所有瀏覽器都支持的
?
選擇器(Selector)
-
元素選擇器：選擇指定的元素
-
ID選擇器：選擇指定ID屬性的元素
-
類(lèi)(Class)選擇器：選擇指定class屬性的元素
-
偽類(lèi)(Pseudo-class)選擇器：選擇特定狀態(tài)下的特定元素
-
偽元素選擇器(Pseudo-element)選擇器：選擇某個(gè)元素內(nèi)部的特定內(nèi)容
-
屬性選擇器：選擇含有特定屬性的元素，使用中括號(hào)將屬性名括起來(lái)
-
分組選擇器：同時(shí)對(duì)多個(gè)元素設(shè)置相同的樣式，用逗號(hào)分隔
-
后代選擇器：選擇某個(gè)元素的后代元素
-
子元素選擇器：選擇某個(gè)元素的直接子元素，使用大于號(hào)(>)分隔
-
相鄰兄弟選擇器：選擇緊鄰某個(gè)元素的下一個(gè)元素，并且它們具有相同父元素，使用加好(+)分隔
-
普通兄弟選擇器：選擇某個(gè)元素的所有兄弟元素，使用波浪線(~)分隔
擁有相同父元素的元素之間互稱兄弟
?
優(yōu)先級(jí)：ID選擇器 > 類(lèi)選擇器 > 元素選擇器
?
顯示樣式(display Style)
通過(guò)display樣式可以控制元素的顯示方式
display：block 稱為塊級(jí)元素
display：inline 在一行顯示
display：none 隱藏，元素所占的空間也不存在
visibility：hidden 隱藏，但元素所占的空間依舊存在
display：inline-block
?
定位(Position)
-
static：固定定位，靜態(tài)定位
-
fixed：基于瀏覽器窗口定位，不論瀏覽器怎么劃，它始終在那個(gè)位置
-
relative：相對(duì)定位，基于元素的正常位置定位
-
absolute：絕對(duì)定位，基于父元素定位
?
z-index：設(shè)置z軸的順序
當(dāng)兩個(gè)元素顯示位置存在交叉時(shí)，可以通過(guò)設(shè)置z順序(z-index)控制他們的呈現(xiàn)方式
?
浮動(dòng)(Float)
使用float屬性，常用屬性值為left和right
float：right 飄到最右邊
clear：both 清楚浮動(dòng)
飄起來(lái)后塊級(jí)元素會(huì)壓縮，會(huì)呈現(xiàn)在一行
?
擴(kuò)展
style屬性 全局屬性，針對(duì)body里的內(nèi)容
在發(fā)生重復(fù)時(shí)，body里的style的優(yōu)先級(jí)更高
在head中設(shè)置的style 會(huì)對(duì)body里指定的內(nèi)容都生效
一般瀏覽器的默認(rèn)字號(hào)為16px
通常情況下子元素會(huì)繼承父元素的大多數(shù)樣式，若font-size等
5.假如有多個(gè)相同元素需要設(shè)置不同的CSS樣式，那么就可以用class，示例如下：<p id="tip">azhe</p>
<p class="text">nihao!</p>
<p class="text">中國(guó)</p>
6.在CSS樣式中id的CSS名稱用#加上id，即#tip，class的CSS名稱為 .text
7.http默認(rèn)端口是80，https默認(rèn)端口號(hào)是443
8.樣式資源網(wǎng)weui框架網(wǎng)， bootstrap
9.一般CSS樣式中帶有 - 橫桿的都是為了一些瀏覽器專(zhuān)門(mén)準(zhǔn)備的
10.min-width：50px 最小的寬度
11.CSS樣式 *[id] 表示只要有id就執(zhí)行以下屬性
*[id*=stu]表示只要id屬性中含有stu就執(zhí)行其下面的屬性
12.列表樣式
list-style-type：默認(rèn)為圓形 可以跟none讓前面沒(méi)有形狀
表格
border-collapse：collapse; 合并邊框
13.對(duì)內(nèi)聯(lián)元素來(lái)說(shuō)上下內(nèi)外邊距高度寬度都無(wú)效，對(duì)塊級(jí)元素都是有效的
14.hover選擇鼠標(biāo)指針浮動(dòng)在其上的元素，并設(shè)置其樣式
15.selected 使被選中的文本成為固定的顏色
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/yanruizhe/p/11462423.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的Web应用开发技术-CSS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Web应用开发技术(3)-html
- 下一篇： 在浏览器地址栏中输入URL后发生了什么