HTML4.01+CSS2.0教程（一）

2/22/2017 10:26:28 PM

聯(lián)網(wǎng)狀態(tài)下代碼高亮步驟：

單擊左下角“M”標(biāo)志，選擇GFM，在代碼開(kāi)始標(biāo)志“```”后面加入代碼類(lèi)型，如“html/css/js”

CSS

Q1:當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？

A:一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中：
優(yōu)先級(jí)從高到低排列為：

  1. head元素中!important
  2. body元素中inline style內(nèi)聯(lián)樣式（行內(nèi)樣式）
  3. head元素中id選擇器（無(wú)論這個(gè)id聲明放在class選擇器上面還是下面）
  4. head元素中class選擇器（同一個(gè)body元素內(nèi)應(yīng)用到兩個(gè)及以上的class，無(wú)論body中class值如何排序，head元素中靠?jī)?nèi)的class選擇器優(yōu)先級(jí)高于靠外的class選擇器）
  5. head元素中tag標(biāo)簽選擇器
  6. css外部樣式表
  7. body標(biāo)簽內(nèi)style樣式
  8. 瀏覽器缺省設(shè)置(即默認(rèn)樣式)
    如： 
<head>
<style type="text/css">
    .bgc1{background-color: #F00 !important;}
    #bgc{background-color: #00F;}
    .bgc2{background-color: #0F0;}
</style>
</head>
<body style="background-color: yellow">
<p class="bgc2 bgc1" id="bgc" style="background-color: #000">背景顏色</p>
</body>

顯示效果如下圖：


圖片說(shuō)明文字

CSS語(yǔ)法

CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
CSS 對(duì)大小寫(xiě)不敏感。不過(guò)存在一個(gè)例外：如果涉及到與HTML文檔一起工作的話(huà)，class和id名稱(chēng)對(duì)大小寫(xiě)是敏感的。
格式：

h1{color:red; font-size:14px;font-family: Georgia, Palatino, serif;}

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

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

選擇器分組：

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

繼承：
如果不希望 "Verdana, sans-serif" 字體被所有的子元素繼承，又要照顧忽略繼承和body元素規(guī)則的瀏覽器，可以單獨(dú)為這些子元素創(chuàng)建特殊規(guī)則。

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

td, ul, ol, ul, li, dl, dt, dd{font-family: Verdana, sans-serif;}

p{font-family: Times, "Times New Roman", serif;}

派生選擇器：
根據(jù)文檔的上下文關(guān)系來(lái)確定某個(gè)標(biāo)簽的樣式。

<head>
<style>
li strong {
    font-style: italic;
    font-weight: normal;
  }
</style>
</head>
<body>
<p><strong>我是粗體字，不是斜體字，因?yàn)槲也辉诹斜懋?dāng)中，所以這個(gè)規(guī)則對(duì)我不起作用</strong></p>

<ol>
<li><strong>我是斜體字。這是因?yàn)?strong 元素位于 li 元素內(nèi)。</strong></li>
<li>我是正常的字體。</li>
</ol>
</body>

顯示效果如下圖：


圖片說(shuō)明文字

id選擇器：
一個(gè)頁(yè)面可以有很多不同的id選擇器，但一個(gè)id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次。

<style>
#red {color:red;}
#green {color:green;}
</style>
<body>
<p id="red">這個(gè)段落是紅色。</p>
<p id="green">這個(gè)段落是綠色。</p>
</body>

即使被標(biāo)注為 sidebar 的元素只能在文檔中出現(xiàn)一次，這個(gè) id 選擇器作為派生選擇器也可以被使用很多次：

#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;
    }

在這里，與頁(yè)面中的其他 p 元素明顯不同的是，sidebar 內(nèi)的 p 元素得到了特殊的處理，同時(shí)，與頁(yè)面中其他所有 h2 元素明顯不同的是，sidebar 中的 h2 元素也得到了不同的特殊處理。
類(lèi)選擇器

  • 格式一
<style>
.center {text-align: center}
</style>
<body>
<h1 class="center">類(lèi)選擇器</h1>
</body>
  • 格式二
<style>
td.fancy {color: #f60;background: #666;}
</style>
<body>
<td class="fancy">
</body>

注意：類(lèi)名的第一個(gè)字符不能使用數(shù)字！它無(wú)法在 Mozilla 或 Firefox 中起作用。
屬性選擇器
可以為擁有指定屬性的 HTML 元素設(shè)置樣式,在為不帶有 class 或 id 的表單設(shè)置樣式時(shí)特別有用。

  • 格式一
<style>
[title]
{
color:red;
}
</style>
  • 格式二
<style>
[title="W3School"]
{
border:5px solid blue;
}
</style>
  • 格式三
<style>
input[type="text"]
{
  width:150px;
  display:block;}
input[type="button"]
{
  width:120px;
  margin-left:35px;}
</style>
<body>
<form name="input" action="" method="get">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
</body>

顏色：

Hexadecimals（或hex）是十六進(jìn)制數(shù)字，符號(hào) 0-9代表數(shù)值零到九，再使用A、B、C、D、E、F 代表數(shù)值十到十五。即用0到F可為我們提供16個(gè)可能的數(shù)值。
16個(gè)值和6個(gè)位置意味著我們有16的6次方，即超過(guò)1600萬(wàn)種可能的顏色。

Hex code遵循rgb（紅-綠-藍(lán)）格式。

  • 前兩位代表紅色的數(shù)量（紅色：#FF0000）
  • 第三四位代表綠色的數(shù)量（綠色：#00FF00）
  • 第五六位代表藍(lán)色的數(shù)量（藍(lán)色：#0000FF）
  • 平均混合的顏色可縮短為三位（紅色#F00）
    屬性:值；
    三種寫(xiě)法
color:#000---#fff;
color:rgb(0,0,0);---rgb(255,255,255);
color:rgb(0%,0%,0%);---rgb(100%,100%,100%)

正則表達(dá)式

a{1,4}
a
aa
aaa
aaaa

[fa|ba|ca|fafdafsaf]
fa
ba
ca
fafdafsaf

ab{0,1}cde{0,1}f{0,1}g
或ab?cde?f?g
acdefg
abcdfg
abcdeg
abcdg
acdeg
acdfg
acdg

HTML

格式

<form id="form" action="form.php" method="post" style="font-size:25px;background-color:red;">
</form>

pre標(biāo)簽

html中對(duì)空格不敏感。pre元素可定義預(yù)格式化的文本，被包圍在pre元素中的文本通常會(huì)保留空格和換行符，而文本也會(huì)呈現(xiàn)為等寬字體。
pre標(biāo)簽的一個(gè)常見(jiàn)應(yīng)用就是用來(lái)表示計(jì)算機(jī)的源代碼。
可以導(dǎo)致段落斷開(kāi)的標(biāo)簽（例如標(biāo)題、p和address標(biāo)簽）絕不能包含在pre所定義的塊里。
屬性="值"：width="number"，描述：定義每行的最大字符數(shù)（通常是40、80或132）
如：

<pre>
   鵝鵝鵝
曲項(xiàng)向天歌
                    白  毛浮綠   水
                    紅掌撥清
                    波
</pre>

顯示效果如下圖：


圖片說(shuō)明文字

abbr標(biāo)簽

abbr標(biāo)簽指示簡(jiǎn)稱(chēng)或首字母縮寫(xiě)
屬性="值"：title="全拼"

<abbr title="etcetera">etc.</abbr>
<br />
<abbr title="World Wide Web">WWW</abbr>

顯示效果如下圖：鼠標(biāo)移到文本區(qū)域會(huì)顯示完整的單詞或句子。


圖片說(shuō)明文字
圖片說(shuō)明文字

bdo標(biāo)簽

bdo 元素可覆蓋默認(rèn)的文本方向
屬性="值"：dir="ltr/rtl"，定義文字的方向。

<bdo dir="rtl">Here is some Hebrew text</bdo>

顯示效果如下圖：


圖片說(shuō)明文字

做一個(gè)表單

<!DOCTYPE html>
<html>
<head>
    <title>登錄注冊(cè)</title>
</head>
<body>
<form id="form" action="form.php" method="post" enctype="multipart/form-data">
<fieldset>
    <legend>用戶(hù)</legend>
    <input id="hiddenField" type="hidden" name="hiddenField" value="hiddenvalue"/>
    <label for="username">用戶(hù)：</label>
    <input id="username" type="text" name="username" value="" size="15" maxlength="25"/>
    <br/>
    <label for="pass">密碼：</label>
    <input id="password" type="password" name="pass" value="" size="15" maxlength="25"/>
</fieldset>

    <fieldset>
        <legend>性別</legend>
        <label for="sex">基佬</label>
        <input id="sex" type="radio" value="1" name="sex"/>
        <label for="sex">同志</label>
        <input id="sex" type="radio" value="2" name="sex"/>
        <label for="sex">玻璃</label>
        <input id="sex" type="radio" value="3" name="sex"/>
    </fieldset>

    <fieldset>
        <legend>愛(ài)好</legend>
        <label for="fav">吃飯</label>
        <input id="fav" type="checkbox" value="1" name="fav"/>
        <label for="sex">睡覺(jué)</label>
        <input id="fav" type="checkbox" value="2" name="fav"/>
        <label for="sex">打豆豆</label>
        <input id="fav" type="checkbox" value="3" name="fav"/>
        <label for="sex">自閉癥</label>
        <input id="fav" type="checkbox" value="4" name="fav"/>
    </fieldset>
<fieldset>
    <legend>靚照</legend>
    <label for="myimage">照片上傳</label>
    <input id="myimage" type="file" value="" name="myimage" size="35" maxlength="255"/>
</fieldset>
<fieldset>
    <legend>提交</legend>
    <input id="submit" type="submit" value="提交" name="submit"/>
    <input id="reset" type="reset" value="重置" name="reset"/>
</fieldset>
</form>
</body>
</html>

顯示效果如下圖：


圖片說(shuō)明文字

塊級(jí)元素：

<div></div>
<p></p>
<h></h>
<ul></ul>
<table></table>
<dt></dt>

  1. <p>內(nèi)不能嵌套任何塊級(jí)元素，<h>不能嵌套自身和其他<h>，<dt>不能嵌套自身（嵌套自身顯示網(wǎng)頁(yè)效果沒(méi)有問(wèn)題，但在網(wǎng)頁(yè)上按"ctrl+shift+c"查看源代碼是有問(wèn)題的）；內(nèi)聯(lián)元素不能嵌套塊級(jí)元素，只能包含其他內(nèi)聯(lián)元素；塊元素可以包含內(nèi)聯(lián)元素和某些特定的塊元素。
    <p><div></div></p>—— 錯(cuò)
    <span><div></div></span> —— 錯(cuò)
    <div><p></p></div>—— 對(duì)
    <div><div><p></p></div></div>—— 對(duì)
    <div><h1></h1><p></p></div> —— 對(duì)
    <a href=http://www.cnblogs.com/jyybeam/p/"#"> —— 對(duì)
    <p><p></p></p>—— 錯(cuò)
    <h2><h2></h2></h2>—— 錯(cuò)
    <h2><h3></h3></h2>—— 錯(cuò)
    <p><h2></h2></p>—— 錯(cuò)
    <h2><p></p></h2>—— 對(duì)
    <dt><dt></dt></dt>—— 錯(cuò)

  2. 有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)嵌元素，不能再包含塊級(jí)元素，這幾個(gè)特殊的標(biāo)簽是：
    　　h1、h2、h3、h4、h5、h6、p、dt。

  • 當(dāng)輸入<h2><h2></h2></h2>時(shí)，瀏覽器出現(xiàn)的html文檔是：<h2></h2><h2></h2>，原本是嵌套的屬于父子關(guān)系的標(biāo)簽成為了2個(gè)兄弟標(biāo)簽。
  • 當(dāng)輸入<h2><h3></h3></h2>時(shí)，瀏覽器出現(xiàn)的html文檔是：<h2></h2><h3></h3>，原本是嵌套的屬于父子關(guān)系的標(biāo)簽成為了2個(gè)兄弟標(biāo)簽。
  • 當(dāng)輸入<p><p></p></p>時(shí)，瀏覽器出現(xiàn)的html文檔是：<p></p><p></p><p></p>,原本是嵌套的屬于父子關(guān)系的標(biāo)簽成為了3個(gè)兄弟標(biāo)簽。
  • 當(dāng)輸入<p><h2></h2></p>時(shí)，瀏覽器出現(xiàn)的html文檔是：<p></p><h2></h2><p></p>。
  • 當(dāng)輸入<dt><dt></dt></dt>時(shí)，瀏覽器出現(xiàn)的html文檔是：<dt></dt><dt></dt>。
  • 當(dāng)輸入<h2><p></p></h2>時(shí)，瀏覽器出現(xiàn)的html文檔是：<h2><p></p></h2>，是正確的用法。

創(chuàng)建CSS

插入樣式表的三種方法

  1. 外部樣式表
    樣式需要應(yīng)用于很多頁(yè)面時(shí)，使用外部樣式表可以通過(guò)改變一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀(guān)。每個(gè)頁(yè)面使用 <link> 標(biāo)簽鏈接到樣式表。
    <link> 標(biāo)簽在（文檔的）頭部：
    <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>）
    外部樣式表中不能能包含任何的 html 標(biāo)簽，樣式表應(yīng)該以 .css 擴(kuò)展名進(jìn)行保存。
    格式如下
    hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}
  2. 內(nèi)部樣式表
    當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。你可以使用 <style> 標(biāo)簽在html文檔頭部定義內(nèi)部樣式表，就像這樣:
<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>
  1. 內(nèi)聯(lián)樣式
    當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí),可以使用內(nèi)聯(lián)樣式。
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,162評(píng)論 1贊 92
  • 1. 介紹 瀏覽器可能是最廣泛使用的軟件。本書(shū)將介紹瀏覽器的工作原理。我們將看到，當(dāng)你在地址欄中輸入google....
    康斌閱讀 2,164評(píng)論 7贊 18
  • 簡(jiǎn)介瀏覽器可以被認(rèn)為是使用最廣泛的軟件，本文將介紹瀏覽器的工 作原理，我們將看到，從你在地址欄輸入google.c...
    聽(tīng)風(fēng)閣閱讀 3,397評(píng)論 0贊 7
  • 人生每一天忙忙碌碌，究竟我要到了什麼？很多人可能會(huì)問(wèn)自己，很多人可能一生都不會(huì)問(wèn)自己？也許有逃避有麻木有茫然不知該...
    好彩妹閱讀 195評(píng)論 0贊 0
  • 本來(lái)是要找《法醫(yī)秦明》的，下載了搜狐視頻。后來(lái)無(wú)意間看到這個(gè)，突然就想看看這部早就聽(tīng)說(shuō)過(guò)的電影。 因?yàn)闀r(shí)間和網(wǎng)速的...
    歌唄lrf閱讀 478評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容