CSS第一講 CSS發展史與CSS選擇器

時間 2019-11-06

標籤 css 第一發展史選擇器欄目 CSS 简体版

原文原文鏈接

1.css概要css

css：級聯樣式表（Cascading Style Sheet）簡稱「CSS」，一般又稱爲「風格樣式表（Style Sheet）」，它是用來進行網頁風格設計的，展現web表現。html

web2.0發展以下：web

html->css1.0->xml(節點查找)->xhtml->css2.0ide

css基本語法：ui

選擇器{ 屬性值1：值1；屬性值2：值2}spa

注：css主要是由選擇器和屬性組成。設計

2.css選擇器xml

css選擇器是一種將css效果應用到某一個或者多個xhtml標記上的一種選擇機制。htm

css主要選擇器以下：blog

①類選擇器

名稱以點開始，字母或數字結尾。

如.ulstyle{ }

能夠重複使用，對多個標籤應用。

html標籤，須要使用class屬性來引用該樣式

如：<ul class=」.ulstyle」>…</ul>

②ID選擇器

以#開始，數字或字母結尾。

#top{ }

不能重複使用

html標記須要引用id屬性

如：<p id=」top」>...</p>

③標籤選擇器

名稱均爲html標籤

如：p{ }

使用到該名稱標籤

css效果做用到改標籤

④派生選擇器（後代選擇器）

主要由前幾種選擇器變化而來，主要是根據前幾種選擇器來控制內部子元素的表現效果。

如：#top ul{ }

控制#top選擇器中的ul元素

#top .ulstyle li{ }

控制#top選擇器中.ulstyle中的li元素

⑤羣組選擇器

控制多個並列元素的效果

如：ul,ol,li{ }

對三個元素同時起做用

⑥通配選擇器

*號爲名稱，對全部元素起做用

⑦僞類選擇器

特定的選擇器以後加：後跟狀態屬性，主要爲控制元素的狀態效果

a:hover{ }

控制超連接

常見有超連接標記的四種狀態

效果控制是超連接四種狀態的效果

link：默認狀態

hover：鼠標通過狀態

visited：已訪問的效果

active：按下狀態的效果

選擇器案例

效果展現：

代碼以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
body{ background:#6F0;}
.ulstyle{ background:#0C9;color:#F60;}
#top{ background:#FF0;color:#00F;}
ul li em{ background:#000;color:#CCC;}
ul,li{ background:#F00;color:#FF0;}
*{ font-size:24px;}
a:link{ text-decoration:none;}
a:visited{ color:#00F;}
a:hover{ font-size:80px; color:#FFF;}
a:active{ color:#FF0;}
</style>
</head>

<body>
<ul>
<li class="ulstyle">世界你好</li>
<li id="top">世界你好</li>
<li><em>中國人民</em>政府</li>
<li>×××</li>
<li>陝西省人民政府</li>
<li>百度中國互聯網巨頭</li>
<a href="#">hssdfhsfhjsjshfkkk
</ul>
</body>
</html>

簡單css案例展現

代碼以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-size:12px; font-family:"微軟雅黑",「幼圓」,"黑體",「宋體」;}
ul,li,ol{ list-style:none;}
ul{ ; height:25px; border:1px solid #CCC; margin:100px auto;}
li{ float:left; ; text-align:center; background:#999; height:25px; line-height:25px; cursor:pointer;}
ul li ul{ border:none; ; display:none; margin:0px;}
li:hover{ background:#F90; color:#FFF;}
li:hover ul{ display:block}
</style>
</head>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。