CSS入門

最後更新：2017-06-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：邊框優先大小 xhtml 1.0 through 詳細 www mil 1.2

1 CSS入門
1.1 引入
html：負責網頁的結構
css：負責網頁的美觀（樣式）
1.2 體驗

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css入門</title>
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>
</head>

1.3 定義
CSS（Cascading Style Sheet 層疊樣式表）簡稱，樣式。
主要負責網頁的美觀。
1.4 css的使用方式
1）行內樣式
注意：
1）使用標籤的style屬性進行css控制，css寫在style屬性值中
2）弊端：只能控制一個標籤的樣式
<a href="xxxx" style="font-size:19px;color:#090">超連結</a>

2）內部樣式
注意：
1）使用style的標籤進行css控制，css內容寫在style標籤體內
2）一次控制多個標籤的樣式
3）和html標籤混雜在一起，不好維護。css內容無法在多個html頁面中重用
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>

3）外部樣式（推薦使用）
注意：
1）建立獨立尾碼為css的檔案，css內容寫在該檔案中
2）在使用css的html頁面中，匯入外部css檔案


<link href="01.css" rel="stylesheet"/>

2 CSS文法

a{
font-size:24px;
color:#F00;
}

選取器（selector）：使用選取器來選擇需要添加樣式的標籤。
CSS屬性（property）：給選擇的標籤添加什麼樣式。例如，字型大小，顏色，背景.....
CSS值（value）：添加樣式的具體值。12px , 紅色，背景圖片....

2.1 選取器
標籤選取器
作用：選擇同名的標籤
div{
font-size:24px;
color:#F00;
}
注意：
1）選擇到所有同名的標籤

類別選取器
作用：選擇同類的標籤
/*類別選取器*/
.c1{
font-size:24px;
color:#F00;
}
注意：
1）選擇的標籤必須有class的屬性。同類的標籤使用同名
2）當一個標籤同時被標籤選取器和類別選取器選擇，那麼類別選取器優先！！！
id選取器
作用：選擇一個標籤
#d1{
font-size:24px;
color:#0F0;
}
注意：
1）選擇的標籤必須有id屬性。
2）在同一個html頁面中，建議不要出現兩個同名的id屬性的標籤，後面使用javascript代碼選擇標籤的時候，getElementById("id屬性值")
3）id選取器的優先順序最高！

並集選取器
/*並集選取器*/
.c1,#d1{
font-size:24px;
color:#0F0;
}
作用：當多個選取器的css內容相同，那麼可以使用並集選取器來合并css內容。

交集選取器

/*交集選取器
div裡面的span標籤
*/
.c1 span{
font-size:24px;
color:#0F0;
}

作用：選擇某個選取器中的子標籤。

通用選取器

/*通用選取器*/
*{
font-size:24px;
color:#0F0;
}
作用；選擇所有的標籤
偽類別選取器
作用：控制標籤在不同狀態下的樣式。

標籤有四種狀態：
link: 沒有訪問過的狀態
hover: 滑鼠經過的狀態
active:滑鼠啟用（按下但沒有鬆開）的狀態
visited: 已經被訪問過的狀態（滑鼠點下且鬆開）

/*使用active偽類控制--滑鼠啟用（按下但沒有鬆開）的狀態*/
a:active{
font-size:24px;
color:#0F0;
text-decoration:underline;
}

/*注意：
1）在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效。
2）在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有
效的。

正確順序： link visited hover active
*/
</style>
</head>

<body>
<a href="01.css入門.html">超連結</a>
</body>
</html>

（課堂練習）案例：給表格每一行滑鼠經過加上背景

2.2 常用的CSS屬性和值
CSS文本

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css文本</title>
<style type="text/css">

body{
/*color：顏色*/
color:#F00;
/*字元間距*/
letter-spacing:10px;
/*對齊*/
text-align:center;
/*文本修飾底線-underline，中劃線(line-through) 上劃線-overline 沒有:none*/
text-decoration:line-through;
/*單詞間距*/
word-spacing:30px;
}
</style>
</head>

<body>
今天天氣不錯！
</body>
</html>

CSS字型
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css字型</title>
<style type="text/css">
body{
/*字型類型
注意：這裡的字型類型是讀取系統的預設字型庫，盡量使用通用的字型，如果你設定的字型，使用者的系統上沒有，就是使用預設的宋體顯示。
*/
/*
font-family:"宋體";
*/
/*字型大小*/
/*
font-size:24px;
*/
/*字型樣式: 正(normal預設) 斜(italic)*/
/*
font-style:italic;
*/
/*字型粗細 bold 加粗*/
/*
font-weight:bold;
*/

/* font: 簡寫屬性 */
font:italic bold 36px "黑體";
}
</style>
</head>

