前端修仙路之筑基(CSS篇)
??欲成完滿筑基,必須先成為凝氣十層大圓滿,否則天道筑基無望。筑基又分為分為凡道筑基、地脈筑基和天道筑基…唉…奈何文筆太爛編不下去了。不過夯實基礎,還是非常重要,本文可能對筑基以上的(基礎扎實的)大佬沒什么用,廢話不多說直接進入主題吧。更多請訪問:老陳筆記
CSS簡介
??CSS,指的是Cascading Style Sheet(層疊樣式表),是用來控制網頁外觀的一門技術。
CSS引入使用共有以下3種方式。
-
外部樣式表 語法:<link rel="stylesheet" type="text/css" href="文件路徑" />。
-
內部樣式表 語法:<style type="text/css">......</style>。
-
行內樣式表 語法:<div style="屬性:屬性值;">......</div>。
-
tips:es6 新增@import方式,不過用得非常少,這里就不介紹了。
css 選擇器
1、id選擇器;id屬性具有唯一性,也就是說在一個頁面中相同的id只能出現一次。如果出現了多個相同的id,那么CSS或者JavaScript就無法識別這個id對應的是哪一個元素。
語法:<div id="idname"></div>。在style里面用#idname{屬性:"屬性值"}控制id樣式。
2、class選擇器;class,顧名思義,就是“類”,它與C++、Java等編程語言中的“類”相似。我們可以為同一個頁面的相同元素或者不同元素設置相同的class,然后使得相同class的元素具有相同的CSS樣式。
語法:<div class="idname"></div>。在style里面用.idname{屬性:"屬性值"}控制class樣式。
3、元素選擇器;元素選擇器通常也稱標簽選擇器。
語法: 在style里面用標簽名{屬性:"屬性值"}控制標簽樣式。
4、后代選擇器;就是選擇元素內部中所有的某一種元素,包括子元素和其他后代元素(如“孫元素”)。
語法:<div class="father"><span></span><span></span></div>。在style里面用.father span{屬性:"屬性值"}控制后代樣式。
5、子代選擇器;就是選擇元素內部中所有的某一種元素,只包括子元素。
語法:<div><span></span></div>。在style里面用.div>span{屬性:"屬性值"}控制子代樣式。
6、群組選擇器;對于群組選擇器,兩個選擇器之間必須要用英文逗號(,)隔開,不然群組選擇器就無法生效。
語法:<div></div><span></span>。在style里面用.div,span{屬性:"屬性值"}控制群組樣式。
7、偽類選擇器;
字體樣式
字體CSS屬性表
| font-family | 字體類型 |
| font-size | 字體大小 |
| font-weight | 字體粗細 |
| font-style | 字體風格 |
| color | 字體顏色 |
| tips:除了字體顏色,其他字體屬性都是以“font”前綴開頭的。其中,font就是“字體”的意思。 |
- font-family可以指定多種字體。使用多個字體時,將按從左到右的順序排列,并且以英文逗號(,)隔開。如果我們不定義font-family,瀏覽器默認字體類型一般是“宋體”。
? 語法:
font-family: 字體1, 字體2, ... , 字體N;- font-size屬性來定義字體大小。
? 語法:
font-size: 像素值;??tips:font-size屬性取值有兩種:一種是“關鍵字”,如small、medium、large等;另外一種是“像素值”,如12px、16px、24px等。
- font-weight屬性來定義字體粗細。
?語法:
font-weight: 取值;tips:font-weight屬性取值有兩種:一種是“100~900的數值”;另外一種是“關鍵字”。
其中,關鍵字
| lighter | 較細 |
| bold | 較粗 |
| bolder | 很粗 |
- font-style屬性來定義字體效果。
?語法:
font-style: 取值;| normal | 正常(默認值) |
| italic | 斜體 |
| oblique | 斜體 |
- color屬性來定義字體顏色。
?語法:
color: 顏色值;tips:color屬性取值有兩種,一種是“關鍵字”;另外一種是“16進制RGB值”。除了這兩種,其實還有RGBA、HSL等。
文本樣式
?文本樣式屬性表
| text-indent | 首行縮進 |
| text-align | 水平對齊 |
| text-decoration | 文本修飾 |
| text-transform | 大小寫轉換 |
| line-height | 行高 |
| letter-spacing | 字母間距 |
| word-spacing | 詞間距 |
- text-indent屬性來定義p元素的首行縮進。(也可以用 來實現首行縮進兩個字的空格,但是這種方式冗余代碼很多。)
?語法:
text-indent: 像素值;- text-align屬性來控制文本在水平方向上的對齊方式。
?語法:
text-align: 取值;text-align屬性取值
| left | 左對齊(默認值) |
| center | 居中對齊 |
| right | 右對齊 |
- text-decoration屬性來定義文本的修飾效果
?語法:
text-decoration: 取值;?text-decoration屬性取值
| none | 去除所有的劃線效果(默認值) |
| underline | 下劃線 |
| line-through | 中劃線 |
| overline | 頂劃線 |
- text-transform屬性來將文本進行大小寫轉換。text-transform屬性是針對英文而言,因為中文不存在大小寫之分。
?語法:
| uppercase | 轉換為大寫 |
| lowercase | 轉換為小寫 |
| capitalize | 只將每個英文單詞首字母轉換為大寫 |
- line-height屬性來控制一行文本的高度。
?語法:
line-height: 像素值;- letter-spacing屬性來兩個字之間的距離。
?語法:
letter-spacing: 像素值;- word-spacing屬性來定義兩個單詞之間的距離。
?語法:
word-spacing: 像素值;邊框樣式
?邊框樣式屬性
| border-width | 邊框的寬度 |
| border-style | 邊框的外觀 |
| border-color | 邊框的顏色 |
- border-width屬性用于定義邊框的寬度,取值是一個像素值。
- border-style屬性用于定義邊框的外觀。
?border-style屬性取值
| none | 無樣式 |
| dashed | 虛線 |
| solid | 實線 |
- border-color屬性用于定義邊框的顏色,取值可以是“關鍵字”或“16進制RGB值”。
tips:一個元素的邊框可以設(上、下、左、右);上邊框border-top、下邊框border-bottom、左邊框border-left、右邊框border-right。
每個邊框還可以設獨立的樣式。
例子:
border-top-width: 1px; border-top-style: solid; border-top-color: red;還可以簡寫為:border-top: 1px solid red;
列表樣式
?列表樣式屬性
| list-style-type | 定義列表項符號 |
| list-style-image | 定義列表項圖片 |
1、對于列表,無論是有序列表還是無序列表,我們都是使用list-style-type屬性來定義列表項符號。
?語法:
list-style-type: 取值;- list-style-type屬性是針對ol或者ul元素的,而不是li元素。
ol的list-style-type屬性取值
| decimal | 阿拉伯數字:1、2、3…(默認值) |
| lower-roman | 小寫羅馬數字:i、ii、iii… |
| upper-roman | 大寫羅馬數字:I、II、III… |
| lower-alpha | 小寫英文字母:a、b、c… |
| upper-alpha | 大寫英文字母:A、B、C… |
| ul的list-style-type屬性取值 |
| disc | 實心圓●(默認值) |
| circle | 空心圓○ |
| square | 正方形■ |
| 2、去除列表項符號list-style-type: none;。 | |
| 3、list-style-image屬性來定義列表項圖片,也就是使用圖片來代替列表項符號。 |
?語法:
list-style-image: url(圖片路徑);表格樣式
?表格樣式屬性
| caption-side | 表格標題位置 |
| border-collapse | 表格邊框合并 |
| border-spacing | 表格邊框間距 |
- caption-side屬性來定義表格標題的位置。
?語法:
caption-side: 取值;?caption-side屬性取值
| top | 標題在頂部(默認值) |
| bottom | 標題在底部 |
- border-collapse屬性來去除單元格之間的空隙,也就是將兩條邊框合并為一條。
?語法:
border-collapse: 取值;?border-collapse屬性取值
| separate | 邊框分開,有空隙(默認值) |
| collapse | 邊框合并,無空隙 |
?html例子:
<table><caption>表格標題</caption><!--表頭--><thead><tr><th>表頭單元格1</th><th>表頭單元格2</th></tr></thead><!--表身--><tbody><tr><td>表行單元格1</td><td>表行單元格2</td></tr><tr><td>表行單元格3</td><td>表行單元格4</td></tr></tbody><!--表腳--><tfoot><tr><td>表行單元格5</td><td>表行單元格6</td></tr></tfoot></table>- border-spacing屬性來定義表格邊框間距。
?語法:
border-spacing: 像素值;圖片樣式
?圖片樣式屬性
| width/height | 寬/高 |
| border | 圖片邊框 |
| text-align | 圖片水平對齊方式 |
| vertical-align | 圖片垂直對齊方式 |
- width和height這兩個屬性來定義圖片的大小(也就是寬度和高度)。
?語法:
width: 像素值; height: 像素值;- border 和上面的語法一樣,只不過這里是用來定義圖片的而已。
例子:
border: 1px solid red;- text-align屬性來定義圖片水平對齊方式。
?語法:
text-align: 取值;?text-align屬性取值
| left | 左對齊(默認值) |
| center | 居中對齊 |
| right | 右對齊 |
- vertical-align來定義圖片的垂直對齊方式。
?語法:
vertical-align: 取值;?vertical-align屬性取值
| top | 頂部對齊 |
| middle | 中部對齊 |
| baseline | 基線對齊 |
| bottom | 底部對齊 |
背景樣式
?背景樣式屬性
| background-image | 定義背景圖片地址 |
| background-repeat | 定義背景圖片重復,例如橫向重復、縱向重復 |
| background-position | 定義背景圖片位置 |
| background-attachment | 定義背景圖片固定 |
- background-color屬性來定義元素的背景顏色。
?語法:
background-color: 顏色值;tips:顏色值有兩種,一種是“關鍵字”,另外一種是“16進制RGB值”。其中關鍵字指的是顏色的英文名稱,如red、green、blue等。而16進制RGB值指的是類似“#FBE9D0”形式的值。
- background-image屬性來為元素定義背景圖片。
?語法:
background-image: url(圖片路徑);tips:跟引入圖片(即img標簽)一樣,引入背景圖片也需要給出圖片路徑才可以顯示。
- background-repeat屬性來定義背景圖片的重復方式。
?語法:
background-repeat: 取值;?background-repeat屬性取值
| repeat | 在水平方向和垂直方向上同時平鋪(默認值) |
| repeat-x | 只在水平方向(x軸)上平鋪 |
| repeat-y | 只在垂直方向(y軸)上平鋪 |
| no-repeat | 不平鋪 |
- background-position屬性來定義背景圖片的位置。
?語法:
background-position: 像素值/關鍵字;tips:當background-position屬性取值為“像素值”時,要同時設置水平方向和垂直方向的數值。例如:background-position: 水平距離 垂直距離;
??當background-position屬性取值為“關鍵字”時,也要同時設置水平方向和垂直方向的值,只不過這兩個值使用關鍵字來代替而已。
??background-position屬性的關鍵字取值
| top left | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| center left | 居中靠左 |
| center center | 正中 |
| center right | 居中靠右 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
- background-attachment屬性來定義背景圖片是隨元素一起滾動還是固定不動。
?語法:
background-attachment: 取值;?background-attachment屬性取值
| scroll | 隨元素一起滾動(默認值) |
| fixed | 固定不動 |
超鏈接偽類
?在CSS中,我們可以使用“超鏈接偽類”來定義超鏈接在鼠標點擊的不同時期的樣式。
?語法:
a:link{…} a:visited{…} a:hover{…} a:active{…}tips:如果一次性定義4個偽類的話,必須按照“link、visited、hover、active”的順序進行,不然瀏覽器可能無法正常顯示這4種樣式。
瀏覽器鼠標樣式
?在CSS中,我們可以使用cursor屬性來定義鼠標樣式。
?語法:
cursor: 取值;cursor屬性取值在實際開發中我們一般只會用到3個:default、pointer和text,其他的很少用得上。
tips:除了使用瀏覽器自帶的鼠標樣式,我們還可以使用cursor屬性來自定義鼠標樣式。
?語法:
cursor: url(圖片地址), 屬性值;盒子模型
?每個元素都可以看成一個盒子,盒子模型是由四個屬性組成的:content(內容)、padding(內邊距)、margin(外邊距)和border(邊框)。
?盒子模型組成部分說明
| content | 內容,可以是文本或圖片 |
| padding | 內邊距,用于定義內容與邊框之間的距離 |
| margin | 外邊距,用于定義當前元素與其他元素之間的距離 |
| border | 邊框,用于定義元素的邊框 |
浮動布局
?可以用float屬性來實現文字環繞圖片的效果。
?語法:
float: 取值;float屬性取值只有2個,非常簡單;如下:
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| tips:浮動會影響周圍元素,并且還會引發很多預想不到的問題。在CSS中,我們可以使用clear屬性來清除浮動帶來的影響。 |
?語法:
clear: 取值;?clear屬性取值
| left | 清除左浮動 |
| right | 清除右浮動 |
| both | 同時清除左浮動和右浮動 |
定位布局
?定位布局共有4種方式,這4種方式都是通過position屬性來實現的。
?語法:
position: 取值;?position屬性取值
| static | 靜態定位(默認值) |
| fixed | 固定定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
- 固定定位,指的是被固定的元素不會隨著滾動條的拖動而改變位置。
tips:固定定位;position:fixed;是結合top、bottom、left和right這4個屬性一起使用的。其中,position:fixed使得元素成為固定定位元素,接著使用top、bottom、left和right這4個屬性來設置元素相對瀏覽器的位置。
- 相對定位,指的是該元素的位置是相對于它的原始位置計算而來的。
tips:相對定位;position:relative;也是結合top、bottom、left和right這4個屬性一起使用的,其中,position:relative;使得元素成為相對定位元素,接著使用top、bottom、left和right這4個屬性來設置元素相對原始的位置。
- 絕對定位;給一個元素加上絕對定位,那么這個元素就完全脫離文檔流了,絕對定位元素的前面或后面的元素會認為這個元素并不存在,此時這個元素浮于其他元素上面,已經完全獨立出來了。
tips:絕對定位;position:absolute;是結合top、bottom、left和right這4個屬性一起使用的,其中position:absolute使得元素成為絕對定位元素,接著使用top、bottom、left和right這4個屬性來設置元素相對瀏覽器的位置。
trick:一般相對定位和絕對定位搭配起來使用的最廣泛;例如:把一盒子居中,可以給父盒子加相對定位,子盒子加絕對定位,也就是所謂的子絕父相。
總結
以上是生活随笔為你收集整理的前端修仙路之筑基(CSS篇)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Python 简易实现 base64 编
- 下一篇: CentOS7下宽带连接