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