複習html和css之一

2021-09-08 07:35:18 字數 3609 閱讀 3026

目錄

css權重

css查詢順序

css樣式

html元素

css企業級開發經驗

這裡列舉出幾個我覺得用的多的css選擇器

div span .demo {}


.demo span {}


.demo p strong {}
又叫父子選擇器（或者後代選擇器），能夠選擇某個（些）元素以下層級的元素。因為這個以下層級不僅僅是指直接的下級，所以我覺得叫派生選擇器（或者後代選擇器可能會更好一些。

div > .demo {}


.demo > p > span {}
只選擇匹配的直接下級元素（直接子元素）

div + p {}


img + span {}
臨近元素選擇器，只選中緊接在某些（某個）元素之後的元素。

ul ~ p
與臨近元素選擇器功能基本相同，但沒有臨近元素選擇器那樣嚴格，他會選中在某元素之後的同級的所有匹配的元素。

a[title]
根據擁有的屬性來選擇，a[title="demo"]也可以像是這樣限定屬性值來選擇

div.demo.first
div中demo類中的類為first才會被選中

h2, p, span
企業級書寫規範中一般都喜歡豎排寫，這樣當每組選擇變長了以後便於觀察

a:hover
像是hover一樣的偽類還有很多，如checkedafternot等

html中的乙個標籤，沒啥特殊作用，比div標籤更具語義化，寫這裡是為了。。。

css權重問題是很重要的，因為在寫的css層疊的很多了以後，不知道啥時候後，你期待的css效果就被覆蓋了。

css的權重值：

有一點可以順便提一下子，css權重的計算進製是256進製的，沒錯，要滿了256才會向前進一位

css的查詢順序是從末梢向上的，正好和我們的寫法是相反的

border沒啥好講的，不過捏，還有乙個小知識點。border是四條邊對吧，那麼他們交接的部分是如何定義的呢，答案當然是平分了吧，然後這個平分就有大作用了，比如某度有一年的筆試題就是使用html+css畫出乙個三角形。

怎麼畫呢，就是使用這個border畫。因為這個border的分界線是一條斜線，所以我們讓border填滿整個div回事什麼樣子呢。

.demo
然後我們為這個div加上這個屬性，然後他就會變成這個樣子：

所以這樣子就有一點頭緒了吧，然後我們只需要改一改css**將其他的border變為透明就可以了.

.trangle
然後就會是下面的效果：

一般的通用方法是使height等於line-height，這樣子就可以實現文字在垂直方向上的水平居中。

使用text-indent屬性來使段落文字縮排，屬性值的一般的單位是em.乙個相對單位，1em的預設值為當前所在元素的預設font-size。

ps：該屬性控制游標定位到該元素時的樣式（基本上網頁上能夠看到的都是能夠實現的）

inline內容只在一行顯示，css不能改變寬高

block內容可以覆蓋多行，css能夠改變寬高

因為是inline-block行內塊元素，即具有inline的屬性也同時具有block的屬性，我們知道在文字這種inline中連續的空格和回車都會被轉換成為乙個空白符，也會被轉換成為乙個空白間隔間隔符。

同樣的，在中這種說法也同樣適用。那些出乎意料之外的之間的間隙就是我們html原始碼中的回車。

來看下面這一段**：

.demo
然後讓我們來看看這段**在瀏覽器中的dom結構：

我們可以看到在div節點之間有乙個矩形的小圖示，沒錯，這就是中間的那一部分在dom中的展示。firefox叫他whitespace-only text node翻譯過來叫僅限空白的文字節點（google翻譯嘻嘻）。

要去掉他呢很簡單，只要把font-size設為0，或者將margin設定為0就可以了。

但是呢，在實際的開發過程中，因為**是要進過要所得，那些多餘的空格和回車就會被去掉，所以也就沒事啦。

html是網頁的骨架對不對，css就是網頁的**裝飾，然後呢，我們其實可以先把骨架先搭建好，然後呢就寫我們想要的css頁面效果，之後再html文件中，只需要把我們想要的對應的效果作為class屬性新增到標籤中就可以了。

這就叫做先有功能，之後再選配功能的一種程式設計方法。

對於很多標籤，不同的瀏覽器都有其對應的不同的預設樣式，有時候這或許看起來還不錯，但是當我們想要這個頁面的樣子在任何乙個瀏覽器看起來都是一樣的時候，這個問題就很困擾人了。

這時候就需要清除瀏覽器的預設標籤樣式，這就叫做初始化標籤。

posted @

2018-12-20 15:44

秦曉 閱讀(

...)

編輯收藏

HTML和CSS的複習總結

css cascading style sheets 級聯樣式表 其核心就是各種樣式的定義與使用！css的定義方式 1 通過html標籤定義，如 h1 2 使用id定義，如 sample，文字 3 使用class定義，如 text，文字 css在html使用的方法 1 嵌入式，如 嵌入式樣式表 2 ...

快速複習html和css

這裡我們給div設定display list item等屬性,使得其呈現為列表顯示,我們還可以給設定display inline table屬性,使其由塊級元素變為內聯元素,橫排顯示 overflow inherit visible hidden scroll auto visible 內容不會被修...

CSS面試複習（一） HTML強化

1 html常見元素和理解 head類 meta 字符集 base 路徑 和body類 網頁結構檢視 拖拽到書籤欄，在目的網頁點選開啟即起作用 2 html版本 html4 4.01 sgml xhtml xml html5 3 元素分類 按預設樣式分 塊級block 行內inline inline...