學習前端第四天

2021-10-08 03:35:52 字數 3450 閱讀 5351

三十六、css的產生(cascading style sheets:層疊樣式表)

隨著html的成長,為了滿足頁面設計的要求,html新增了很多顯示的功能,但是隨著這些功能的增加,html變得越來越雜亂,而且html頁面也越來越臃腫,於是css便誕生了,它的版本有2.0和3.0的版本,css3因為有相容問題,所以江大css3樣式的時候,這裡會特殊說明

三十七、基本語法

選擇器

三十八、樣式表位置

行內樣式表:權重高,書寫方便,但控制內容少,結構和樣式完全沒分離,讓html檔案臃腫,很少使用

內容內部樣式表:結構和樣式部分分離,使用較多

外部樣式表:完全實現結構和樣式分離,需引入,使用最多,

三十九、字型大小(font-size)

em:相對於當前物件內文字的字型尺寸

px:畫素,最常用,推薦使用(一般網頁中最常用的大小為14px)

in:英吋

cm:厘公尺

mm:公釐

pt:點

四十、字型(font-family)

當屬性值為多個字型時,中間用英文逗號隔開,中文字型名和字型名中包含空格、#、$等字元需加英文雙引號,英文本型名需放在中文字型名前面,盡量使用系統預設字型,保證任何使用者的樂樂趣中都能正確顯示

選擇器

四十一、unicode字型(為了相容使用瀏覽器,英文unicode是大家都能識別的)

宋體                   →     simsun                →        \5b8b\4f53

新宋體               →     nsimsun              →        \65b0\5b8b\4f53

黑體                   →     simhei                 →        \9ed1\4f53

微軟雅黑            →     microsoft yahei   →        \5fae\8f6f\96c5\9ed1

楷體_gb2312    →     kaiti_gb2312     →        \6977\4f53_gb2312

隸書                   →     lishu                    →        \96b6\4e66

幼圓                   →     youyuan               →        \5e7c\5706

華文細黑            →     stxihei                →        \534e\6587\7ec6\96d1

細明體                →     mingliu               →        \7ec6\660e\4f53

新細明體            →     p mingliu            →        \65b0\7ec6\660e\4f53

微軟雅黑和宋體是幾乎使用電腦都支援的字型,所以字型的表示用一下書寫形式最妥當

選擇器

四十二、注釋標籤

ctrl+反斜槓:/* 需要注釋的內容 */

四十三、字型的樣式屬性

選擇器

四十四、font的綜合寫法(順序不能隨意打亂,屬性可以省略不寫,但最後兩個不能省)

選擇器

四十五、選擇器

標籤選擇器:body中所有可使用的標籤名都可以用來選擇(p,h1,div,span等)

類選擇器:body中所有標籤屬性為class="自定義類名"(.自定義類名,乙個標籤可以有多個自定義類名,不同的標籤也可以擁有同乙個自定義類名,供選擇器交叉選擇使用,方便控制樣式)

id選擇器:body中每個標籤且只能擁有乙個唯一的id(#自定義id名)

萬用字元選擇器:body中所有標籤(*)

連線偽類選擇器:用於向某些選擇器新增特殊效果,通暢用於連線a標籤,實際開發中通常只用hover特效(a:link、a:visited、a:hover、a:active,他們的先後順序也不能隨意打亂,記憶方法:love愛上hate兩個單詞前兩個字母)

結構偽類選擇器:以無序列表ol標籤中的li標籤為例,li:first-child將選中第乙個子元素、li:last-child將選中最後乙個子元素、li:nth-child(even)將選中所有第偶數的子元素、li:nth-child(odd)將選中所有第寄數的子元素、li:nth-last-child(even)將選中所有從最後乙個開始所有偶數子元素、li:nth-child(n),n為正整數將選中第n個子元素;n為n時將選中所有子元素;n為2n時等價於even;n為2n+1時等價於odd;n也可以為任意的數學表示式,其結果將選中符合表示式的所有子元素

目標偽類選擇器:選擇當前誰被選擇的活動目標元素(:targer)

交集選擇器:標籤選擇器+類選擇器(選擇器和選擇器中間沒任何字元p.自定義類名,所有p標籤裡中類名為自定義類名的元素)

並集選擇器:選擇器,選擇器,選擇器.....(選擇器和選擇器中間用英文逗號隔開從某種意義上可以說是集體申明屬性,減少重複**)

後代選擇器:選擇器 選擇器(選擇器和選擇器中間用空格隔開,表示前者選擇器裡面所有符合後者(不管是子代還是孫代甚至更下一層)選擇器的元素)

子代選擇器:選擇器》選擇器(選擇器和選擇器中間用大於號隔開,表示前者選擇器裡面所有符合後者(只含子代)選擇器的元素)

屬性選擇器:選取標籤中符合某些屬性的標籤(a[title],a標籤中所有title屬性的標籤;a[title=自定義屬性值],a標籤中所有title屬性值為自定義屬性值的標籤;a[title^=自定義屬性],a標籤中所有title屬性值中以自定義屬性開頭的標籤;a[title$=自定義屬性],a標籤中所有title屬性以自定義屬性結束的標籤;a[title*=自定義屬性],a標籤中所有title屬性值中在任意位置含有自定義屬性的標籤;)

偽元素選擇器:選擇器::first-letter,符合選擇器中的第乙個單詞或文字;選擇器::first-line,符合選擇器中的第一行;選擇器::first-selection,符合選擇器中的選中文字;

偽元素選擇器:配合它的乙個屬性content使用,在選擇器選中的盒子內部插入content的屬性值(選擇器::befor,在前面插入;選擇器::after,在後面插入)

四十六、塊級樣式(block)、行內元素(inline)和行內塊元素(inline-block),他們三者可以通過display屬性隨意相互轉換

塊級元素:獨自佔整個瀏覽器的一行,寬度預設容器100%,可設定高、外邊距和內邊距屬性,可容納內聯元素和其他塊元素(div、p、h1、ul、ol、li........)

行內元素:和相鄰的行內元素併排一行,沒有高寬屬性,但水平方向的padding和margin可設定,垂直方向無效,預設寬度就是本事內容寬度,行內元素只能容納文字或者其他行內元素(a、strong、b、em、i、span.....)

行內塊元素:和相鄰行內元素併排,但之間有空隙,,預設寬度是本身內容寬度,高度、行高、內外邊距都可控制(img、input、td)

四十七、

選擇器

前端 第四天學習

第四天知識總結 1 樣式表 內部樣式表 外部樣式表 內聯樣式表 2 樣式表的權重 內聯樣式表的權重最大!內部和外部樣式的權重,和書寫的前後順序有關!放在後面的會把放在前面的樣式覆蓋掉,覆蓋的只是相同屬性的樣式,不同屬性的樣式會繼續執行。3 css選擇符 css語法 選擇符 選擇符 選擇符就是給標籤起...

學習前端第四天

1.複習前一天學習的 表單。2.補充 內容 下拉列表 輔助表單 3.css語法 1.基礎語法 寬 width 高 height 顏色 color 1.單詞表示法 red,blue。2.十六進製制表示法 000000 3.rgb 255,0,0 背景顏色 background color 邊框 bor...

前端學習第四天

今天是學習前端的第四天,主要學習了復合選擇器 元素的顯示模式及背景的相關用法。復合選擇器由兩個或多個基礎選擇器通過不同方式組合而成,可以更準確 更高效的選擇目標元素。常用的復合選擇器由四類,分別是後代選擇器 子代選擇器 並集選擇器以及偽類選擇器。後代選擇器 可以選擇父元素中所有的子元素,其元素可以使...