tft每日頭條

 > 圖文

 > 前端開發基礎篇之css樣式編寫

前端開發基礎篇之css樣式編寫

圖文 更新时间:2024-10-01 15:06:43

一、css樣式的繼承性:

作用:給父元素設置一些屬性,子元素也可以使用

應用場景:

一般用于設置網頁上的一些共性信息,例如網頁的文字顔色,字體,文字大小等内容。優化代碼,降低工作量

前端開發基礎篇之css樣式編寫(前端小白必看css樣式的特性)1

注意點:

1.并不是所有的屬性都可以繼承,、

隻有color/font-/text-/ line開頭的屬性才能繼承;

2.在css的繼承中,不僅僅是兒子可以繼承,隻要是後代

都能繼承

3.繼承性中的特殊性

前端開發基礎篇之css樣式編寫(前端小白必看css樣式的特性)2

3.1 a标簽的文字和顔色 和下劃線是不能繼承父元素的——舉例:

複制代碼

<style type="text/css">

div{

color:red

font-size:24px;

text-decoration: none;

}

</style>

<body>

< div>

<h1>我是大标題</h1>

<a heref="#">我是超鍊接</a>

<p>我是段落</p>

</div>

(上面的代碼,隻有p繼承了div設置的屬性,而a标簽是不能繼承父元素的屬性,顔色不會變紅,下劃線也不會被去掉)

複制代碼

前端開發基礎篇之css樣式編寫(前端小白必看css樣式的特性)3

3.2 h标簽的文字大小也是不能繼承父元素的(見上面代碼,<h1>标簽中我是大标題不會繼承<div>的 font-size:24px;屬性,所以需要給<h1>單獨寫個css樣式:h1{font-size:24px;}

應用場景:

一般用于設置網頁上的一些共性信息,例如網頁的文字顔色,

字體,文字大小燈内容

格式:

body{屬性:值;}

二、層疊性

前端開發基礎篇之css樣式編寫(前端小白必看css樣式的特性)4

比如p标簽,給p标簽設置id和class類名,選擇器上選擇p 和p的id或者class類名,設置相同的屬性,就是層疊性

三、優先級:(三一)

作用:當多個選擇器(比如選擇p标簽和p标簽裡設置的id或者class昵稱),選中同一個标簽,并且給同一個标簽設置相同的屬性時,

如何層疊就優先級來确定。

2.優先級判斷的三種方式

2.1 是否直接選中,直接選中指的是直接選中要設置css樣式的标簽,和标簽的id或者class類名。(間接選中就是指的是繼承性,比如選擇<ul>那裡面的li繼承ul的屬性,就稱為繼承屬性)

如果是間接選中,誰離目标标簽比較近就聽誰的。

2.2是否是相同的選擇器。

前端開發基礎篇之css樣式編寫(前端小白必看css樣式的特性)5

如果是相同選擇器,那麼就是誰寫在後面就聽誰的。(比如給兩個p标簽設置css樣式

p{color:blue}

p{color:red}

那麼就會以第二個p為标準,文字變成紅色

2.3不同的選擇器

如果都是直接選中,并且不是相同類型的選擇器,那麼就會按照

選擇器的優先級來層疊

id>類>标簽>通配符>繼承>浏覽器默認

權重計算

如果選擇器裡有直接選中和間接選中。哪怕是間接的選擇器為id選擇器,也會優先實行直接選中的效果。

前端開發基礎篇之css樣式編寫(前端小白必看css樣式的特性)6

我是一名前端開發程序員,自己整理了一份2019最全面前端學習資料,從最基礎的HTML CSS JS到移動端HTML5到各種框架都有整理,送給每一位前端小夥伴,這裡是小白聚集地,歡迎初學和進階中的小夥伴

前端資料獲取方式:

1.在你手機的右上角有【關注】選項,點擊關注!

2.關注後,手機客戶端點擊我的主頁面,右上角有私信,請私信回複:【學習】

電腦已經設置好了關鍵詞自動回複,所以回複的時候請注意關鍵詞喲~

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved