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后发生了什么