HTMLCSS學習筆記（五）——CSS清單屬性

CSS清單屬性

1）定義清單符号樣式

list-style-type：disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉清單符号)；

list-style-type:none===list-style:none;

2）使用圖檔作為清單符号

list-style-image：url(所使用圖檔的路徑及全稱)；

3）定義清單符号的位置

list-style-position:outside(外邊)/inside(裡邊)；

CSS背景屬性

1）背景顔色

文法：選擇符{background-color:顔色值;}

2）背景圖檔的設定

文法：background-image：url(背景圖檔的路徑及全稱)；

說明：

網頁上有兩種圖檔形式：插入圖檔、背景圖；

插入圖檔：屬于網頁内容，也就是結構。

背景圖：屬于網頁的表現，背景圖上可以顯示文字、插入圖檔、表格等。

3）背景圖檔平鋪屬性

文法：選擇符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

no-repeat:不平鋪

repeat：平鋪

repeat-x：橫向平鋪

repeat-y ：縱向平鋪

4）背景圖檔的定位

文法：選擇符{background-position:left/center/right/數值 top/center/bottom/數值;}

水準方向上的對齊方式（left/center/right）或值

垂直方向上的對齊方式(top/center/bottom)或值

background-position:值1 值2;

兩個值 ：第一個值表示水準位置的值，第二個值：表示垂直位置的值。

當兩個值都是center的時候寫一個值就可以代表的是水準位置和垂直位置

說明：向左方向，向上方向是負值

5）background的簡寫

背景屬性的縮寫文法：

background:屬性值1 屬性值2 屬性值3；

背景縮寫：background:url（背景圖檔的路徑及全稱） no-repeat center top #f00；

CSS邊框屬性

border:邊框寬度 邊框風格 邊框顔色;

例如：border:5px solid #ff0000

邊框：border,網頁中很多修飾性線條都是由邊框來實作的。

邊框寬度：border-width:

​ 邊框顔色：border-color:

​ 邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)

可單獨設定一方向邊框：

border-bottom:邊框寬度 邊框風格 邊框顔色;底邊框

border-left:邊框寬度 邊框風格 邊框顔色;左邊框

border-right:邊框寬度 邊框風格 邊框顔色;右邊框

border-top:邊框寬度 邊框風格 邊框顔色;上邊框

邊框三角形

制作過程

1、将div的寬度和高度設為0

2、設定邊框寬度、樣式、顔色

3、此時得到四個三角形，若需要去掉一些三角形時，可以使用以下方法實作：

（1）、使用rgba()将透明度改成0

（2）、使用關鍵字transparent

（3）、将顔色設為跟背景色一樣的顔色

div{
            width: 0;
            height: 0;
            background: gray;
            border-width: 100px;
            border-style: solid;
            border-color: transparent red blue yellow;
            /* border-color: rgba(0, 128, 0, 0) red blue yellow; */
            /* border-color: gray red blue yellow;*/
        }
           

CSS Float屬性的應用原理

文法：float:none/left/right;

float:定義網頁中其它文本如何環繞該元素顯示

浮動的目的：就是讓豎着的東西橫着來

有三個取值：

left:元素活動浮動在文本左面；

right:元素浮動在右面；

none:預設值，不浮動。

擴充知識點：浮動的排序規則

• 相同方向的浮動元素,先浮動的顯示在前面.
• 不同方向的浮動元素,左浮找左浮,右浮找右浮
• 浮動元素浮動之後的位置,由浮動元素浮動之前在标準流中的位置來決定.
• 貼靠現象: 如果浮動的最後一個元素超過了父元素的寬度,會自動找上一個元素貼過去,如果寬度還是不夠,繼續找上一個~如果父元素寬度還是不夠的話,那就隻能湊合呆着了
• 圖文混排

清除浮動的關鍵字是clear，文法：clear : none | left | right | both

none : 預設值。允許兩邊都可以有浮動對象

​left : 不允許左邊有浮動對象

​right : 不允許右邊有浮動對象

​both : 不允許有浮動對象

​對于CSS的清除浮動(clear)，一定要牢記：這個規則隻能影響使用清除的元素本身，不能影響其他元素。清除浮動隻是改變元素的排列方式，浮動之後橫着排，清除某一個元素之後，該元素會豎着排