HuaLuLemon
HuaLuLemon

2.1 CSS 简介特性

1.CSS 简介
  • CSS的全称为:层叠样式表(Cascading Style sheets )。
  • CSS3是CSS2的升级版本，它在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。.
  • CSS3在未来会按照模块化的方式去发展: CSS current work & how to participate
  • CSS3的新特性如下:
    • 新增了更加实用的选择器，例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。
    • 新增了更好的视觉效果，例如:圆角、阴影、渐变等。
    • 新增了丰富的背景效果，例如:支持多个背景图片，同时新增了若干个背景相关的属性。
    • 新增了全新的布局方案――弹性盒子。
    • 新增了Web字体，可以显示用户电脑上没有安装的字体。
    • 增强了颜色，例如: HSL、HSLA、RGBA几种新的颜色模式，新增opacity属性来控制透明度
    • 增加了2D和3D变换，例如:旋转、扭曲、缩放、位移等。
    • 增加动画与过渡效果，让效果的变换更具流线性、平滑性。
2.私有前缀
  • 什么是私有前缀：例如"-webkit-"
div {
    width: 400px;
    height: 400px; 
    -webkit-porder-radius: 20px;
}
  • 为什么要有私有前缀
    • W3C标准所提出的某个CSS特性，在被浏览器正式支持之前浏览器厂商会根据浏览器的内核，使用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后，就不需要私有前缀了。
    • 查看CSS3兼容性的网站：www.caniuse.com
  • 常见浏览器私有前缀
    • Chrome浏览器: -webkit-
    • Safari浏览器: -webkit-
    • Firefox浏览器:moz-
    • Edge浏览器: -webkit-
3.CSS 样式表
  • 行内样式：写在标签的style属性中
  • 内部样式：写在style标签中
  • 外部样式：
  • 样式表的优先级：行内 > (内部 = 外部)(后来者居上)
4.长度单位
  • px：像素
  • em：相对元素font-size的倍数。
  • rem ：相对根字体大小(html)
  • %：相对父元素计算。
  • vw视口宽度的百分之多少10vw 就是视口宽度的10%。
  • vh视口高度的百分之多少10vh就是视口高度的10%。
  • vmax视口宽高中大的那个的百分之多少。(了解即可)
  • vmin视口宽高中小的那个的百分之多少。(了解即可)
  • CSS中设置长度,必须加单位，否则样式无效!
5.CSS 三大特性
  • 层叠性
    • 如果发生了样式冲突，那就会根据一定的规则（选择器优先级)，进行样式的层叠（覆盖)。
  • 继承性
    • 概念:元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
    • 规则:优先继承离得近的。
    • 常见的可继承属性: text-?? 、font-?? 、line-?? 、color ......
  • 优先级
    • !important>行内样式>ID选择器>类选择器>元素选择器>通配选择器>继承的样式
    • 权重：(a,b,c)
      • a：ID选择器的个数
      • b：类、伪类、属性选择器的个数
      • c：元素、伪元素选择器的个数
    • 注意事项：
      • 计算权重时，并集选择器的每一个部分是分开算的!
6.元素显示模式
  • 块元素(block)

主体结构标签: .

排版标签:

~

、
.

. 

 . 
 
  
列表标签: 
     . 
       . 
    1.  、 
       . 
       、 
       
  
      表格相关标签: 
       ,  ,  ,  ,  . 
       
  
      < form >与
       
  
         
   
      •  
    
           
     
        • 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
          •  
     
        • 默认宽度:撑满父元素。
          •  
     
        • 默认高度:由内容撑开。
          •  
     
        • 可以通过CSS设置宽高。
          •  
    
        •  
  
       
  
         
   
      • 行内元素(inline)
        •  
  
       
  
      文本标签: < br >、< em >、 、 、、 、
       
  
      与
       
  
         
   
      •  
    
           
     
        • 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
          •  
     
        • 默认宽度:由内容撑开。
          •  
     
        • 默认高度:由内容撑开。
          •  
     
        • 无法通过CSS设置宽高。
          •  
    
        •  
  
       
  
         
   
      • 行内块元素(inline-block)
        •  
  
       
  
      图片: 
       
  
      单元格: 
       . 
       
  
      表单控件:  .