亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS基礎(chǔ)教程筆記

2i18ns / 1044人閱讀

摘要：屬性只能在每個(gè)文檔中出現(xiàn)一次選擇器和派生選擇器在現(xiàn)代布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器元素也可以基于它們的類而被選擇屬性選擇器可以為擁有指定屬性的元素設(shè)置樣式，而不僅限于和屬性。

博客主要記錄學(xué)習(xí)的筆記，如有錯(cuò)誤，歡迎指出
來(lái)源：http://www.w3school.com.cn/

簡(jiǎn)介 CSS概述

CSS 指層疊樣式表 (Cascading Style Sheets)?

解決內(nèi)容與表現(xiàn)分離的問(wèn)題

多個(gè)樣式定義可層疊為一

層疊次序

一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。

瀏覽器缺省設(shè)置

外部樣式表

內(nèi)部樣式表（位于 標(biāo)簽內(nèi)部）

內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

CSS基礎(chǔ)語(yǔ)法 CSS語(yǔ)法

CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。

selector {declaration1; declaration2; ... declarationN }?

選擇器通常是您需要改變樣式的 HTML 元素。

每條聲明由一個(gè)屬性和一個(gè)值組成。

屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開(kāi)。
?CSS 語(yǔ)法

值的不同寫法和單位?

除了英文單詞 red，我們還可以使用十六進(jìn)制的顏色值 #ff0000：

p { color: #ff0000; }

為了節(jié)約字節(jié)，我們可以使用 CSS 的縮寫形式：

p { color: #f00; }

我們還可以通過(guò)兩種方法使用 RGB 值：

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

?
請(qǐng)注意，當(dāng)使用 RGB 百分比時(shí)，即使當(dāng)值為 0 時(shí)也要寫百分比符號(hào)。但是在其他的情況下就不需要這么做了。比如說(shuō)，當(dāng)尺寸為 0 像素時(shí)，0 之后不需要使用 px 單位，因?yàn)?0 就是 0，無(wú)論單位是什么。

引號(hào)?

如果值為若干單詞，則要給值加引號(hào)：

?p {font-family: "sans serif";}?

?

多重聲明

應(yīng)當(dāng)在每個(gè)生命后邊加上;，同時(shí)每行只寫一個(gè)聲明增加可讀性

p {
  text-align: center;
  color: black;
  font-family: arial;
}
空格和大小寫

增加空格以便美觀

css不會(huì)區(qū)分大小寫，但是與HTML有關(guān)的id class需要大小寫

CSS高級(jí)語(yǔ)法 選擇器的分組

被分組的選擇器就可以分享相同的聲明。

用逗號(hào)將需要分組的選擇器分開(kāi)?。

h1,h2,h3,h4,h5,h6 {
  color: green;
}

?

繼承及其問(wèn)題

子元素從父元素繼承屬性。
但是以下屬性不能被繼承（多謝一樓提醒）：

邊框?qū)傩?/p>

邊界屬性

補(bǔ)白屬性

背景屬性

定位屬性

布局屬性

元素寬高屬性

子元素將繼承最高級(jí)元素（在本例中是 body）所擁有的屬性

有些瀏覽器不支持繼承：IE6，Netscape4

如果不希望子類繼承，則可以創(chuàng)建一個(gè)針對(duì) p 的特殊規(guī)則，這樣它就會(huì)擺脫父元素的規(guī)則

body {
font-family: Verdana, sans-serif;
}?

CSS派生選擇器

派生選擇器：通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，你可以使標(biāo)記更加簡(jiǎn)潔。
就是有兩個(gè)選擇器～

li strong {
    font-style: italic;
    font-weight: normal;
}?

?

id選擇器 id選擇器

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來(lái)定義。

id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次

#red {color:red;}
#green {color:green;}?

id 選擇器和派生選擇器

在現(xiàn)代布局中，id 選擇器常常用于建立派生選擇器。?

#sidebar p {
 font-style: italic;
 text-align: right;
 margin-top: 0.5em;
}?
一個(gè)選擇器，多種用法

同派生器一樣，可以對(duì)應(yīng)id下多個(gè)選擇

#sidebar p {
 font-style: italic;
 text-align: right;
 margin-top: 0.5em;

}

#sidebar h2 {
 font-size: 1em;
 font-weight: normal;
 font-style: italic;
 margin: 0;
 line-height: 1.5;
 text-align: right;
}

?

CSS類選擇器 Class選擇器 
.center {text-align: center}

?類名的第一個(gè)字符不能使用數(shù)字！它無(wú)法在 Mozilla 或 Firefox 中起作用。

?和 id 一樣，class 也可被用作派生選擇器：?

.fancy td {
 color: #f60;
 background: #666;
}?

元素也可以基于它們的類而被選擇：?

td.fancy {
 color: #f60;
 background: #666;
}

?

CSS屬性選擇器

可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。

屬性選擇器

下面的例子為帶有 title 屬性的所有元素設(shè)置樣式：

[title]
{
 color:red;
}

?

屬性和值選擇器

下面的例子為 title="W3School" 的所有元素設(shè)置樣式：

[title=W3School]
{
  border:5px solid blue;
}

?

屬性和值選擇器 - 多個(gè)值

下面的例子為包含指定值的 title 屬性的所有元素設(shè)置樣式。適用于由空格分隔的屬性值：

