（1） css的核心基礎

時間 2020-08-17

標籤 css 核心基礎欄目 CSS 简体版

原文原文鏈接

css的核心基礎css

一、css的基本語法
在具體使用css以前，請各位兄弟姐妹先思考一個生活中的問題，通常狀況下咱們是如何描述一我的的呢？
小明{
民族：漢族；
性格：溫柔；
性別：男；
體重：68kg；
身高：172CM；
}html

這個表實際是由3個要素組成的，即姓名、屬性、屬性值。經過這樣一張表，就能夠把一我的的基本狀況描述出來了。表中每一行分別描述了一我的的某一種屬性，以及該屬性的屬性值。
css的規則：
三級標題{ 用英文寫出來：h3{
字體：宋體； font-family：宋體；
大小：15像素； font-size：15px；
顏色：紅色； color：red；
裝飾：下劃線； text-decoration：underline；
} }
**css的做用就是設置網頁的各個組成部分的表現形式。瀏覽器

二、css選擇器（先了解三個）
（1）標記選擇器服務器

（2）類別選擇器網絡

（3）ID選擇器框架

（1）標記選擇器案例演示：
style標籤中的紅色字體爲「標記選擇器」字體

<!doctype html>
<html>url

<head>spa

<title>css的標記選擇器</title>

h1{

color:red;

font-size:25px;

}

</style>

</head>

<body>

<h1>css的標記選擇器</h1>

</body>

</html>

（2）class類別選擇器案例演示：

<!doctype html>

<html>

<head>

<title>css的類別選擇器</title>

.red{

color:red;

font-size:18px;

}
.green{color:green;

font-size:35px;

}
</style>

</head>

<body>
<p class="red">選擇器1</p>
<p class="green">選擇器2</p

</html>

「<P>默認爲正常粗細<h3>默認爲粗體字」

（3）ID選擇器案例演示：

<!doctype html>

<html >

<head>

<title>ID選擇器</title>

#bold{
font-weight:bold;
}
#green{font-size:20px;
color:#009900;
}

</style>

</head>

<body>

<p id="bold">ID選擇器1</p>

<p id="green">ID選擇器2</p>

<p id="green">ID選擇器3</p>

<p id="bold green">ID選擇器4</p>

</body>

</html>

三、在html中使用css的方法。
對css有了大體的瞭解後，就可使用css對頁面進行全方位的控制，接下來將會介紹如何在html中使用css,包括行內樣式、內嵌式、連接式、導入式等，而後再探討各類方式的優先級問題。

（1）行內樣式：
不推薦使用，行內樣式是最爲簡單的css使用方法，但因爲須要爲每一個標記設置style屬性，，後期維護成本太高，並且網頁更容易過胖，因此省略介紹。
（2）內嵌式：
內嵌式表：就是將css寫在在<head>與</head>之間，而且用<style>和</style>標記進行聲明。
<!doctype html>

<head>

<title>內嵌樣式表</title>

p{color:red;

text-decoration:underline;

font-weight:bold;

font-size:25px;

}

</style>

</head>

<body>

<p>這是第一行正文內容......</p>

<p>這是第二行正文內容......</p>

<p>這是第三行正文內容......</p>

</body>

</html>

全部的css的代碼部分被集中在同一個區域，僅適用於對特殊的頁面設置單獨的樣式風格。

（3）連接式：
鏈接式是最爲實用的，它將html頁面自己與css樣式風格分離爲兩個或者多個文件，實現了頁面框架html代碼與美工css的代碼的徹底分離，後期維護十分方便。

案列：
連接式樣式表.html：
<!doctype html>

<head>

</head>

<body>

<h2>css標題</h2>

<p>這是正文內容。。。。。</p>

<h2>css標題</h2>

<p>這是正文內容。。。。</p>

</body>

</html>

而後建立文件「01（連接式樣式表）.css」其內容以下所示，保存文件時確保這個文件和上面的「連接式樣式表.html」在同一個文件夾，不然href屬性中須要帶有正確的文件路徑。
01（連接式樣式表）.css：（能夠任意規劃屬性）
h2{

color:red;

}

color:blue;

text-decoraton:underline;

font-weight:bold;

font-size:20px;

}
連接式樣式表的最大優點在於css代碼與html代碼徹底分離，而且同一個css文件能夠被不一樣的html連接使用。

