css 選擇器 第四天

2021-09-27 03:24:23 字數 1708 閱讀 4633

css注釋

css外觀屬性

sublime快捷方式

從html被發明開始,樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為使用者提供頁面效果的控制。最初的html只包含很少的顯示屬性。

隨著html的成長,為了滿足頁面設計者的要求,html新增了很多顯示功能。但是隨著這些功能的增加,html變的越來越雜亂,而且html頁面也越來越臃腫。於是css便誕生了。

css unicode字型

font-size:字型大小大小

font-family:字型

font-weight:字型粗細

font-style:字型風格

此工具是我們的必備工具,以後**出了問題,我們首先第一反應就是:

「按f12」或者是 「shift+ctrl+i」 開啟 開發者工具。

選單: 右擊網頁空白出—檢視

標籤名 或者

元素名.類名

#id名

、* 我們可以給標籤指定多個類名,從而達到更多的選擇目的。

注意:樣式顯示效果跟html元素中的類名先後順序沒有關係,受css樣式書寫的上下順序有關。

各個類名中間用空格隔開。

偽類選擇器用於向某些選擇器新增特殊的效果。比如給鏈結新增特殊效果, 比如可以選擇 第1個,第n個元素。

注意:為了和我們剛才學的類選擇器相區別, 類選擇器是乙個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{}

a:hover

/* :link 未訪問鏈結 */

a:link

li:first-child 

li:last-child

li:nth-

child(4

)

:target目標偽類選擇器 :選擇器可用於選取當前活動的目標元素

:target
css規則是使用 /* 需要注釋的內容 / 進行注釋的,即在需要注釋的內容前使用 「/」 標記開始注釋,在內容的結尾使用 「*/」結束。

color:文字顏色

line-height:行間距

text-align:水平對齊方式

text-indent:首行縮排

letter-spacing:字間距

word-spacing:單詞間距

color: rgba(r,g,b,a) a 是alpha 透明的意思 取值範圍 0~1之間 color: rgba(0,0,0,0.3)

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;

注意:前兩項是必須寫的。 後兩項可以選寫。

sublime可以快速提高我們**的書寫方式

生成標籤 直接輸入標籤名 按tab鍵即可 比如 div 然後tab 鍵, 就可以生成

如果想要生成多個相同標籤 加上 * 就可以了 比如 div*3 就可以快速生成3個div

如果有父子級關係的標籤,可以用 > 比如 ul > li就可以了

如果有兄弟關係的標籤,用 + 就可以了 比如 div+p

如果生成帶有類名或者id名字的, 直接寫 .demo 或者 #two tab 鍵就可以了

css第四天 浮動

1css布局的三種機制 1.1標準流 最穩定 塊級 自上而下 行內 自左到右 1.2浮動 浮動可以讓多個塊級元素子在一行無縫隙顯示,布局最為長常用 1.3定位 2浮動2.1目的 讓多個塊級元素在一行顯示 浮動只要左右,沒有居中 我們的浮動元素只能一行顯示 除非裝不開盒子,才會下來 2.2口訣 浮 漂...

前端基礎CSS第四天

css第四天 border radius 屬性用於設定元素的外邊框圓角 border radius length radius 半徑 引數值可以為數值或百分比的形式 如果是正方形,想要設定為乙個圓,把數值修改為高度或者寬度的一半即可,或者直接寫為50 該屬性是乙個簡寫屬性,可以跟四個值,分別代表左上...

四 css選擇器

一 css選擇器 1.class類選擇器 類名 乙個網頁中可以給樣式相同的元素設定同樣的class類名稱 2.id選擇器 id名 乙個網頁中id選擇器的id名是惟一的,不可以使用id選擇器同時給很多相同樣式的元素設定樣式 3.標籤選擇器 標籤名 4.關係選擇器 1 子選擇器 父元素 子元素 用於選擇...