CSS3的基本特性
- 一切的基础：选择器
- 基本选择器:
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内即可）
- (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 （行内元素和块元素的区别）
- padding
- border
- margin
- box-sizing
- overflow
- calc函数
-
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>
作业：仿制百度搜索结果页面
- 伪类选择器
: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 给元素的前面或后面插入内容
<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颜色
-颜色名
