CSS3的基本特性
- 一切的基礎(chǔ)：選擇器
- 基本選擇器:
div (選中所有div標簽)
.test (class="test"的標簽)
#test (id="test"的標簽)
*(通配選擇器 所有標簽)
,(連接兩個選擇器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS3基本選擇器</title>
<style type="text/css">
*{margin:0; padding: 0;}
.clearfix:after,.clearfix:before{display: table;content:""}
.clearfix:after{clear: both;overflow: hidden}
.demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;}
li{list-style: none outside none; float: left; height: 20px;
line-height: 20px;width: 20px;border-radius: 10px;
text-align: center;background: #f36; color: white; margin-right: 5px;}
</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">2</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>
通配.png
元素.png
id選擇器
類選擇器
多類名選擇器
- 層次選擇器
- (E F)后代選擇器（F包含在E內(nèi)即可）
- (E>F)子選擇器
- (E+F)相鄰兄弟選擇器
- (E~F)通用兄弟選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS3層次選擇器</title>
<style type="text/css">
*{margin: 0;padding: 0; }
body{width: 300px; margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>10</div>
</div>
</div>
</body>
</html>
后代.png
子.png
相鄰兄弟.png
通用兄弟.png
-
重溫CSS3盒模型
盒模型- content （行內(nèi)元素和塊元素的區(qū)別）
- padding
- border
- margin
- box-sizing
- overflow
- calc函數(shù)
-
position屬性
- static 默認值
- relative 類似static 但是可以指定top/left/right/bottom
- absolute 絕對定位，相對于最近的一個position:relative的祖先元素
- fixed 絕對定位，相對于瀏覽器頁面
.div1 {
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
- float屬性
float: left/right
<div>
<div style="float: right">test</div>
</div>
<div>test1</div>
作業(yè)：仿制百度搜索結(jié)果頁面
- 偽類選擇器
:link 未被訪問的鏈接
:visited 已被訪問的鏈接
:hover 鼠標懸浮
:active 鼠標按下
:focus 元素成為焦點（表單）
<div class="demo clearfix">
<ul class="clearfix">
<li class="first links odd" id="first"><a href="">1</a></li>
<li class="links even"><a href="">2</a></li>
<li class="links odd"><a href="">3</a></li>
<li class="links even"><a href="">4</a></li>
<li class="links odd"><a href="">5</a></li>
<li class="links even"><a href="">6</a></li>
<li class="links odd"><a href="">7</a></li>
<li class="links even"><a href="">8</a></li>
<li class="links odd"><a href="">9</a></li>
<li class="links even last" id="last"><a href="">10</a></li>
</ul>
</div>
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.demo li {
border: 1px solid #ccc;
padding: 2px;
float: left;
margin-right:4px;
}
.demo a {
float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
text-decoration: none;
}
選擇器
:first-child選擇某個元素的第一個子元素；
:last-child選擇某個元素的最后一個子元素；
:nth-child()選擇某個元素的一個或多個特定的子元素；
:nth-last-child() 從后選擇元素某個元素
- 偽元素選擇器
::first-line選擇元素的第一行
::first-letter選擇文本塊的第一個字母
::before ::after 給元素的前面或后面插入內(nèi)容
<p class="box">Other content.</p>
p.box {
width: 300px;
border: solid 1px white;
padding: 20px;
}
p.box:before {
content: "#";
border: solid 1px white;
padding: 2px;
margin: 0 10px 0 0;
}
-
CSS邊框
- border屬性(上右下左，順時針，簡寫）
- border-radius屬性
- box-shadow
使用border屬性畫圓、畫三角形
-
CSS背景
- background屬性
CSS顏色
-rgb顏色（16進制編碼）
-rgba顏色
-顏色名
