web前端開發基本知識 css篇

2021-07-13 14:40:46 字數 1369 閱讀 4666

從css 樣式**插入的形式來看基本可以分為以下3種:內聯式、嵌入式和外部式三種。

內聯式css樣式

嵌入式css樣式:

外部式css樣式:

選擇器標籤選擇器:html中的標籤。

類選擇器:class命名,前面加圓點

id選擇器:標籤中以ld來區分命名的,前面加#

id只有乙個,但是類可以有很多個相同。

子類選擇器:ul中的li    .s>li

包含(後代)選擇器:加入空格,用於選擇指定標籤元素下的後輩元素     .s li

通用選擇器:通用選擇器是功能最強大的選擇器,它使用乙個(*)號指定,它的作用是匹配html中所有標籤元素

偽類選擇符

更有趣的是偽類選擇符,為什麼叫做偽類選擇符,它允許給html不存在的標籤(標籤的某種狀態)設定樣式,比如說我們給html中乙個標籤元素的滑鼠滑過的狀態來設定字型顏色:

a:hover
繼承

繼承是一種規則,它允許樣式不僅應用於某個特定html標籤元素,而且應用於其後代。

p不具有繼承的性質。

特殊性

對同乙個標籤進行不同的樣式編輯,那麼用哪個樣式?依據權值來定

標籤的權值為1,類選擇符的權值為10,id選擇符的權值最高為100。

p /*權值為1*/

p span /*權值為1+1=2*/

.warning /*權值為10*/

p span.warning /*權值為1+1+10=12*/

#footer .note p /*權值為100+10+1=111*/

層疊如果html檔案中對於同乙個元素可以有多個css樣式並且這多個css樣式具有相同的權重值怎麼辦?

重要性

我們在做網頁**的時,有些特殊的情況需要為某些樣式設定具有最高權值,怎麼辦?這時候我們可以使用!important來解決。瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式,但記住!important優先順序樣式是個例外,權值高於使用者自己設定的樣式

文字排版

字型:font-family:「」;

字型大小、顏色:font-size:20px;color:red;

粗體:font-weight:bold;

斜體:font-style:italic;

下劃線:text-decoration:underline;

刪除線:text-decoration:line-through;

縮排:text-indent:2em;

行間距:line-height:1.5em;

文字間距:letter-spacing:20px;

字母間距:word-spacing:15px;

對齊:text-align:center;

前端基本知識

1 前端 通過瀏覽器在使用者端開發計算機軟體 2 url 同一資源定位符 對能夠從網際網路上得到的資源的位置和訪問方法的一種簡潔的表示,是網際網路上標準資源的位址。網際網路上的每乙個檔案都有乙個唯一的url,它包括的資訊指出檔案的位置以及瀏覽器應該怎麼處理它。3 http協議 超文字傳輸協議 是一種...

前端基本知識

標籤語義化 1 去掉樣式後看網頁結構是否組織有序 2 盡可能少使用div span等無語義標籤 3 例如 h1強化標題 p寫段落 錨點用a input 是輸入框 作用1 對搜尋引擎友好方便搜尋引擎識別,有助於網頁推廣 2 方便前端團隊維護 3 便於網路爬蟲抓取資訊 4 提高讀者閱讀 行內元素有哪些,...

CSS基本知識

選擇符表示要定義樣式的物件,可以是元素本身,也可是一類元素或制定名稱的元素 在css選擇符中,大致可有10種 類選擇符 id選擇符 class選擇符 萬用字元 群組選擇符 包含選擇符 偽類選擇符 偽物件選擇符 關於選擇符的權重問題,css中用四位數來表示權重,權重的表示式如0000 在這裡特別要注意...