【day04】css

一.CSS2.0[Cascading Style Sheets]层叠样式表
  1.什么是CSS:修饰网页元素(标记)外观(比如给文字加颜色，大小，字体)的，W3C规定尽量用CSS样式替代XHTML属性
  2.XHTML和CSS的关系
    XHTML实现是网页结构，CSS修饰网页外观
  3.CSS的使用
   (1)内联样式(写在标记上的)
      <标记名称 style="css样式"/>
      <标记名称 style="css样式">...</标记名称>
   (2)内部样式(写在head标记中)
      <style type="text/css">
          ... css样式
      </style>
   (3)外部样式(将CSS样式单独写一个页面，然后引用页面)
    <link type="text/css" rel="stylesheet"
     href="CSS文档URL" media="all"/>
        说明:
       type:目标文档类型
       rel :当前文档和目标文档的关系
       href :CSS文档URL
       media:根据不同的媒介(设备)，使用不同CSS样式
       media:
           all 所有
           print 打印机
           screen 屏幕
           TV 电视
    (4)优先级：内联样式最高，内部和外部优先级同级后面的覆盖前面的样式
  4.CSS样式格式
      选择器{属性:值;属性:值;...}
   selector{property:value;property:value;...}
  5. 选择器(selector)
   (1)通配符选择器   *{...}(自动应用于所有标记中)
   (2)标记选择器    标记{...}(自动应用于指定标记中)
   (3)class(类)选择器   .class名称{...}(手动应用
           于任意标记中 ，应用例如 class="a1 a2..."
           如果有多个class名称用空格隔开)
   (4)id选择器   #id名称{...}(手动应用唯一标记中
        例如应用: id="id名称")
   (5)群组选择器   选择器名称,选择器名称...{...}
    (不同选择器但属性相同的缩写)
   (6)后代选择器   选择器名称 选择器名称{...}
     (两个选择器至少是父子关系)
   (7)子代选择器   选择器名称>选择器名称{...}
     (两个选择器必须是父子关系)
  6. 选择器的优先级
             标记选择器      权值  0001
      class选择器   权值  0010
      id选择器         权值  0100
            内联样式          权值   1000
         说明:权值越大优先级越高,权值
               相同优先级相同后面的样式覆
               盖前面的样式,继承的优先级
               最低
     
  7.color的属性值
   (1) 单词   red blue green...
   (2) 十六进制  (0-9 a b c d e f)
                红色: #ff0000 == #f00
   (3) rgb: (r:red,g:green,b:blue 0-255)
                 红色:rgb(255,0,0) ==rgb(100%,0%,0%)
         红色       #f00   rgb(255,0,0)
         绿色       #0f0   rgb(0,255,0)
         蓝色       #00f   rgb(0,0,255)
         白色       #fff   rgb(255,255,255)
         黑色       #000   rgb(0,0,0)
         黄色       #ff0   rgb(255,255,0)
         浅灰色    #eee   rgb(200,200,200)
         深灰色    #333   rgb(3,3,3)
   8.伪类选择器
     (1)行为伪类
         :link 元素未访问过状态
         :visited 元素访问过的状态
         :hover  设置鼠标悬停状态
         :active 设置鼠标激活状态
                说明:
          a. 按LVHA 的顺序设置
          b.工作中实现
             a{
               color:#333;
               text-decoration:none;
             }
             a:hover{
               color:#900;
               text-decoration:underline;
             }
        :focus： 设置鼠标获得焦点状态
     (2)UI元素伪类
         :checked 设置元素被选中状态(css3.0)
         :disabled 设置元素禁止状态
         :enabled  设置元素启用状态
   9.伪元素选择器
      :before :设置元素之前的内容或图像
      :after ： 设置元素之后的内容或图像
            例如:
      :before{
         content:"内容"|url(图像)
      }
      :after{
         content:"内容"|url(图像)
      }
   
   10.文本样式
     (1)文本颜色 color:value;
     (2)文本大小 font-size:value;
       (单位:像素px;默认字的大小的倍数 em,例如:1.5em)
     (3)文本字体 font-family:宋体,arial,"Times New  Roman"
     (4)文本水平对齐  text-align:left|center|right
     (5)文本行高 line-height:value;
            说明:如果文本行高 和盒子高度一致，能实现文本
                     在盒子中垂直居中
     (6)文本缩进 text-indent:value
              例如:首行缩进 ：text-indent:2em;
            说明:只能对块元素实现文本缩进，而行元素不可以
     (7)文本加粗 font-weight:normal默认值|bold加粗|100-900
            说明: normal ==400  bold==700  
     (8)文本倾斜 font-style:normal默认值|italic倾斜
     (9)小型大写字母  font-variant:normal|small-caps
     
     font的缩写形式
       font:font-style倾斜||
            font-variant小型大写字母||
            font-weight加粗||
            font-size 字大小/line-height 行高||
            font-family字体
     (10)文本修饰 text-decoration:none|
                                underline下划线|
                                overline上划线|
                                line-through删除线
   
     (11)text-transform : none |
                    capitalize 每个单词首字母大写|
                    uppercase 转为大写|
                    lowercase 转为小写
    11 盒模型(BoxModel)
     (1)width 宽度
     (2)height 高度
           说明:块元素和有宽高属性的标记(img input等)
                 设置宽度和高度,行元素不能设置宽度和高度
     (3)padding 内边距
     (4)margin  外边距
     (5)border  边框
         说明:
       span标记 :没实际意义的行元

div标记:没实际意义的块元素素