day5 html5

htnl5知识点
选择符的权重:
id > class > 标签
四个数字表示权重:
内联样式表 -> 1000
id -> 100
class -> 10
标签 -> 1
伪类选择符 -> 10
通配符 -> 0
包含选择符的权重为权重之和
eg :
#box div{} 100 + 1 == 101
.wrap .con p{} 10 + 10 + 1 == 21
群组选择符的权重是不会发生变化的,保持原来的权重值。

    !important  权重是最高的
     css的层叠性?   ->   权重!!!
    产生权重关系,必然体现css的层叠性。
    0: 
        !important  最重要的样式
    1:
        内联样式表 >  内部/外部
        内部和外部和书写顺序有关,后写把前写的覆盖。
    2:
        选择符的权重:
        id > class/伪类 > 标签
    3:
        开发者样式权重 > 读者(用户)样式 > 浏览器样式            
    4:
        当权重相同的时候,后写的样式会前写的样式 给 覆盖掉。
         文本属性:
1: font-size:;  控制文本大小
    a:为了消除系统之间显示差异,规定:16px 为标准字体大小。
    b:文本大小设置,设置为偶数。
    c:PC端项目,设置最小尽量别低于12px ;
    d:从ps中获取文本大小,汉字量取文本高度。
    e:文本单位:  px \ em \ pt(磅)【常用在印刷领域】
        12px == 9pt
        em 
            ( 相对大小单位,相对于父元素的font-size值而定 )
            (默认情况下,  1em == 16px)
    f:(了解)
        xx-small =9px
        x-small =11px
        small =13px
        medium =16px
        large =19px
        x-large =23px
        xx-large =27px

2:color:; 控制网页中的文本颜色
    颜色值:
        a:十六进制表示颜色值:
            16进制数字:0 - 9  a - f
            颜色值: #ff0000
                6个数字:
                    前两位     红色
                    中间两位   绿色
                    最后两位   蓝色
        b: RGB(255,0,0) 模式
            拓展: rgba(255,0,0,0.5);
3:font-family:;控制的是网页中字体类型。
    默认的字体类型:"微软雅黑"
    系统能支持的字体:web安全字体:微软雅黑、宋体、楷体...
    英文默认的字体:Arial
    语法:
        font-family:字体1,字体2,字体3,......
        注:
            a:中文字体必须放在引号里面
            b:如果一个字体多个单词组成 也要放在引号里面
            c:如果字体是一个单词 不需要引号。
            d:先写英文字体,后写中文字体。
4:font-weight:;控制文本是否加粗
    属性值:
        bold     加粗
        bolder   加粗
        normal   清除加粗,恢复常规文本
        100 - 900
            100 - 500:不加粗
            600 - 900:加粗的状态 
5: font-style:;控制文本的倾斜
    属性值:
        italic    倾斜
        oblique   倾斜(倾斜幅度更大,但是一般不会有明显变化)
        normal    恢复常规文本
6: line-height:; 控制文本的行高。
    a: 从ps设计图上:怎么获取行高:从第一行开始量到第二行开始。
    b: 
        单行文本:
            如果让单行文本在容器里面上下居中,line-height设置容器高度即可
            显示状态:
                小于容器高度的时候:文本往上移动
                大于容器高度的时候:文本往下移动
7:text-align:; 控制文本的水平对齐方式
    属性值:
        center   居中对齐
        left     左对齐
        right    右对齐
        justify  两端对齐            

8:text-decoration:; 文本修饰(下划线、上划线、删除线)
属性值:
none 清除下划线
underline 添加下划线
overline 添加上划线
line-through 添加删除线
9: text-indent:;
text-indent:2em;首行缩进:

    text-indent能设置负值:文字往左走。(悬挂式缩进)

10:字间距、词间距
    letter-spacing:;  字间距
    word-spacing:;    词间距
11: text-transform:; 控制文本大小写。
    属性值:
        uppercase   大写
        lowercase   小写
        capitalize  每个单词的首字母大写
        浮动!
    属性:float

        属性值:
            left    
            right
            none
特点:
    a:添加浮动之后,元素是不占据空间。
    b:如果让多个元素横向进行排列,所有的排列的元素,都必须添加浮动。
    c:如果子元素添加浮动,宽度大于父元素的时候,后面的元素被挤到下一行。
发布了4 篇原创文章 · 获赞 0 · 访问量 15

猜你喜欢

转载自blog.csdn.net/jiatinghui/article/details/104997239