前端學習之 CSS（二）

時間 2019-12-09

標籤前端學習 css 欄目 CSS 简体版

原文原文鏈接

五：繼承性和層疊性

css有兩大特性，即繼承性和層疊性。css

1. 繼承性

面嚮對象語言都會存在繼承的概念，在面嚮對象語言中，繼承的特色：繼承了父類的屬性和方法。那麼咱們如今主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。html

繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承。前端

記住：有一些屬性是能夠繼承下來： color 、 font-*、 text-*、line-* 。主要是文本級的標籤元素。瀏覽器

可是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。ide

例子和層疊性一塊兒體現。佈局

2. 層疊性

層疊性：權重大的標籤覆蓋掉了權重小的標籤，說白了，就是被幹掉了字體

權重：誰的權重大，瀏覽器就會顯示誰的屬性spa

數：id的數量 class的數量標籤的數量，順序不能亂設計

對上面兩個屬性進行舉例：code

首先前端代碼爲：

<div class="mydiv1">
    這是div1的內容
    <div class="mydiv2">
        這是div1的內容
        <p class="myp">這是p的內容</p>
        <p id = "p2">這是第二個p的內容</p>
    </div>
</div>

View Code

而後是css代碼爲：

/*修飾div標籤的*/
div{
    color: red;
}
/*修飾class=mydiv2*/
[class=mydiv2]{
    background: #00BFFF;
}
/*修飾p標籤的*/
p{
     text-decoration: underline;
}
/*修飾id=p2的*/
[id=p2]{
    background: red;
    color: white;
}

View Code

效果爲：

效果分析：

首先表現前三行字體紅色體現了繼承性，只要在div下都繼承了div的紅色字體，class=mydiv2藍色背景第二層div下的第一個p標籤也繼承了藍色背景，而第二個p標籤既沒有繼承紅色字體也沒有繼承藍色標籤是由於層疊性，而id權重比其餘的大，全部呈現的是id的修飾效果：紅色背景和白色字體。

六：CSS相關屬性

1.文本屬性

(1) 文本對齊

text-align 屬性規定元素中的文本的水平對齊方式。

屬性值：

center 把文本排列到中間

left 把文本排列到左邊

right 把文本排列到右邊

justify 實現兩端對齊文本效果

(2)文本顏色

設置color屬性便可。

(3)文本首行縮進

text-indent 屬性規定元素首行縮進的距離。

p {

text-indent: 32px; #首行縮進兩個字符，頁面上的默認大小爲16px

}

(4)文本修飾

text-decoration屬性規定文本修飾的樣式

屬性值：

none 默認

underline 下劃線

overline 定義文本上的一條線

line-through 定義穿過文本下的一條線

inherit 繼承父元素的text-decoration屬性的值

(5)行高

line-height就是行高的意思，指的就是一行的高度。

針對單行文本垂直居中

公式：行高的高度等於盒子的高度，可使當行文本垂直居中，注意只適用單行文本。

針對多行文本垂直居中

行高的高度不能小於字體的大小，否則上下字之間會緊挨一塊兒。

第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，若是行高是line-height:30px; 那麼就知道行高*5=150px

第二步，讓(盒子的高度-150px)/2=75;那麼設置盒子的padding-top:75px;同時保證盒子的高度爲300px,那麼高度改成225px;

(6)陰影

text-shadow：水平方向偏移量垂直方向偏移量模糊度陰影顏色；

text-shadow:3px 3px 6px #FF0000;

(7)文字溢出

text-overflow:ellipsis

案例：文字超出部分顯示...

例：

html內容：

<div>
    <p>前端讓我快樂</p>
    <p>前端讓我快樂</p>
    <p>前端讓我快樂</p>
</div>

View Code

css內容：

div {
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
div p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

View Code

(8)邊框屬性

1.border-width 寬度

2.border-style 樣式

3.border-color 顏色

#i1 {

border-width: 2px;

border-style: solid;

border-color: red;

}

一般使用簡寫方式：

#i1 {

border: 2px solid red;

}

邊框樣式：

2. 字體屬性

(1)字體大小