CSS背景
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css背景</title>
<style type="text/css">

body{
/*背景顏色*/
/*
background-color:#0CF;
*/
/*背景圖片*/
/*
background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
*/
/*設定背景圖片是否重複，或如何重複
not-repeat: 不重複
repeat-x: x軸重複
repeat-y: y軸重複
repeat: x和y軸重複(預設)
*/
/*
background-repeat:no-repeat;
*/
/*設定背景的起始位置*/
/*
/*需要畫圖詳細講解*/
background-position:top center;
*/
/*簡寫屬性*/
background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;

}
</style>
</head>

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>css列表</title>
<style type="text/css">
ul{
/*列表符號類型*/
list-style-type:none;
/*設定列表符號的圖片*/
list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);
}
</style>
</head>

<body>
系統功能表
<ul>
<li>學生管理</li>
<li>教師管理</li>
<li>課程管理</li>
</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>css表格</title>
<style type="text/css">
table{
/*合并表格的邊框*/
border-collapse:collapse;
}

</style>
</head>

<body>
<table border="1px" width="400px" height="200px" align="center">
<caption>2014年期末考試成績單</caption>
<thead>
<tr>
<th>姓名</th>
<th>班級</th>
<th>成績</th>
</tr>
</thead>
<tbody>
<tr>
<td>狗娃</td>
<td>電腦1班</td>
<td>80</td>
</tr>
<tr>
<td>狗剩</td>
<td>電腦2班</td>
<td>78</td>
</tr>
<tr>
<td>狗蛋</td>
<td>軟體1班</td>
<td>90</td>
</tr>
</tbody>
</table>
</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>css邊框</title>
<style type="text/css">
div{
/*邊框顏色*/
/*簡寫屬性
1) 預設設定方向屬性：上右下左
2）如果當前方向沒有設定顏色，那麼取對面的顏色
*/
/*
border-color:#F00;
*/
/*
border-left-color:#F00;
border-right-color:#0F0;
border-top-color:#00F;
border-bottom-color:#C90;
*/

/*邊框寬度*/
/*簡寫屬性

*/
/*
border-width:10px;
*/
/*
border-left-width:10px;
border-right-width:20px;
border-top-width:30px;
border-bottom-width:40px;
*/

/*邊框樣式(注意：邊框只有加了border-style才會顯示出來)
solid: 單實線
dashed:虛線
dotted: 點
double: 雙實線
*/

/*簡寫屬性*/
/*
border-style:solid;
*/

/*
border-left-style:solid;
border-right-style:dashed;
border-top-style:dotted;
border-bottom-style:double;
*/

/*所有邊框屬性的簡寫屬性*/
border:2px solid #F00;
}
</style>
</head>

<body>
<div>div1</div>
</body>
</html>

3 盒子模型
3.1 定義
可以把html頁面上每個標籤看做是一個盒子。

通過需求講解盒子模型：
1.將盒子的寬高變為之前的兩倍
2.將盒子厚度變為原來的兩倍
3.盒子裡面的內容距頂部內10px
4.盒子裡面的內容距離左內邊10px
5.下面的盒子距離上面的盒子10px(兩種方式實現)

盒子相關的屬性：
寬度和高度（width和height）：決定這個盒子的容量
內邊距（padding）：盒子邊框與內容的距離
邊框（border）：盒子的厚度
外邊距（margin）：盒子與盒子之間的距離

4. CSS定位
相對定位：relative（相對自己之前的位置）
絕對位置：abosolute（相對父標籤的位置）
固定定位：fixed(相對瀏覽器位置固定，不隨著捲軸的拖動而位置改變)
div{
width:100px;
height:100px;
border:10px solid #999;}
#div1{
background-color:#006;
}
#div2{
background-color:#0C0;}
#div3{
background-color:#3F0;
/*position:relative;
top:10px;
left:10px;*/
/*
position:absolute;
top:20px;
left:20px;*/
position:fixed;
top:200px;
left:450px;
}

Javascript入門
5.1 引入
html：負責網頁結構
css：負責網頁美觀
javascript：負責使用者與瀏覽器互動。（體驗校正使用者名稱）
5.2 javacript的來由
1994時，網景公司研發了livescript語言，領航者瀏覽器（把livescript語言植入到瀏覽器）
微軟公司的IE瀏覽器，後來自己花錢20億美金研發jscript

1995年，Sun公司，推出jdk1.1 .談合作。livescript-》javascript

1998，美國線上收購網景。

2003，直接關閉網景。網景6-7億美金。2千萬美金，組建謀智基金（Firefox）

scirpt的文法：
1）基礎文法（ECMA規範）
2）BOM編程（沒有統一）
3）DOM編程（沒有統一）

CSS入門

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

CSS入門

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support