萌新CSS初始總結

前言

最近幾天初步學習了css，針對css部分知識點在此進行一些總結。

css是cascading style sheets的簡稱中文稱層疊樣式表

css有四種引入方式分別是

hello

樣式的應用順序：

基本選擇器：

1、萬用字元選擇器

* 表示選擇所有的標籤。

2、標籤選擇器

標籤選擇器，選擇所有使用某標籤的元素

div

3、類選擇器

選擇所有class屬性中包含info的元素。

.info

4、id選擇器

選擇所有id屬性等於myid的元素在乙個網頁中id的值都是唯一的

#myid

此外還有組合選擇器，後代元素選擇器，偽類選擇器等等

顏色屬性

（單詞，使用方式：color:blue）
（十六進製制色：color: #ffff00 --> 縮寫：#ff0）
rgb（紅綠藍，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
（紅綠藍透明度，a是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）

字型屬性:

font-size: 14px 設定字型大小可以非常大不能非常小 font-family:a,b,c,d 設定字型型別 font-weight: normal bold bolder 100 200 300 設定字型是否加粗 font-style: normal italic 設定字型是否傾斜 font: 復合屬性 font:font-style font-weight font-size/line-height

color:blue 設定字型顏色

文字屬性:

text-decoration: none 預設/underline 下劃線/overline 上劃線/line-through 中線文字的裝飾線 line-height: 100px; 設定行高 vertical-align: baseline;文字所在行高的垂直對齊方式只對行內元素有效，對塊級元素無效 text-indent: 2em; 首行縮排 letter-spacing: ; 字間距 word-spacing: ; 詞間距 text-overflow: ; 文字溢位樣式 word-wrap: ; 自動換行

等等

背景屬性:

background-color: blue; 設定背景顏色
background-image: url('x.jpg'); 設定影象為背景
background-repeat: no-repeat(不平鋪);(repeat:平鋪)
background-position: x軸 y軸;設定背景影象的位置座標
background: x px y px no-repeat blue url('x.jpg') 綜合設定

列表屬性:

list-style: decimal-leading-zero;
list-style: none; 去除標誌      
list-style: circle; 空心圓
list-style: upper-alpha; 實心圓
list-style: disc; 實心圓

display屬性:

display:none ; 不顯示
display:block; 顯示為塊級元素
display:inline; 顯示為內聯元素
display:inline-block; 行內塊元素
display:list-item; 顯示為列表元素。

邊框屬性:

border-style: solid; solid實線  dashed虛線
border-color: red;
border-width: 1px;
border: 1px solid red ;
border-radius：; 圓角

padding、margin 表示上右下左都應用

padding-top、margin-top 上

padding-right、margin-right 右

padding-bottom、margin-bottom 下

padding-left、margin-left 左

乙個引數，應用於四邊。

兩個引數，第乙個用於上、下，第二個用於左、右。

三個引數，第乙個用於上，第二個用於左、右，第三個用於下。

四個引數，第乙個用於上，第二個用於右，第三個用於下，第四個用於左。

float:none; 不浮動

float:left; 左浮動

float:right; 右浮動

浮動的特點：

元素浮動的影響：

元素浮動會對父級元素以及後面的兄弟元素造成影響。

清除浮動對父級元素的影響

清除浮動對後面兄弟元素的影響

clear: left/right/both;

clear只能解除安裝第乙個受影響的元素上面，不能寫在父級元素上。

萌新CSS初始總結

萌新瞎講分塊

萌新linux之旅4

萌新PYTHON學習01

萌新CSS初始總結

萌新瞎講 分塊

萌新linux之旅4

萌新PYTHON學習01

相關推薦

萌新瞎講分塊