1、概念
css: cascade style sheets
級聯樣式表/層疊樣式表
文法：屬性名:屬性值
原理：把屬性從标簽中分離，html提供标簽封裝資料 css提供屬性 作用到指定标簽上來控制資料的樣式
優點：
1 ：屬性和标簽的分離 實作樣式複用
2 ：比html提供更豐富，更精準的屬性樣式
3 ：可以實作頁面元素的任意布局
2 、 css與html整合的方式
<html> <!--html是根标簽：所有标簽都是其子标簽-->
<head><!--頭标簽：對目前html檔案進行統一的屬性設定-->
<title>css01</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!--引入外部css檔案-->
<link type="text/css" rel="stylesheet" href="02.css"/>
<style type="text/css">
/*css的注釋*/
/*.p1：樣式要作用于class=p1所有标簽上*/
.p1{
border:3px solid blue; /*邊框：符合屬性：粗細 樣式 顔色*/
color:#aaaaaa;/*内容顔色*/
font-size:30px;/*字型大小*/
text-align:center;/*文本對齊方式*/
background-color:#cccccc;/*背景圖檔*/
margin:5px;/*外邊距*/
}
</style>
<style type="text/css">
/*引入外部css檔案*/
@import url("01.css");
</style>
</head>
<body>
<h1>css與html整合的方式1：行内樣式表(标簽的style屬性)</h1>
<!--所有的标簽都有三個屬性：id class style
style屬性的值就是css代碼
-->
<!--行内樣式表：通過标簽的style屬性
缺點：css代碼在标簽中 無法實作樣式複用
-->
<font style="color:#ff0000;font-size:20px;font-weight:bold;font-family:楷體;border:blue double 3px;">font标簽</font><br/>
<font style="color:#ff0000;font-size:20px;font-weight:bold;font-family:楷體;border:blue double 3px;">font标簽</font><br/>
<h1>css與html整合的方式2：内部樣式表(head的style子标簽)</h1>
<!--内部樣式表：通過head的style子标簽實作
缺點：css代碼寫在目前頁面中 樣式無法被其他頁面複用
-->
<p class="p1">
p标簽1 class="p1"
</p>
<p class="p1">
p标簽1 class="p1"
</p>
<p class="p1">
p标簽1 class="p1"
</p>
<p>
p标簽1
</p>
<h1>css與html整合的方式3：外部樣式表(head的style子标簽)</h1>
<!--外部樣式表：通過@import引入外部css檔案 或者 通過head的link子标簽來引入外部css檔案-->
<hr/>
<hr/>
<h3>h3标簽</h3>
<h3>h3标簽</h3>
<h3>h3标簽</h3>
</body>
<html>
- 01.css
hr{/*樣式要作用于标簽名為hr的所有标簽上*/
width:80%;
height:10px;
margin:10px auto;
background-color:red;
}
- 02.css
h3{
color:yellow;
font-size:40px;
text-align:center;
margin:10px;
}
3 、選擇器
用于選擇目前樣式要作用于那些元素上
通配符符選擇器：*{}
标簽選擇器： 标簽名{}
類選擇器： .class值{}
id選擇器： #id值{}
組合選擇器： 選擇器1,選擇器2,選擇器3{}
派生選擇器： 父選擇器 子選擇器{}
僞類選擇器： :xxx{}
<html> <!--html是根标簽：所有标簽都是其子标簽-->
<head><!--頭标簽：對目前html檔案進行統一的屬性設定-->
<title>css02選擇器</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/*1:通配符選擇器：選中目前頁面的所有元素*/
*{
background:#cccccc;
}
/*2:标簽選擇器：選中指定标簽名的所有标簽*/
div{
border:1px solid blue;
}
/*3:類選擇器：選中指定class值的所有标簽*/
.cla1{
color:red;
}
/*4:id選擇器：選中指定id值的某個标簽*/
/*html規範：在同一個頁面中id值必須唯一*/
#font_id1{
font-size:30px;
font-weight:bold;
}
/*5:組合選擇器：樣式作用于多個選擇器選中的所有标簽上*/
#font_id2,.cla2,span{
background-color:#33aacc;
width:600px;
}
/*6：派生選擇器：樣式作用于選中的父标簽下的符合要求的子标簽*/
.cla2 font{
color:blue;
border:1px solid red;
}
/*7：僞類選擇器：實作頁面動态效果：：：浏覽器相容性差
:link a标簽未被通路過
:hover 滑鼠懸停
:visited a标簽已被通路過
:active 元素激活瞬間(a标簽+按鈕)
:focus 擷取輸入焦點(input元件)
:first-letter 第一個字元
*/
/*a标簽未被服務過的樣式*/
a:link{
font-size:40px;
background-color:#cccc33;
text-decoration:overline;
}
a:visited{
font-size:20px;
background-color:#33cccc;
text-decoration:line-through;
}
a:hover{
font-size:30px;
background-color:#cc33cc;
text-decoration:none;
}
a:active{
font-size:50px;
background-color:#33cc33;
text-decoration:line-through;
}
/*class=cla2的元素 滑鼠懸停*/
.cla2:hover{
color:red;
font-size:40px;
}
/*p标簽的第一個字元*/
p:first-letter{
color:#aaff33;
font-size:30px;
font-weight:bold;
}
/*input元件 擷取輸入焦點*/
input{
border:1px solid blue;
}
input:focus{
background-color:#aacc66;
}
</style>
</head>
<body>
<a href="#">11.jpg</a><br/>
<a href="#">12.jpg</a><br/>
<a href="#">13.jpg</a><br/>
<a href="#">14.jpg</a><br/>
<div class="cla2">div沒有任何自帶效果 唯一作用封裝資料：<font>與css結合 塊标簽</font></div>
<div class="cla1">div</div>
<div class="cla1">div</div>
<span>span沒有任何自帶效果 唯一作用封裝資料：<font>與css結合 行标簽</font></span><br/>
<span class="cla2">span沒有任何自帶效果 唯一作用封裝資料：<font>與css結合 行标簽</font></span><br/>
<font class="cla1" id="font_id1">font标簽</font><br/>
<font id="font_id2">font标簽</font><br/>
<p>春眠不覺曉 處處聞啼鳥 夜來風雨聲 花落知多少</p>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
</body>
<html>
4、 選擇器的優先級
<html> <!--html是根标簽：所有标簽都是其子标簽-->
<head><!--頭标簽：對目前html檔案進行統一的屬性設定-->
<title>css03選擇器優先級</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
div{
border:1px solid blue;
width:300px;
height:100px;
margin:10px;
}
#div1{
color: red;
}
.cla1{
color: blue;
background:#cccccc;
}
div{
background:#ccaa33;
}
*{
background:#aacc88;
}
/*選擇器優先級:
style屬性 > id選擇器 > 類選擇器 > 标簽選擇器 > 通配符選擇器
*/
</style>
</head>
<body>
<div class="cla1" id="div1">div class="cla1" id="div1"</div>
<div class="cla1" id="div1" style="color:yellow;">div class="cla1" id="div1"</div>
<div class="cla1">div class="cla1"</div>
<div class="cla1">div class="cla1"</div>
<div >div</div>
<div >div</div>
</body>
<html>
5、 盒子模型(掌握常用的屬性)
把标簽模拟成盒子 來學習常用的屬性
<html> <!--html是根标簽：所有标簽都是其子标簽-->
<head><!--頭标簽：對目前html檔案進行統一的屬性設定-->
<title>css03選擇器優先級</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
div{
/*邊框：複合屬性*/
border:1px solid blue;
border-color:red;
border-left:3px double yellow;
border-right-color:green;
/*大小*/
/*height:150px;*/
width:400px;
/*邊距*/
/*外邊距：相鄰邊框之間的距離*/
margin:10px;/*上下左右：10px*/
margin:10px 40px;/*上下10px 左右40px*/
margin:10px 40px 80px 120px;/*上右下左*/
margin:20px auto;/*上下20px 左右居中*/
/*内邊距：資料與邊框之間的距離*/
padding:20px;
/*文本*/
text-indent:100px;/*首航縮進*/
text-align:right;/*文本對齊方式*/
word-break:break-all;/*邊框内換行*/
/*字型*/
font: italic bold 30px 楷體;/*複合元素*/
font-weight:bold;/*加粗*/
font-size:28px;/*大小*/
font-family:楷體;/*樣式*/
/*text-decoration : none || underline || blink || overline || line-through */
text-decoration:line-through;/*劃線*/
letter-spacing:10px;
}
#div11{
/*背景*/
/*background : background-color || background-image || background-repeat || background-attachment || background-position */
background:#aaaaaa;
background-color:#aacc33;/*背景顔色*/
background-image:url("bg.png");/*背景圖檔*/
/*background-repeat : repeat | no-repeat | repeat-x | repeat-y 平鋪方式*/
background-repeat:repeat-x;
height:400px;
}
</style>
</head>
<body>
<div id="div11">divstyle屬性 > id選擇器 > 類選擇器 > 标簽選擇器 > 通配符選擇器</div>
<div id="div12">divaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="div13">divstyle屬性 > id選擇器 > 類選擇器 > 标簽選擇器 > 通配符選擇器</div>
<div id="div14">divaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
<html>
6 、布局
把元素放在頁面的制定位置
6.1 、浮動
涉及的屬性：float/clear
<html> <!--html是根标簽：所有标簽都是其子标簽-->
<head><!--頭标簽：對目前html檔案進行統一的屬性設定-->
<title>css05 浮動</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/*
不設定浮動和定位時 多個div呈現的順序：：文檔流
文檔流排列方式：每行一個div 從上到下排序
*/
div{
/*邊框：複合屬性*/
border:1px solid blue;
/*大小*/
height:100px;
width:600px;
/*邊距*/
/*外邊距：相鄰邊框之間的距離*/
margin:20px;/*上下左右：10px*/
/*内邊距：資料與邊框之間的距離*/
padding:20px;
/*文本*/
word-break:break-all;/*邊框内換行*/
/*字型*/
font: italic bold 16px 楷體;/*複合元素*/
}
#div11{
background-color:#aacc33;
float:left;/**/
}
#div12{
background-color:#66cc66;
/*float:left; */
clear:both;/*取消上一個元素的float指令對目前元素的影響 選擇按文檔流排序*/
}
#div13{
background-color:#3366cc;
float:right;
/*
float:right; 有兩個效果
1：目前元素要放在盡可能的右邊
2： 下一個元素要放在目前元素的左邊
*/
}
#div14{
background-color:#aacccc;
float:left;
}
</style>
</head>
<body>
<div id="div11">div11111111111</div>
<div id="div12">div22222222222222222</div>
<div id="div13">div3333333333333333333333333</div>
<div id="div14">div44444444444444444444444444444444444444</div>
</body>
<html>
- 練習：文字環繞圖檔
<html> <!--html是根标簽：所有标簽都是其子标簽-->
<head><!--頭标簽：對目前html檔案進行統一的屬性設定-->
<title>css05 浮動</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
#div11{
width:600px;
border:1px solid blue;
margin:200px auto;
font-size:22px;
}
#div11 img{
width:350px;
height:300px;
float:right;
}
</style>
</head>
<body>
<div id="div11">
<img src="../imgs/1.jpg"/>
是根标簽：所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽是根标簽：
所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽是根标簽：
所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽是根标簽：
所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽是根标簽：
所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽
是根标簽：所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽
是根标簽：所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽是根标簽：所有标簽都是其子标簽
</div>
</body>
<html>
6.2、 絕對定位
<html> <!--html是根标簽：所有标簽都是其子标簽-->
<head><!--頭标簽：對目前html檔案進行統一的屬性設定-->
<title>css06 定位</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/*
position: absolute；絕對定位
position: relative；相對定位
top/bottom:
left/right:
*/
div{
width:240px;
height:130px;
border:1px solid blue;
margin:20px;
font-size:22px;
word-break:break-all;
padding:10px;
}
#div11{
background-color:#aacc33;
}
#div12{
background-color:#66cc66;
/*
position:absolute:絕對定位
1 文檔流中不再保留目前元素的位置
2 如果目前元素的父輩元素設定了position 目前元素設定的top和left就相對于此父元素
如果目前元素的所有父輩元素都沒設定position 目前元素設定的top和left就相對于body
*/
position:absolute;
top:100px;/*相對于視窗的上邊框*/
left:200px;/*相對于視窗的左邊框*/
}
#div13{
background-color:#3366cc;
}
#div14{
background-color:#aacccc;
}
body{
border:1px solid red;
background-color:#cccccc;
padding:0px;
}
#div0{
width:800px;
height:600px;
/*position:absolute;
top:100px;
left:200px;*/
margin-top:100px;
margin-left:200px;
}
</style>
</head>
<body>
<div id="div0">
<div id="div11">div11111111111</div>
<div id="div12">div22222222222222222</div>
<div id="div13">div3333333333333333333333333</div>
<div id="div14">div44444444444444444444444444444444444444</div>
</div>
</body>
<html>
6.3、 相對定位
<html> <!--html是根标簽：所有标簽都是其子标簽-->
<head><!--頭标簽：對目前html檔案進行統一的屬性設定-->
<title>css06 定位</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/*
position: absolute；絕對定位
position: relative；相對定位
top/bottom:
left/right:
*/
div{
width:240px;
height:130px;
border:1px solid blue;
margin:20px;
font-size:22px;
word-break:break-all;
padding:10px;
}
#div11{
background-color:#aacc33;
}
#div12{
background-color:#66cc66;
position:relative; /*相對定位：相對于目前元素在文檔流中本來的位置*/
top:100px;/*相對于本來位置的上邊框*/
left:200px;/*相對于本來位置的左邊框*/
/*
position:relative; 相對定位
1 文檔流中會保留目前元素的位置
2 相對于流中本來目前元素的位置
*/
}
#div13{
background-color:#3366cc;
}
#div14{
background-color:#aacccc;
}
body{
border:1px solid red;
background-color:#cccccc;
padding:0px;
}
</style>
</head>
<body>
<div id="div11">div11111111111</div>
<div id="div12">div22222222222222222</div>
<div id="div13">div3333333333333333333333333</div>
<div id="div14">div44444444444444444444444444444444444444</div>
</body>
<html>
6.4、 定位練習
<html> <!--html是根标簽：所有标簽都是其子标簽-->
<head><!--頭标簽：對目前html檔案進行統一的屬性設定-->
<title>css05 定位</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
#div11{
width:420px;
border:1px solid blue;
margin:20px auto;
padding:10px;
}
img{
width:400px;
height:400px;
}
#font1{
font-size:38px;
font-weight:bold;
letter-spacing:30px;
color:red;
position:relative;
top:-190px;
left:100px;
}
</style>
</head>
<body>
<div id="div11" style="margin-top:200px;">
<img src="../imgs/1.jpg" />
<font id="font1">大好河山</font>
</div>
</body>
<html>
![一個小小的移動web版音樂播放器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)