前端之css基础学习(更正版)
css是什么
CSS是Cascading Style Sheets的簡(jiǎn)稱,中文稱為層疊樣式表,用來(lái)控制網(wǎng)頁(yè)數(shù)據(jù)的表現(xiàn),可以使網(wǎng)頁(yè)的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。
簡(jiǎn)單的說(shuō)css的引入就是為了使得HTML語(yǔ)言能夠更好地適應(yīng)頁(yè)面的美工設(shè)計(jì)。
同時(shí)我們可以理解html與css的關(guān)系如下圖:
?
使用CSS的優(yōu)點(diǎn):
?
?
css的語(yǔ)法與注釋規(guī)則
?
?css的三種引入方式
css有三種引入方式,分別為:
內(nèi)聯(lián)式
<p style="color: red">不卑不亢不慫</p> 嵌入式
<style type="text/css">p{color: red}</style>
外部式
<link rel="stylesheet" type="text/css" href=""> 注意
三種方式都具有優(yōu)缺點(diǎn),內(nèi)聯(lián)式便于查找具體的一個(gè)標(biāo)簽修改樣式,嵌入式分離html與css,但是推薦外部式,因?yàn)榭蓮?fù)用,降低代碼量,可能會(huì)產(chǎn)生請(qǐng)求,但是可以通過(guò)技術(shù)避免,也符合軟件開(kāi)發(fā)規(guī)范,推薦使用外部式。
三種引入方式的優(yōu)先級(jí)
內(nèi)聯(lián)式>嵌入式&外部式,外部式與嵌入式的優(yōu)先級(jí)由html文件解析順序決定,后執(zhí)行的覆蓋先執(zhí)行的,也就是為什么css叫層疊樣式表的原因了。(其實(shí)是一種覆蓋現(xiàn)象,內(nèi)聯(lián)式直接在標(biāo)簽內(nèi)所以優(yōu)先級(jí)最大)
?
css選擇器
css選擇器是用于選擇需要的標(biāo)簽進(jìn)行樣式操作的工具,有很多不同形式的選擇器。
基礎(chǔ)選擇器
標(biāo)簽選擇器
顧名思義就是根據(jù)標(biāo)簽進(jìn)行選擇,示例如下:
p{color: red }
ID選擇器
根據(jù)標(biāo)簽ID進(jìn)行選擇
#i1{color:red; }
類選擇器
根據(jù)自定義的類進(jìn)行選擇,同時(shí)一個(gè)標(biāo)簽中可以使用多個(gè)類,通過(guò)類選擇器我們可以實(shí)現(xiàn)一個(gè)類操作多個(gè)標(biāo)簽的功能。
如何玩好類選擇器,提取類中的公共類,實(shí)際就是一個(gè)降低代碼冗余的過(guò)程,提高頁(yè)面加載速度,寫(xiě)更少的代碼,實(shí)現(xiàn)同樣的功能。
.active{color:red; }
css高級(jí)選擇器
后代選擇器
后代選擇器,顧名思義就是當(dāng)前選擇器的后代選擇,只要是后代就可以被選擇,沒(méi)有代數(shù)限制,各個(gè)基礎(chǔ)選擇器直接用空格連接。
div a{color:red; }
子代選擇器
選擇當(dāng)前基礎(chǔ)選擇器的下一代的選擇器,之間用>連接。
div>a{color:red; }
組合選擇器
組合選擇器將不同的基礎(chǔ)選擇器進(jìn)行并列選擇,使用,連接。
div,a,p{color:red; }
交集選擇器
設(shè)置兩個(gè)基礎(chǔ)選擇器之間的樣式,直接連接。
?
偽類選擇器
偽類選擇器是用于標(biāo)簽狀態(tài)的選擇器,圖中已做詳細(xì)說(shuō)明。
其中hover不止適用于a標(biāo)簽,也能使用在其他任何標(biāo)簽。同時(shí)偽類選擇器也可以與其他選擇器一起使用
css的繼承性
css中也具有繼承性,例如body下設(shè)置的樣式可以在其他標(biāo)簽中生效,但是不是所有繼承,具體可以通過(guò)瀏覽器的控制臺(tái)查看屬性是否高亮進(jìn)行判斷,高亮則是繼承的。
css選擇器權(quán)重
權(quán)重是用于判斷使用哪個(gè)樣式的計(jì)算方法,永不進(jìn)位。
? 注意
在權(quán)重中,繼承的權(quán)重接近于0,低于其他權(quán)重,示例代碼如下:
?
? 一個(gè)!important的問(wèn)題:!important改變的只是當(dāng)前所在那一行的屬性,其余仍舊遵循權(quán)重規(guī)則。
css字體屬性
font-family
font-family是字體的類型屬性,比如宋體、黑體等,可以填寫(xiě)很多備選字體,瀏覽器會(huì)依次查找本機(jī)電腦安裝的字體,從而進(jìn)行展示。
font-size
font-size是字體大小的屬性,通常用px表示大小,谷歌瀏覽器中默認(rèn)為16px,px是像素,是一種點(diǎn)陣的概念
color
color是字體的顏色屬性,通常有3種表示方式:英文法,rgb(255,255,255) & rgba(255,255,255,.5),16進(jìn)制法(其實(shí)就是rgb換算成16進(jìn)制的結(jié)果#FFFFFF)。
font-style
字體的樣式,正常或者斜體的樣式,斜體的屬性為italic
font-weight
font-weight屬性用于設(shè)置字體的粗細(xì)默認(rèn)是normal,bold是加粗。
也可使用數(shù)值進(jìn)行調(diào)節(jié),區(qū)間是100-900,400是正常值。
css文本屬性
text-decoration
文本的下劃線,刪除線,上劃線樣式的屬性,none用于清除
?
?
?text-indent
用于文本的首行縮進(jìn),可以使用em或者px單位,一般縮進(jìn)兩格推薦使用2em
文本行高、字間距、英文間距設(shè)置
?text-align
文本水平居中顯示為center,靠左為left(默認(rèn)),靠右是right
元素
元素分類
在css中元素分為三類,分別為塊狀元素、行內(nèi)元素、行內(nèi)塊元素。
塊狀元素
屬于塊狀元素的有:div, ui, ol, p, h, table, form
行內(nèi)元素
屬于行內(nèi)元素的有:a, span, em, strong, lable
行內(nèi)塊元素
?
?
?屬于行內(nèi)塊元素的有:input, img
?display屬性
display屬性用于修改標(biāo)簽的元素屬性,即塊狀元素、行內(nèi)元素、行內(nèi)塊元素。
通常的屬性為:塊級(jí)元素 block, 行內(nèi)元素 inline, 行內(nèi)塊元素 inline-block
我們可以通過(guò)display屬性修改標(biāo)簽實(shí)現(xiàn)我們所需要的功能
?
?盒子模型(重點(diǎn))
?什么是盒模型
官方說(shuō)法:
css model這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。
所有的HTML元素可以看做盒子。
它包括:外邊距、邊距、內(nèi)填充和實(shí)際內(nèi)容。
具體實(shí)例
一般塊級(jí)元素都具有盒子模型的特征,以div模型為例,如圖:
?
此圖是在控制臺(tái)的屬性圖其中有四個(gè)屬性,分別為:
1.內(nèi)容(content),是圖中最中間的部分,通常設(shè)置寬高修改的是content的寬高
2.內(nèi)邊距(padding),是邊框距離內(nèi)容的距離,修改之后視覺(jué)上感覺(jué)盒子變大,實(shí)際修改的是內(nèi)邊距。
padding的一些基礎(chǔ)用法:
?
?
3.邊框(border),是圖中黑色實(shí)線部分,也可修改邊框的寬度。可以根據(jù)方向修改邊框粗細(xì),形狀以及樣式。?
清除input默認(rèn)樣式可以使用border:0/none,點(diǎn)擊時(shí)的外邊框則是outline:0/none
?
?
4.外邊距(margin),是盒子與盒子的距離,修改可以改變盒子的位置。
margin在水平方向上的邊距是疊加的,在垂直方向上的是包含的,又稱塌陷,即取最大邊距為準(zhǔn)。
清除html的一些默認(rèn)樣式
為了是我們的網(wǎng)頁(yè)更加符合UI的設(shè)計(jì),我們通常需要將一些標(biāo)簽的默認(rèn)樣式清除,下圖是部分樣式清除的方法:
?
?
同時(shí)我們可以使用其他大牛寫(xiě)好的樣式清除CSS文件來(lái)實(shí)現(xiàn)樣式清除,比如reset.css等。
?
HTML盒子居中顯示
想要使一個(gè)盒子在另一個(gè)盒子里面居中顯示,可以使用margin:0 auto實(shí)現(xiàn)。如果是帶方向的margin-left;auto則會(huì)盒子向右移,同理其他方向的auto也是如此。
浮動(dòng)
浮動(dòng)一開(kāi)始的出現(xiàn)是為了解決文本環(huán)繞問(wèn)題,類似圖片周圍包裹著文字。現(xiàn)在多用于多元素的排版,常用屬性有:
?
關(guān)于文字環(huán)繞
在將圖片和文字都存在的頁(yè)面中。如果我們將圖片設(shè)置浮動(dòng),則文字就會(huì)包裹著圖片,形成一種文本環(huán)繞的現(xiàn)象,其實(shí)是一個(gè)文本流的問(wèn)題。
文檔流?
在html文件中,文件的解析過(guò)程是從左往右,自上而下的,也就是文檔流的解析過(guò)程。而浮動(dòng)在這里就是脫離文本流的存在,給人一種飄起來(lái)的感覺(jué)。同時(shí)也會(huì)引發(fā)一個(gè)文本塌陷問(wèn)題,根本原因就是浮動(dòng)的元素與普通元素不在一個(gè)文本流上,無(wú)法支撐一定的高度,導(dǎo)致下面的元素向上擠,從從而導(dǎo)致文本塌陷。
清除浮動(dòng)
有四個(gè)方法,具體如圖:
偽元素選擇器清除浮動(dòng)
將我們需清除浮動(dòng)的標(biāo)簽中添加該屬性,可以清除浮動(dòng),并且此方式較為友好,不改變代碼結(jié)構(gòu)。
?
?
? 通過(guò)overflow:hidden實(shí)現(xiàn)浮動(dòng)清除(添加于父級(jí)標(biāo)簽)
?
?
?BFC
目前已知通過(guò)bfc去計(jì)算浮動(dòng)的元素的高度,從而解決高度塌陷問(wèn)題。
?
?
?
?
?
?
解決兩個(gè)標(biāo)簽高度不一致的問(wèn)題
在css樣式中添加vertical-align:middle;
原理探索:
定位
定位的分類
其中靜態(tài)定位不能夠設(shè)置定位,即靜態(tài)定位是默認(rèn)狀態(tài)的定位。
?
?相對(duì)定位 position:relative
相對(duì)定位不脫離文檔流,可以調(diào)整元素。定位以該元素原來(lái)的位置為參考點(diǎn),原來(lái)位置所占區(qū)域不脫離文本流。
絕對(duì)定位 子絕父相
?
?固定定位 position:fixed
?浮動(dòng)和定位給行內(nèi)元素帶來(lái)的影響
總結(jié)一句話,只要是脫離了標(biāo)準(zhǔn)文本流的行內(nèi)元素,它的寬高就可以被修改。
z-index
該屬性用于解決不同定位元素之間的壓蓋現(xiàn)象,屬性的值為整數(shù),數(shù)值大的壓蓋數(shù)值小的元素,只能用于已經(jīng)定位的元素。
從父現(xiàn)象
如果兩個(gè)同級(jí)元素各自有自己定位的父級(jí)元素,則z-index越大的父級(jí)壓蓋另外的父級(jí),就是所說(shuō)的從父現(xiàn)象。
css背景屬性
屬性總覽
?
?
?background-position詳解
除了使用px定位,還可使用關(guān)鍵字、百分比等定位,其中百分比定位于之前的絕對(duì)定位等不同,具體為水平百分比的值 = 容器寬度的百分比 - 背景圖片的百分比
?
?示例:MIUI大圖居中顯示,代碼如下,實(shí)際應(yīng)用的代碼為注釋代碼的簡(jiǎn)寫(xiě),一般X-Y都可以用X的簡(jiǎn)寫(xiě)來(lái)實(shí)現(xiàn)。
?
?雪碧圖技術(shù)
雪碧圖技術(shù),就是將頁(yè)面中一些不隨著用戶需求而改變的類似圖標(biāo)的小圖合成一個(gè)大圖,通過(guò)定位去截取獲取圖標(biāo)的技術(shù),這樣可以減少頁(yè)面請(qǐng)求次數(shù)(因?yàn)槊恳淮谓㈡溄有枰獣r(shí)間),提高網(wǎng)頁(yè)性能。
示例代碼:
?
?快速修改背景圖的縮放比例,注意,將大圖比例縮小之后,其他定位的比例也需要等比縮小
?
?雪碧圖技術(shù)的項(xiàng)目示例中,小的選項(xiàng)的列表重合部分可以使用圖片邊框顏色調(diào)透明來(lái)實(shí)現(xiàn)不重疊的現(xiàn)象。
?
?通過(guò)border-radius實(shí)現(xiàn)圓,半圓等圖形
?
邊框陰影
可參考此網(wǎng)站:https://www.html.cn/tool/css3Preview/Box-Shadow.html
css命名規(guī)范
http://www.divcss5.com/jiqiao/j4.shtml#no3
各類元素的居中方式
行內(nèi)元素水平垂直居中
?
其中方法二是將元素設(shè)置成單元格的形式,從而實(shí)現(xiàn)居中效果的。
塊級(jí)元素水平垂直居中的方法
方法一:通過(guò)定位position加margin:auto的方法實(shí)現(xiàn),實(shí)現(xiàn)水平或者垂直只需其中兩個(gè)屬性即可。
.box1{width: 200px;height: 200px;background: green;position: relative;}.box2{width: 100px;height: 100px;background: red;position: absolute;margin: auto;top: 0;right: 0;left: 0;bottom: 0;}
方法二:通過(guò)設(shè)置單元格的模式居中,但是子元素必須是行內(nèi)塊標(biāo)簽
?
?
?
?方法三:通過(guò)設(shè)置具體像素實(shí)現(xiàn)定位,使用較多的一種方式
?
轉(zhuǎn)載于:https://www.cnblogs.com/swearBM/p/11490643.html
總結(jié)
以上是生活随笔為你收集整理的前端之css基础学习(更正版)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: CF803C Maximal GCD
- 下一篇: 一周总结(4)