隨便寫寫，看成了解--Css

時間 2019-11-19

標籤隨便寫寫看成瞭解 css 欄目 CSS 简体版

原文原文鏈接

Css，Cascading Style Sheets，層疊樣式表。用於控制HTML頁面樣式。他的基本格式由兩部分組成：css

選擇器聲明塊html

1、使用

css的註釋用 /* 註釋內容 */瀏覽器

1.導入外部樣式表

rel:表示關係，這裏的關係是「stylesheet」；若是將rel定義爲「alternate stylesheet」，他就爲候選樣式表，利用title屬性生成候選樣式列表；字體

type:描述link加載的數據類型；url

href:樣式表的位子；htm

media:這個樣式要運用的媒體，all表示全部。文檔

2.在頁面的樣式表

3.在頁面的樣式表中導入外部樣式表

@import url(mycss.css) media;

/* 樣式表內容 */

</style>

media做用和前面的link同樣，無關緊要。

4.內嵌的樣式

直接使用元素的style屬性,指定p標籤內的顏色爲紅色

2、選擇器

1 分組

h1 , h2 , p { color : red; } 逗號表示分組，這句表示h1,h2,p標籤的字體顏色爲紅色。若是不要逗號，意義徹底不同。

* { color : grey ; font-size: 80px ;} * 是通配選擇器，表示全部的標籤元素字體爲灰色，大小爲80像素。

2 類選擇器要區分大小寫

.warning { font-weight : bold ; } 表示class值爲「warning」的標籤，字體所有加粗。前面有英文的句號。類選擇起能夠連起用如 p.warning.help ,他匹配的是class屬性包含warning 和 help的p元素。中間沒有空格。

3 id選擇器要區分大小寫

#warning { font-weight : bold ; } 表示Id值爲「warning」的標籤，字體所有加粗。前面有井號。

p#warning 表示id爲warning的p元素

用id選擇器仍是類選擇器？

類名能夠重複用，而html中標籤的id是惟一的。這意味着id選擇器在一個html文檔中，最多隻會使用一次。

4 屬性選擇器 [ ]

4.1根據屬性選擇

h1[class] { color: silver } 表示帶有class 標籤的h1元素都被選擇，設置字體顏色爲灰色。

* [id] 表示選擇全部的帶有id屬性的元素。其餘屬性選擇同理。

4.2根據屬性值選擇

a[ href =」http://www.baidu.com」] 表示選擇全部超連接等於百度的a標籤。

p[ calss=」warning」] 表示選擇全部class等於warning的p標籤。

4.3根據部分屬性值選擇

p[ class~=」warning」]表示包含warning這個詞的class屬性，注意不是包含這個字符串，而是包含詞，使用空格分開的詞！他根據屬性中，一個用空格分隔的詞來完成選擇。他等價與 p.class

p[ class ^=」warning」] 表示calss屬性以字符串warning開頭的p標籤。

p[ class $=」warning」] 表示calss屬性以字符串warning結尾的p標籤。

p[ class *=」warning」] 表示calss屬性包含字符串warning的p標籤。

4.4後代選擇器

#d1 h1{ color : red }表示id爲d1元素的全部後代h1字體顏色爲red。

#d1 > h1{ color : red }表示id爲d1元素的全部直接子元素h1字體顏色爲red。

#d2 + div{ color : red }表示id爲d2元素的緊接着的一個兄弟節點div的字體爲紅色。

4.5僞類選擇器

4.5.1連接僞類

a:link 表示未訪問的超連接

a:visited 表示已訪問的超連接

4.5.2動態僞類

input : focus 表示當前有輸入焦點的input元素。

p:hover 表示當前鼠標停留的元素。

button : active 表示被用戶輸入激活的元素。

注：在a標籤上設置僞類樣式時，推薦是「LOVE-HA」；link ，visited ， hover ， active

4.5.3靜態僞類

h1:first-child 選擇做用第一個子元素的 h1 。eg：

<body>
    <h2></h2>
    <h1>d1外的h1</h1>
    <div id="d1">
        <h1>d1內的h1</h1>
        <div id="d2">
            <h1>d2內的h1</h1>
        </div>
        <h1>d1內的h1</h1>
    </div>
</body>
這個就只有中間兩個被選中，由於第二個h1是d1的第一個子元素，第三個h1是d2的第一個子元素。

* : lang(fr) 選擇全部法語。這個是對語言進行選擇