html选择器

选择器

选择我们要设置的标签（元素）

div 标记选择器，类型选择器（选择的是网页内所有的div元素）

id选择器（选择的是id名为box1的内容，id选择器唯一性，不能重复）
     <div id="box1">老大</div>

     #box1{
         color: red;
     }


class选择器，类选择器(选择的是class名为box1的内容,可以重复使用，可以设置多个值)
        <div class="box1 font">老大</div>

        .box1{
            color: red;
        }


群组选择器（对不同的内容设置相同的样式）
.box1,.a1,.p1

并集选择器 (选择的是a标签的class名box1的内容)
    a.box1

通配符选择器（选择网页内所有的标签）
    *

     *{
        margin:0px;
        /* 清除外边距 */
        padding: 0px;
        /* 清除内边距 */
    }

包含选择器

父子选择器（通过父元素选择子元素，只能选择一层）
父元素>子元素

后代选择器(只要是包含关系都能选中)
       祖先元素  后代

伪类选择器

a:link     选择内容访问前的状态
a:visited  内容访问后的状态
a:hover    鼠标移入的状态
a:active   鼠标按下激活的状态

div 

id      color    red
class   color    pink
*       color    blue
标签名   color    green

选择器的权重0000

内联样式表1000 > id 0100 > class 0010 > 标记选择器 0001 > 通配符选择器 0000

包含选择器
包含选择器计算的是所有的权重之和

群组选择器不会造成权重冲突，群组选择器就是内容本身的权重

伪类选择 10

ul li

• color red
  标记 color yellow

css继承
css的部分属性会有继承效果，自己没有的样式，父元素有，会默认继承父元素的样式

文本属性和字体属性大部分都有继承

继承的特性：就近原则

---

字体属性

字体大小
font-size：
px
pt
em 相对于自己的font-size值，如果自己没有font-size，相对于父元素的font-size值

    1em = 16px ,浏览器默认像素16px

字体颜色

color：
单词颜色
16进制的颜色 #fff #fffff
0 1 2 3 4 5 6 7 8 9 a b c d e f
rgb和rgba
可以设置透明度 0-1，可以设置小数

字体样式
font-family:“楷体”

字体的粗细
font-weight
加粗 bold bolder
常规粗细 normal

    数值 100- 900
    400,500 常规粗细 

字体倾斜
font-style
normal 默认
oblique 倾斜字体
italic 倾斜字

简写，复合属性，后两位内容格式固定，其他顺序无所谓
font: 16px “宋体”

自动换行 （ 块元素 ）
1、块元素独占一行，上下排列，自动换行
2、块元素可以设置宽高
3、块元素可以嵌套块元素，也可以嵌套内联元素（p）
文本标题

    <h1>文章或者重点标题</h1> 
    <h2>大模块的标题</h2> 
    <h3>小模块的标题</h3> 
    <h4>  h4标签</h4>
    <h5>  h5标签</h5>
    <h6>  h6标签</h6>


    短落
    <p></p>

   网页结构
    div

不换行 （内联元素，行内元素）

1、内联元素水平排列，不会自动换行
2、内联元素设置不了宽高,宽高由内容撑开
3、内联元素只能嵌套内联元素
加粗
b和strong

  倾斜
    i和em

  线条
    u  下划线
    s  删除线

  文本标签
    span 

    sub和sup

---

文本属性

文本修饰

text-decoration
           overline  上划线
           underline 下划线
           line-through  删除线
           none          取消线条

字间距
letter-spacing

词间距（空格区分）
word-spacing: 50px;


###首行缩进（块元素管用）
text-indent:2em
    可以设置负值，有隐藏文本内容的效果


###文本水平对齐
text-align
        left  左对齐
        right 右对齐
        center 水平居中
        justify 两端对齐

总结：text-align都给块元素设置

行高
line-height

1、多行文本之间的行间距 行间距带着字体大小一起测量
2、单行文本设置行高居中 行高等于盒子的高度
3、清除内容自带的行间距 字体大小多少，行高就多少

盒模型
网页的所有内容都可以看做是一个盒子，盒子的组成部分

内容,内边距，边框，外边距

内边距
padding
1、设置盒子与内容之间的位置关系
2、边框线以内的距离都可以设置内边距
3、padding会撑大盒子，如果设置完padding盒子不变形，加上多少padding就需要宽高减去多少大小
4、
设置单独方向的padding

padding-top
padding-bottom
padding-left
paddin-right

设置多个方向的padding
            padding1个值 ：4个方向
            padding2个值: 1上下   2左右
            padding3个值：1上     2左右     3下
            padding4个值：上 右  下 左  顺时针方向

5、padding不可以设置负值