摘要:第一章宋體的介紹宋體層疊樣式表,它是宋體的縮寫(xiě),作用就是給宋體標(biāo)簽加表現(xiàn)形式樣式宋體顯示,如字體,圖片,列表,位置等。宋體在制作網(wǎng)頁(yè)時(shí)必須是背景圖宋體宋體案例
?
?
1.CSS:“層疊樣式表”,它是cascading style sheets的縮寫(xiě),作用就是給HTML標(biāo)簽加表現(xiàn)形式(樣式-顯示),如:字體,圖片,列表,位置等。
在瀏覽器中可以看到部分:
HTML:“超文本標(biāo)記語(yǔ)言”,主要作用把內(nèi)容(文字、圖片、視頻等)放入網(wǎng)頁(yè)中--結(jié)構(gòu)
CSS:“層疊樣式表”,主要作用給HTML進(jìn)行樣式的顯示,如何的布局--樣式
Javascript:“瀏覽器的腳本語(yǔ)言”,主要作用給HTML加動(dòng)態(tài)效果(特效)--行為
CSS特點(diǎn):
可以非常精準(zhǔn)的定位,定位某個(gè)或某些標(biāo)記,給這些標(biāo)記加樣式
HTML和CSS代碼分離,減少后期工作量
?
?
2.1 CSS 的基本語(yǔ)法
CSS樣式表由語(yǔ)法規(guī)則組成,由多個(gè)語(yǔ)法規(guī)則組成樣式表
一個(gè)CSS語(yǔ)法規(guī)則由“選擇器”和“聲明語(yǔ)句”組成
選擇器:如何的精準(zhǔn)定位選擇到某一個(gè)或某些HTML標(biāo)記的方法,選擇器有很多方式
聲明語(yǔ)句:就是如何去給HTML標(biāo)記加樣式的屬性和值,每個(gè)聲明語(yǔ)句用分號(hào)結(jié)束,多個(gè)聲明語(yǔ)句用花括號(hào)擴(kuò)起來(lái),這個(gè)時(shí)候就是給某個(gè)或某些標(biāo)記加這個(gè)里面的所有樣式(屬性和值)
案例:
2.2CSS的引入方式
1.?內(nèi)嵌方式:把CSS樣式表通過(guò)一對(duì)標(biāo)簽寫(xiě)在HTML文件的head標(biāo)簽中,當(dāng)成HTML的標(biāo)記來(lái)使用,一般情況都是寫(xiě)到head中,不推薦寫(xiě)到別的地方:
語(yǔ)法:
?
?? ?????語(yǔ)法規(guī)則 |
?
案例:
?
2.行內(nèi)方式:把CSS樣式成html的一個(gè)屬性來(lái)寫(xiě),如:
語(yǔ)法:
??? KKK |
案例
?
3.外鏈方式:把CSS樣式表寫(xiě)到一個(gè)以css(indx.css)為結(jié)尾的文件中,把這個(gè)文件引入到某個(gè)html文件中,當(dāng)前文件就會(huì)有CSS的效果實(shí)現(xiàn),好處:一個(gè)css文件可以給多個(gè)HTML文件使用。
語(yǔ)法:
???css文件路徑”/> |
案例:
4. @import:可以在一個(gè)CSS文件中再次引用CSS
???@import url(“要引入的文件”) |
?
?
2.3選擇器
標(biāo)準(zhǔn)選擇器:通配符選擇器,標(biāo)記選擇器,類(lèi)選擇器,id選擇器
1.?通配符選擇器
語(yǔ)法:*{color:red}
注意:通配符是選擇上所有的標(biāo)記,但是少用,ie6不兼容
案例
2. 標(biāo)記選擇器:
說(shuō)明:直接寫(xiě)標(biāo)記名來(lái)當(dāng)成選擇器來(lái)使用,選擇器那個(gè)標(biāo)記當(dāng)前這個(gè)頁(yè)面所有的都會(huì)發(fā)生改變
語(yǔ)法:標(biāo)記名{color:red}
案例
3.?類(lèi)選擇器:又稱“class”選擇器
說(shuō)明:每個(gè)HTML標(biāo)記都有一個(gè)公共屬性,class屬性配合使用的就,這個(gè)CSS屬性就是給某些某個(gè)標(biāo)記加一類(lèi)樣式
語(yǔ)法:.class屬性的值{color}
注意:類(lèi)名可以給不同的標(biāo)記加上,這時(shí)候這些標(biāo)記統(tǒng)稱為一類(lèi)
再寫(xiě)css選擇器是必須加(.)
建議不管是某個(gè)或某些標(biāo)記都是用類(lèi)的方式
?
案例:
4. id選擇器
說(shuō)明:每個(gè)HTML標(biāo)記都有一個(gè)公共的屬性id,每個(gè)id必須是唯一的
語(yǔ)法:#id的值{color:red;}
注意:id選擇器只是給一個(gè)標(biāo)記加樣式,一般用于js的動(dòng)態(tài)效果使用。
Id和class是分開(kāi)使用的,id是js使用的,class是給css使用的
案例:
復(fù)雜選擇器:多元素選擇器,后代選擇器,子類(lèi)選擇器,偽類(lèi)選擇器
5. 多元素選擇器:
說(shuō)明:把CSS多個(gè)基本選擇器進(jìn)行組合,組合成多種的選擇方式
語(yǔ)法:div,p,ul,li,class,my{color:red}
注意:大型的網(wǎng)站一般都是用多元素來(lái)替代通配符
每個(gè)選擇器都用(,)隔開(kāi)
?
6.?后代選擇器
說(shuō)明:在制作網(wǎng)站時(shí)會(huì)出現(xiàn)“嵌套”的形式,有可能是多級(jí),而且每個(gè)多級(jí)標(biāo)記相同,這個(gè)時(shí)候就可以選擇某個(gè)標(biāo)記中的某個(gè)內(nèi)容
語(yǔ)法:第一代 第二代 第三代{color:red;}
注意:如果某一代有相同的標(biāo)記,需要每代都寫(xiě)清楚
??p標(biāo)簽中不能嵌套一些塊元素
案例:
1.?子類(lèi)選擇器
說(shuō)明:就是選擇一代(或者子孫)
語(yǔ)法:父類(lèi) (選擇器)>子類(lèi) (選擇器)
案例:
?
7.偽類(lèi)選擇器
Link::默認(rèn)狀態(tài)
Hover:放上狀態(tài)
Active:當(dāng)點(diǎn)擊時(shí)的狀態(tài)(不放手)
Visited:訪問(wèn)過(guò)的狀態(tài)
語(yǔ)法: 選擇器:狀態(tài){color :red;}
?
注意:一般是默認(rèn)狀態(tài)和訪問(wèn)過(guò)的狀態(tài)設(shè)置成一樣的效果
所有的標(biāo)記都可以加偽類(lèi)選擇器
案例:
?
第三章:CSS常用的屬性
?
一:文字屬性
?
屬性名 |
描述 |
屬性值 |
Font-size |
文字大小 |
像素(px)em(倍數(shù))百分比(%) |
Font-family |
字體類(lèi)型 |
宋體,微軟雅黑,黑體等 值可以是一個(gè)或多個(gè),用逗號(hào)隔開(kāi) |
font-style |
斜體 ? |
Italic(斜體) |
Font-weight |
加粗 |
Bold(加粗)100-900 |
?
?
案例:
二:文本屬性
屬性名 |
描述 |
屬性值 |
Color |
文本顏色 |
3種 rgb(255,255,255) 十六進(jìn)制(#cccccc) 單詞(yellow) |
Text-align |
文本水平對(duì)齊方式 |
Left|center|right |
Text-decoration |
文本修飾線 |
Underline(下劃線)overline(上劃線)line-through(刪除線) none(無(wú) ) |
line-height |
行高 |
設(shè)置當(dāng)前行的高度,目的的就是讓網(wǎng)文本上下居中,高度和行高一致 |
Text-indent |
首行縮進(jìn) |
數(shù)值(px)如果是12號(hào)字,基本是翻倍 |
Letter-spacing |
字符間距 |
數(shù)值(px) |
Word-spacing |
單詞間距 |
數(shù)值:(px) |
案例:
三:尺寸使用
說(shuō)明:其實(shí)就是元素的寬和高,任何標(biāo)記元素都有寬和高
?
屬性名 |
描述 |
屬性值 |
width |
寬 |
像素(px)百分比(%) |
Height |
高 |
像素(px)百分比(%) |
Px |
像素 |
瀏覽器都是由像素點(diǎn)(顯示貞) |
注意:塊元素可以設(shè)置寬和高,行內(nèi)元素設(shè)置寬和高是不起作用的,高不設(shè)內(nèi)容自動(dòng)撐出來(lái) |
案例:
、
?
?
?
四:列表屬性
?
說(shuō)明:對(duì)ul,ol,li,dl,dt,dd進(jìn)行樣式的設(shè)置
?
屬性名 |
描述 |
屬性值 |
last-style-type |
列表的符號(hào)樣式類(lèi)型 |
None |
? |
||
List-style-type |
列表圖片 |
Url 如 list-style-type:url(../01.jpg) |
List-style-position |
列表符號(hào)的位置只對(duì)li |
Inside ?outside |
list-style |
把三個(gè)屬性的值都放到一個(gè)屬性中 |
None url ?inside 如果三個(gè)屬性都有按照上面的順序 沒(méi)有的可以不寫(xiě) ? |
?
?
?
?
?
案例
TIP:邊框
Border 粗細(xì) 樣式 顏色 如:border:1px dashed red
Border-bottom: 下邊框
?
五:背景屬性
?
屬性名 |
描述 |
屬性值 |
|||||||||
Background-color |
背景顏色 |
16進(jìn)制 |
|||||||||
Background-image |
背景圖片 |
Url |
|||||||||
Backtround-repeat |
背景平鋪方式 |
no-repeat repeat-x repeat-y |
|||||||||
Background-position |
內(nèi)景定位 |
x軸和Y軸定位 如position:left top 設(shè)置左右和上下 |
|||||||||
定位方式: 1.?單詞定位方式:left|center|right ?top|center|bottom 單詞定位可以理解為九宮格
? 2.?像素定位方式:background-position:50px 100px; ?離左邊50 離上面100 3.?百分比方式:background-position:10% 20% 離左邊 離右邊 4.?混合方式: background-position:center 100px ? |
|||||||||||
Background-attachment |
背景固定 |
Scroll(滾動(dòng) 默認(rèn))fixed(固定) |
|||||||||
Background |
簡(jiǎn)寫(xiě)形式 |
顏色 圖片 平鋪 定位固定 其中的選項(xiàng)可以不寫(xiě) |
?
案例:
精靈圖:
說(shuō)明:就是把很多的小圖片放入到一個(gè)大的背景圖中,這個(gè)圖稱為“精靈圖”。
在制作網(wǎng)頁(yè)時(shí)必須是背景圖
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?????
?
?
?
?
?
?
?
?
?
?
?
?
?
?
案例:
?
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/1598.html
摘要:前端每周清單專(zhuān)注前端領(lǐng)域內(nèi)容,以對(duì)外文資料的搜集為主,幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。它能夠?yàn)槲覀兲峁╊?lèi)似于預(yù)處理器命名空間等多方面的輔助。 前端每周清單專(zhuān)注前端領(lǐng)域內(nèi)容,以對(duì)外文資料的搜集為主,幫助開(kāi)發(fā)者了解一周前端熱點(diǎn);分為新聞熱點(diǎn)、開(kāi)發(fā)教程、工程實(shí)踐、深度閱讀、開(kāi)源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)(ID:f...
摘要:介紹背景最近和部門(mén)老大,一起在研究團(tuán)隊(duì)前端新手村的建設(shè),目的在于幫助新人快速了解和融入公司團(tuán)隊(duì),幫助零基礎(chǔ)新人學(xué)習(xí)和入門(mén)前端開(kāi)發(fā)并且達(dá)到公司業(yè)務(wù)開(kāi)發(fā)水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介紹 1. 背景 最近和部門(mén)老大,一起在研究團(tuán)隊(duì)【EFT - 前端新手村】的建設(shè)...
CSS介紹 學(xué)前端必備掌握CSS樣式,css為層疊樣式表,用來(lái)定義頁(yè)面的顯示效果,加強(qiáng)用戶的體驗(yàn)樂(lè)趣,那么如何用css到html中呢? style屬性方式 利用標(biāo)簽中的style屬性來(lái)改變顯示樣式 p標(biāo)簽 在head中加入style標(biāo)簽 p { color: #FFF000;} 鏈接方式 總結(jié)CSS 選擇器名稱 { 屬性名:屬性值; ……. } 屬性與屬性之間用 分號(hào)...
一 前言 目前在做IFE的練習(xí),初步學(xué)習(xí)到CSS內(nèi)容,所以做了總結(jié)。本博文 主要分為兩部分,第一部分介紹HTML的發(fā)展,第二部分則介紹了CSS基本概念 二 HTML的發(fā)展 2.1 語(yǔ)義化和結(jié)構(gòu)化的重要性 S1 便于搜索引擎建立內(nèi)容索引;S2 便于開(kāi)發(fā)和維護(hù);S3 便于盲人等特殊用戶使用 2.2 為什么要引入CSS S1 隨著發(fā)展, 之前描述結(jié)構(gòu)的HTML同時(shí)也需要描述外在表現(xiàn)了??這就造成了 HT...
摘要:前端技術(shù)前文了解了什么是前端,那么前端技術(shù)到底有哪些呢最核心的就這三個(gè)什么是,超文本標(biāo)記語(yǔ)言,標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用那么超文本標(biāo)記語(yǔ)言又是什么呢哈哈,沒(méi)完沒(méi)了是吧,學(xué)習(xí)就是要這種沒(méi)完沒(méi)了的勁。前端技術(shù) 前文了解了什么是前端,那么前端技術(shù)到底有哪些呢?最核心的就這三個(gè): html/html5 css/css3 javascript 什么是HTML HyperText Mark...
摘要:附錄查看所有文檔頁(yè)面全棧開(kāi)發(fā),獲取更多信息。常用用于修改行為定義環(huán)境變量,在區(qū)分環(huán)境中有介紹。開(kāi)啟功能,在開(kāi)啟中有介紹。借鑒的思想大幅度提升構(gòu)建速度,在使用中有介紹。集成到項(xiàng)目中,在檢查代碼中有介紹。 Webpack附錄 查看所有文檔頁(yè)面:全棧開(kāi)發(fā),獲取更多信息。原文鏈接:webpack原理,原文廣告模態(tài)框遮擋,閱讀體驗(yàn)不好,所以整理成本文,方便查找。 常用 Loaders 加載文件 ...
閱讀 2865·2021-11-22 14:44
閱讀 607·2021-11-22 12:00
閱讀 3752·2019-08-30 15:54
閱讀 1643·2019-08-29 17:15
閱讀 1966·2019-08-29 13:50
閱讀 1180·2019-08-29 13:17
閱讀 3571·2019-08-29 13:05
閱讀 1231·2019-08-29 11:31