老司机Studio 第二章

CSS3的基本特性

• 一切的基础：选择器
• 基本选择器:
  div (选中所有div标签)
  .test (class="test"的标签)
  #test (id="test"的标签)
  *(通配选择器 所有标签)
  ,(连接两个选择器)

   
 
    
    


  
 
    
1
    
2
   
    
2
   
    
4
   
    
5
  
    
6
  
    
7
  
    
8
 
    
9
 
    
10
 

通配.png

元素.png

id选择器

类选择器

多类名选择器

• 层次选择器
  • (E F)后代选择器（F包含在E内即可）
  • (E>F)子选择器
  • (E+F)相邻兄弟选择器
  • (E~F)通用兄弟选择器

   
  
   
   


1
2
3
4
      
5
       
6

7   
       
8  
             
10
  
       

后代.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;
}

• float属性
  float: left/right

  
test

test1

作业：仿制百度搜索结果页面

• 伪类选择器
  :link 未被访问的链接
  :visited 已被访问的链接
  :hover 鼠标悬浮
  :active 鼠标按下

:focus 元素成为焦点（表单）

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
  


.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 给元素的前面或后面插入内容

Other content.

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