前端 day5

1.选择符的权重

1. id>class>标签
2. 用4个数字表示权重大小

         !important      MAX

         内联样式表     1000

         id             0100

             class           0010

        标签           0001

        伪类选择符     0010

     通配符         0000

    *包含选择符的权重=权重之和

     eg:  

       #box div{}           100+1=101

       .wrap .con p{}        10+10+1=21

    *群组选择符的权重不会发生变化，保持原来的权重：

2.css的特性（层叠性）

  1.css层叠性：

        *产生权重关系，必然体现css的层叠性;

        *内联样式表》内部样式表=外部样式表

        *内部和外部和书写前后顺序有关，后面的会把前面的覆盖。

   2.css的层叠性是什么：

         <产生权重关系，必然体现css的层叠性>。

        1.!important   最重要的样式

        2.内部样式表>内部=外部，

           内部和外部和书写前后顺序有关，后面的会把前面的覆盖。

       3.选择符的权重：id>class=伪类》标签

      4.开发者样式权重>读者（用户）>浏览器样式

3.css的语法

   选择符{属性：属性值;}

    css属性：width;height;background;color,boeder......

    css的属性值：常规属性值、法定属性值

            常规属性值：100px\200px

            法定属性值：官方指定的单词，只有某种意义

1.文本属性

1. font-size：； 控制文本颜色

      A：为了消除系统之间的差异，规定：16px为标准字体大小

      B：文本大小设置要设置成偶数

      C：PC端项目，设置最小尽量别低于12px

      D：从ps中获取文本大小，汉字量取文本高度

      E：文本单位：px\em(磅)，常用于印刷领域

          12px=9pt

          em:(相对大小单位，相对于父元素的font-size值而定)

      F:（仅作了解）

                  xx-small=9px

                  x-small=11px

                  small=13px

                  medium=16px

                  large=19px

                  x-large=23px

                  xx-large=27px

2.color:;   控制网页中的文本

            颜色值：

1. 16进制表示颜色值（0到9、a 到f）

                  #00ff55

1. rgb(255,0,0)模式

      拓展：rgba(255,0,0,0.5){a是透明值}

3.font-family:微软雅黑”; 控制的是网页中的字体类型

     默认的字体类型：”微软雅黑”

    系统能支持的字体:web安全字体：微软雅黑、宋体、楷体...

   英文默认的字体：arial

 

     语法：font-family:字体1，字体2，字体3......

     注: 1：中文字体必须放在引号里面

         2：如果一个文本有多个单词组成，也要放在引号里面

         3：如果文本是一个单词，不需要引号

         4：先写英文字体，再写中文字体

4.font-weight:;   控制文本是否加粗

             属性值：

                    bold       加粗

                    bolder      更粗

                    normal      清除加粗 ，恢复常规文本

                    100——900

                         100——500：不加粗

                         600——900：加粗的状态

5.font-style:; 控制文本的倾斜

            属性值:

                 italic   倾斜

                 oblique 倾斜（倾斜幅度更大，但是一般不会有明显变化）

                    

6.line-height:; 控制文本的行高

1. 从ps设计图上：怎么获取行高？

        从第一行开始量到第二行开始     

    2.单行文本：如果让单行文本在容器里面上下居中，link-heigh设置容器高度即可

7.text-align:; 控制文本的水平对齐方式

  属性值：

    center    居中对齐

    left       左对齐

    right      右对齐

    justify     两端对齐

8.text-decoration:; 文本修饰（下划线/上划线/删除线）

  属性值：

    none         清除下划线

    underline     添加下划线

 

    overline       添加上划线

     line-through   添加删除线

9.text-indent:;首行缩进属性

   text-indent:2em;    首行缩进2字符

 

10.字间距、行间距

     letter-spacing:;       字间距

     word-spacing:;        词间距

11.text-transform:; 控制文本大小写

   属性值：

    unpercase      大写

    lowercase      小写

    capitalize       每个单词首字母大写

4.浮动

   属性：  float：；     （控制当前元素的布局）

   属性值：left         左浮动

        right        右浮动

        none       不浮动

    特点：

      1 .添加浮动之后，元素是不占空间的

 

      2.如果让多个元素横向进行排列，所有的排列的元素，都必须添加浮动

      3.如果子元素添加浮动，宽度大于父元素时，后面的元素会被挤到下一行