只因小黑子的HTML5和CSS3入土复习过程第二章

HTML5+CSS3第二章

2.1 选择器

例子：

    <style>
        div{
            background: yellow;
            color: red;
        }
        h1{
            color: green;
        }
    </style>
  <div>
    111111
  </div>
  <h1>222222</h1>

—>

2.2 类选择器

范例：

    <style>
        .di{
            background: yellow;
            color: red;
        }

        .od{
            background-color: blue;
        }

    </style>
  <div class="di od">111111</div>
  <div class="di">222222</div>
  <div>333333</div>

—>

2.3 id选择器

范例：

    <style>
        #box1{
            background: yellow;
            color: red;
        }
        #box2{
            background: green;
            color: red;
        }
        #box3{
            background: blueviolet;
            color: red;
        }

    </style>
  <div id="box1">11111111</div>
  <div id="box2">22222222</div>
  <div id="box3">33333333</div>

—>

2.4 通配选择器

2.5 群组和后代选择器

2.5.1 群组选择器：带逗号

群组选择器:提出公共代码，节约代码量
范例：
1.

    <style>
    div,p,h1{
        background-color: yellow;
    }
    </style>
 <div>
    11111111
    <p>2222222</p>
 </div>
 <p class="boxp">3333333333333</p>
 <h1>444444444444</h1>

—>

    <style>
    div,p,h1{
        background-color: yellow;
    }
    
    div,.boxp,h1{
        background-color: green;
    }
    </style>
 <div>
    11111111
    <p>2222222</p>
 </div>
 <p class="boxp">3333333333333</p>
 <h1>444444444444</h1>

—>

2.5.2 后代选择器：带空格

后代选择器，包含选择器

    <style>
    div p{
     background-color: yellow;
    }
     p b{
     background-color:  red;
      }
    </style>
    <div>
        <p>111111111111111</p>
    </div>
    <p>
        <b>222222222222222222</b>
    </p>

    <div>
        <b>3333333333333</b> 
    </div>      

—>

2.5 伪类选择器

hover和activer适应于所以标签，其他两个只能用于a标签

范例：

    <style>
        /* 初始状态 */
      a:link{color: yellow;}
        /* 访问之后 */
     a:visited{color: red;}
        /* 鼠标悬停后 */
      a:hover{color: blue;}
        /* 点击激活 */
     a:active{color: green;}
    </style>
</head>
 <a href="http://www.baidu.com">百度</a>

2.6 选择器的权重

2.7 文本属性

2.7.1 font-size:大小和font-family:字体

2.7.2 color:文字颜色

2.7.3 font-weight:加粗和font-style:倾斜

2.7.4 text-align:文本水平对齐

2.7.5 line-height:单行文本垂直居中

2.7.6 text-indent:首行缩进

2.7.7 letter-spacing:字体间距

2.7.8 text-decoration:文本修饰

2.7.9 text-transform:检索大小写和font

text-transform

text-transform:capitalize
-文本的每个单词的首字母变成大写

text-transform:lowercase
-文本的每个字母变成小写

text-transform:uppercase
-文本的每个字母变成大写

text-transform:noe
-文本的每个字母不起任何效果

font

2.8 列表属性

2.8.1 list-style-type:列表点的形状

disc实心圆
circle 空心圆
square实心正方形
none

2.8.2 list-style-image:引入列表图片

2.8.3 list-style-position:控制图片是否在列表内

2.8.4 list-style:引入复合属性

2.9 背景属性

2.9.1 background-color：背景颜色

2.9.2 background-image：背景图片

2.9.3 background-repeat：背景图的平铺

写法：background-repeat：属性值
repeat: 默认平铺
repeat-x: x轴平铺
repeat-y: y轴平铺
no-repeat: 不平铺

2.9.4 background-position：背景图的定位

写法：background-position：属性值
1。20px 20px 数值
2. 10% 10% 百分值
3.
  left center right
  top center bottom

2.9.5 background-attachment：背景图的固定

2.9.6 background-size：背景图大小

写法： background-size：属性值
1. 400px 400px 数值
2. 100% 100%   百分值
3. cover :把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
也许无法显示在背景定位区域中。
4.
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区
域。铺不满盒子,留白

2.9.7 background:复合写法

复合写法:
1.用空格隔开
2.顺序可以换
3.可以只取一个值，放在后面能覆盖前面的值
注意：backgourd -size属性只能单独用

2.10 float：浮动属性

浮动案例：

2.11 清除浮动

1. 写固定高度
2.清浮动clear:none /left,right, both
3. 当前浮动元素后面补一个盒子，不设置宽高，clear: both
4. overflow:hidden, 让浮动元素计算高度

2.12 盒子模型-padding：内边距

内边距：
1个值，4个方向一样
2个值，上下，左右
3个值，上左右下
4个值，上右下左
例如：
  padding：0，0，0，0
1.背景色蔓延到内边距
2.可以设置单一方向
padding-方向:top bottom left right

2.13 盒子模型-border：边框

border：
-border-width 边框宽度

-border-style 边框样式
    
样式: 
    solid 实线
    double 双线
    dashed 虚线
    dotted 圆点线
    
-border- color 边框颜色
    
背景色也能蔓延到边框

2.14 盒子模型-margin：外边距

1. margin-方向4个方向

2.外边距没有背景色蔓延没有

3.常规设置清零：*{margin:0}

4.支持外边距负值

5.屏幕居中：
  margin:0 auto; 横向居中