CSS小白必看，图解！快来围观！

css

• 1.什么是css
  • cascading style sheet:层叠样式表
  • 用于给html元素添加样式
• 2.css的引入方式
  • 内联样式: 行间样式(html文档和样式不分离;优先级最高)
    • <p style="color: red; font:12px;">测试</p>
  • 内部样式表: html文档和样式分离,样式可复用(不能再多个html文档中复用)
    • <style>
    • p{
    • color: red;
    • }
    • </style>
  • 外部样式表: html文档和样式彻底分离(可以在多个html文档复用)
    • p{
    • color: red;
    • }
  • 优先级: 行间样式 > 非行间样式
• 3.css的基本语法
  • 选择器{
    • 声明1;(属性名:值;)
    • 声明2;
  • }
  • 说明:
    • 颜色:
      • 英文单词;
      • 6位16进制数据表示: #ff0000 #f00
        • rgb:三原色
        • 如果每两位均相同，可简写为三位
      • rgb(0,0,0) 0-255
    • 值存在多个单词或者汉字情况:使用双引号
• 4.css选择器
  • 1.基本选择器
    • 标签选择器: 以标签名称进行选择
      • p{
      • color: red;
      • }
    • id选择器: 以id值选择(不能直接复用样式)
      • #p1{
      • color: red;
      • }
    • class选择器: 以class值选择
      • .red{
      • color: red;
      • }
    • 通配选择器: 选择所有标签
      • *{}
  • 2.属性选择器
    • [name]{
      • border: 1px solid red;
    • }
    • [name="password"]{
      • border: 1px solid red;
    • }
  • 3.组合选择器
    • 后代选择器:
      • #p1 span{
      • color: red;
      • }
    • 并集选择器:
      • #p1,h2{
      • color: red;
      • }
    • 交集选择器
      • p.red{
      • color: red;
      • }
• 5.css属性
  • 文字属性: 修改文字信息
    • font-family:字体系列
    • font-size:控制字体大小
      • 英文单词: small , large
      • 参照父元素: smaller larger %
      • 固定值: 20px
    • font-weight: 粗细程度
      • 英文单词: lighter normal bold bolder
      • 具体数字: 100-900
    • font:简写属性
      • font: 900 30px/93px arial,"华文行楷"
  • 文本属性
    • line-height: 行高
    • color:文本颜色
    • text-align:水平对齐方式
    • text-decoration:修饰文本(none)
  • 背景属性
    • background-color:背景颜色
    • background-image:背景图像
    • background-position:起始位置
    • background-repeat:是否重复
      • repeat:默认值
      • repeat-x:水平平铺
      • repeat-y:垂直平铺
      • no-repeat:不平铺
    • background:简写
      • background: red url(img/s.jpg) no-repeat 10px 20px;
  • 宽高属性
    • width: 10px %
    • height:
  • 列表属性
    • list-style-type: none;
  • 其他属性
    • display: 显示状态
      • block:显示
      • none:隐藏
• 6.盒子模型
  • border:边框
    • border: 1px solid black
  • padding:内边距,边框和内容之间间距
    • padding: 20px 10px 10px 30px; 上右下左
  • margin:外边距,边框和父元素或者兄弟元素的间距
    • margin: 20px 10px 10px 30px;
  • 计算盒子宽度: 内容+2(边框+padding+margin)

• •  
• 浮动:
  • float: left right
    • 脱离标准文档流
    • left:挨着父元素的左边框或者已经浮动兄弟元素的右边框停止浮动。
  • clear:清除浮动
    • left right both