font-size表示設置字體大小，若是設置成inherit表示繼承父元素的字體大小值。

(2)字體粗細

font-weight表示設置字體的粗細

屬性值：

none(默認值，標準粗細)

bold(粗體)

border(更粗）

lighter(更細)

100~900（設置具體粗細，400等同於normal，而700等同於bold）

inherit（繼承父元素字體的粗細值）

(3)字體系列

如：font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。若是都不支持則顯示宋體。

(4)vertical-align

定義：vertical-align 屬性設置元素的垂直對齊方式。

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊

經常使用屬性值：

baseline 默認值

top

bottom

middle

它的做用：

內聯元素之間的對齊

文字與圖片垂直方向的對齊

圖片與圖片垂直方向的對齊

行內塊元素垂直方向的對齊

單元格td的內容垂直方向的對齊

七：css盒模型

在CSS中，"box model"這一術語是用來設計和佈局時使用，而後在網頁中基本上都會顯示一些方方正正的盒子。咱們稱爲這種盒子叫盒模型。

盒模型有兩種：標準盒子模型和IE盒子模型。咱們在這裏重點介紹標準模型。

一個盒子的模型示意圖以下：

盒模型屬性介紹：

width：內容的寬度

height: 內容的高度

padding：內邊距，邊框到內容的距離

border: 邊框，就是指的盒子的寬度，圍繞在內邊距和內容外的邊框

margin：外邊距，用於控制元素與元素之間的距離，盒子邊框到附近最近盒子的距離。margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。

content(內容): 盒子的內容，顯示文本和圖像

盒模型的計算：

　若是一個盒子設置了padding，border，width，height，margin(我們先不要設置margin，margin有坑，後面課程會講解)

　盒子的真實寬度=width + 2*padding + 2*border

　盒子的真實寬度=height + 2*padding + 2*border

　那麼在這裏要注意看了。標準盒模型，width不等於盒子真實的寬度。

　另外若是要保持盒子真實的寬度，那麼加padding就必定要減width，減padding就必定要加width。真實高度同樣設置。

1. padding（內邊距）

padding：就是內邊距的意思，它是邊框到內容之間的距離

另外padding的區域是有背景顏色的。而且背景顏色和內容的顏色同樣。也就是說background-color這個屬性將填充全部的border之內的區域

padding的設置：

padding有四個方向，分別描述4個方向的padding。

描述的方法有兩種：

(1)寫小屬性,分別設置不一樣方向的padding

padding-top: 30px;

padding-right: 30px;

padding-bottom: 30px;

padding-left: 30px;

(2)寫綜合屬性，用空格隔開

/*上右下左*/

padding: 20px 30px 40px 50px ;

/*上左右下*/

padding: 20px 30px 40px;

/* 上下左右*/

padding: 20px 30px;

/*上下左右*/

padding: 20px;

注意：一些標籤默認有padding。

好比ul標籤，有默認的padding-left值。

那麼咱們通常在作站的時候，是要清除頁面標籤中默認的padding和margin。以便於咱們更好的去調整元素的位置。

咱們如今初學可使用通配符選擇器。

padding:0;

margin:0;

}

這種方法效率不高。因此咱們要使用並集選擇器來選中頁面中應有的標籤。上面的並集選擇器已經有所表現。

2. border（邊框）

border:邊框的意思，描述盒子的邊框

邊框有三個要素：粗細線性樣式顏色

border: solid

若是顏色不寫，默認是黑色。若是粗細不寫，不顯示邊框。若是隻寫線性樣式，默認的有上下左右 3px的寬度,實體樣式，而且黑色的邊框。

(1)按照三要素來寫border

border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid(實線) dotted(點) double(雙實線) dashed(虛線);
border-color: red green yellow;
*/

View Code

(2)按照方向劃分

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

View Code

上面12條語句，至關於 bordr: 10px solid red;

另外還能夠這樣：

border-top: 10px solid red;

border-right: 10px solid red;

border-bottom: 10px solid red;

border-left: 10pxb solid red;

注意：

border:none；

border：0；

表示border沒有設置樣式