（4）導入樣式：
導入樣式表與連接式樣式表的功能基本相同，相似於內嵌式的效果，放在<style>與</style>標記之間。
案列：

<!doctype html>

<head>

<title>導入樣式表</title>

<!--

@import url(01（導入樣式@import）.css);

@import url(02（導入樣式@import）.css);

-->

</style>

</head>

<body>

<h2>css標題</h2>

<p>這是正文內容。。。。。</p>

<h2>css標題</h2>

<p>這是正文內容。。。。</p>

<h3>新增長的標題</h3>

<p>新增長的正文內容。。。。。</p>

</body>

</html>

而後建立文件「01（導入樣式@import）.css 」、「02（導入樣式@import）.css 」其內容以下所示，保存文件時確保這個文件和上面的「導入樣式.html」在同一個文件夾，不然href屬性中須要帶有正確的文件路徑。

（1） 01（導入樣式@import）.css
h2{

color:blue;

}

color:red;

text-decoration:underline;

font-weight:bold;

font-size:15px;

}
（2）02（導入樣式@import）.css ：

h3{

color:green;

font-style:italic;

font-size:40px;

}
導入樣式表的最大用處在於讓一個html文件導入不少的樣式表。

（1）行內樣式、內嵌式、連接式、導入式這四種css方式的優先級規則：（導入式和連接式統稱爲外部樣式）

行內樣式 < 嵌入式 < 外部樣式

(2)外部樣式中，出如今後面的優先級高於出如今前面的。

（4）css簡單體驗。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css初體驗</title>
<style type="text/css">
h1{color:white;
background-color:blue;
text-align:center;
padding:15px;
}
img{
float:left;
border:1px; #gray dashed;
margin:5px;
}
p{
font-size:14px;
text-indent:2em;
line-height:1.5;
padding:5px;
}
body{
margin:0px;
background:gray;
}

img{
float:left;
border:1px #9999cc dashed;
margin:5px;
height:158;
width:158;
}

#p1{
border-right:3px red double;
}
#p2{
border-right:3px orange double;
}
</style>
</head>
<body>
<h1>互聯網發展的起源</h1>
<img src="123.jpg" />
<p id="p1">1968 年，美國國防部高級研究計劃局組建了一個計算機網，名爲 ARPANET（英文 Advanced Research Projects Agency Network 的縮寫，又稱「阿帕」網）。按央視的數據，新生的「阿帕」網得到了國會批准的 520 萬美圓的籌備金及兩億美圓的項目總預算，是當年中國國家外匯儲備的 3 倍。時逢美蘇冷戰，美國國防部認爲，若是僅有一個集中的軍事指揮中心，萬一被蘇聯摧毀，全國的軍事指揮將處於癱瘓狀態，因此須要設計一個分散的指揮系統。它由一個個分散的指揮點組成，當部分指揮點被摧毀後其餘點仍能正常工做，而這些分散的點又能經過某種形式的通訊網取得聯繫。</p>
<p id="p2">1969 年，「阿帕」網第一期投入使用，有 4 個節點，分別是加利福尼亞大學洛杉磯分校、加利福尼亞大學聖巴巴拉分校、斯坦福大學以及位於鹽湖城的猶它州州立大學。位於各個結點的大型計算機採用分組交換技術，經過專門的通訊交換機（IMP）和專門的通訊線路相互鏈接。一年後「阿帕」網擴大到 15 個節點。1973 年，「阿帕」網跨越大西洋利用衛星技術與英國、挪威實現鏈接，擴展到了世界範圍。TCP/IP（Transmission Control Protocol/Internet Protocol）即傳輸控制協議 / 因特網協議，又名網絡通訊協議，是 Internet 最基本的協議、Internet 國際互聯網絡的基礎，由網絡層的 IP 協議和傳輸層的 TCP 協議組成（來源於百度百科）。TCP/IP 協議定義了電子設備如何連入因特網，以及數據如何在它們之間傳輸。今後，全球的通訊設施用上了同一種語言。HTTP（Hypertext Transfer Protocol，超文本傳送協議）則定義了 Web 客戶端怎樣向萬維網服務器請求萬維網文檔，以及服務器怎樣把文檔傳送給瀏覽器。HTTP 提供了訪問超文本信息的功能，是 Web 瀏覽器和 Web 服務器之間的應用層通訊協議。</p>
</body>
</html>