[title~=hello] { color:red; } //所有包含helo的title屬性里 都有效
參考手冊(cè)
選擇器 描述
[attribute] 用于選取帶有指定屬性的元素。
[attribute=value] 用于選取帶有指定屬性和值的元素。
[attribute~=value] 用于選取屬性值中包含指定詞匯的元素。
[attribute|=value] 用于選取帶有以指定值開(kāi)頭的屬性值的元素，該值必須是整個(gè)單詞。
[attribute^=value] 匹配屬性值以指定值開(kāi)頭的每個(gè)元素。
[attribute$=value] 匹配屬性值以指定值結(jié)尾的每個(gè)元素。
[attribute*=value] 匹配屬性值中包含指定值的每個(gè)元素。

?

如何創(chuàng)建CSS 如何插入樣式表

當(dāng)讀到一個(gè)樣式表時(shí)，瀏覽器會(huì)根據(jù)它來(lái)格式化 HTML 文檔。插入樣式表的方法有三種：?

外部樣式表

當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過(guò)改變一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀。每個(gè)頁(yè)面使用 標(biāo)簽鏈接到樣式表。 標(biāo)簽在（文檔的）頭部：

瀏覽器會(huì)從文件 mystyle.css 中讀到樣式聲明，并根據(jù)它來(lái)格式文檔。?

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

.css擴(kuò)展名，20px中間不能留空格！

內(nèi)部樣式表

當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。你可以使用

?

內(nèi)聯(lián)樣式

由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會(huì)損失掉樣式表的許多優(yōu)勢(shì)。請(qǐng)慎用這種方法，例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。

要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：


This is a paragraph

?

多重樣式

如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過(guò)來(lái)。

例如，外部樣式表?yè)碛嗅槍?duì) h3 選擇器的三個(gè)屬性：

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
}

而內(nèi)部樣式表?yè)碛嗅槍?duì) h3 選擇器的兩個(gè)屬性：

h3 {
  text-align: right; 
  font-size: 20pt;
}

假如擁有內(nèi)部樣式表的這個(gè)頁(yè)面同時(shí)與外部樣式表鏈接，那么 h3 得到的樣式是：

color: red; 
text-align: right; 
font-size: 20pt;

即顏色屬性將被繼承于外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會(huì)被內(nèi)部樣式表中的規(guī)則取代。

和繼承非常相似?。?/strong>?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110845.html

相關(guān)文章

  • Java入門請(qǐng)不要放棄，學(xué)習(xí)路線以及側(cè)重點(diǎn)分析

    摘要：而面向搜索引擎，就是我們要及時(shí)的使用百度谷歌遇到問(wèn)題無(wú)法解決，先別急著放棄，可以去網(wǎng)絡(luò)尋找答案，你的坑大部分別人都已經(jīng)走過(guò)了，大部分都可以找到合適的解決方案。 showImg(https://segmentfault.com/img/remote/1460000019236352?w=866&h=456); 前言： ●眾多的語(yǔ)言，到底哪一門才是適合我的？●我們?yōu)槭裁匆獙W(xué)習(xí)Java語(yǔ)言呢...

    mochixuan 評(píng)論0 收藏0

  • WEB前端資源集（一）

    摘要：資源網(wǎng)站篇全球最大中文社區(qū)，為專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺(tái)伯樂(lè)在線專業(yè)的互聯(lián)網(wǎng)職業(yè)社區(qū)創(chuàng)意工作者們的社區(qū)。 做前端已經(jīng)一年了，開(kāi)發(fā)中換過(guò)很多開(kāi)發(fā)工具，遇到bug到處求解，以及自學(xué)時(shí)到處找相關(guān)文章及教程，所以經(jīng)過(guò)這么多的風(fēng)波，我總結(jié)了一些對(duì)大家有幫助的網(wǎng)站，主題也將長(zhǎng)期更新。 資源網(wǎng)站篇 CSDN：全球最大中文IT社區(qū)，為IT專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺(tái) ...

    OnlyMyRailgun 評(píng)論0 收藏0

  • WEB前端資源集（一）

    摘要：資源網(wǎng)站篇全球最大中文社區(qū)，為專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺(tái)伯樂(lè)在線專業(yè)的互聯(lián)網(wǎng)職業(yè)社區(qū)創(chuàng)意工作者們的社區(qū)。 做前端已經(jīng)一年了，開(kāi)發(fā)中換過(guò)很多開(kāi)發(fā)工具，遇到bug到處求解，以及自學(xué)時(shí)到處找相關(guān)文章及教程，所以經(jīng)過(guò)這么多的風(fēng)波，我總結(jié)了一些對(duì)大家有幫助的網(wǎng)站，主題也將長(zhǎng)期更新。 資源網(wǎng)站篇 CSDN：全球最大中文IT社區(qū)，為IT專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺(tái) ...

    shengguo 評(píng)論0 收藏0

  • WEB前端資源集（一）

    摘要：資源網(wǎng)站篇全球最大中文社區(qū)，為專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺(tái)伯樂(lè)在線專業(yè)的互聯(lián)網(wǎng)職業(yè)社區(qū)創(chuàng)意工作者們的社區(qū)。 做前端已經(jīng)一年了，開(kāi)發(fā)中換過(guò)很多開(kāi)發(fā)工具，遇到bug到處求解，以及自學(xué)時(shí)到處找相關(guān)文章及教程，所以經(jīng)過(guò)這么多的風(fēng)波，我總結(jié)了一些對(duì)大家有幫助的網(wǎng)站，主題也將長(zhǎng)期更新。 資源網(wǎng)站篇 CSDN：全球最大中文IT社區(qū)，為IT專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺(tái) ...

    lanffy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

2i18ns

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<