老司机Studio 第二章

2017-07-30 本文已影响67人 cenkai88

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颜色
-颜色名

老司机Studio 第二章

猜你喜欢

热点阅读