CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第1天。

一、选择器类型：

1. 标签选择器

     示例：h1{}

2. ID选择器

     示例：#unique{}

3. 类选择器

     示例：.box{}

类选择器与ID选择器的区别： 类选择器在一个HTML页面中可以被引用多次，ID选择器只能引用一次

4. 通配选择器

     示例：*{}

5. 标签属性选择器

     示例：a[title]{}

6. 伪类选择器

     示例：p:first-child{}

7. 伪类元素选择器

     示例：p::first-line{}

8. 选择器组

    -       直接组合       AB（满足A同时满足B）             input:foucs
    -       后代组合      A B（选中B，且B是A的子孙）        nav a
    -       亲子组合     A > B（选中B，B是A的子元素）       section > p
    -       兄弟选择器   A ~ B（选中B ，B在A后且与A同级）   h2 ~ p
    -       相邻选择器   A + B（选中B，且B紧跟在A后）       h2 + p   

二、选择器优先级

规则

不同的选择器有不同的权重值，权重值的大小构成了选择器的优先级，权重越大优先级越高，同一行的选择器权重，权重大的样式会覆盖权重低的样式。

• ! important - - - infinity
• 行间样式 - - - 1000
• id 选择器 - - - 100
• 属性、伪类、类名选择器 - - - 10
• 标签选择器 - - - 1
• 通配符选择器 - - - 0

注：权重值是256进制，不是10进制

三、CSS在页面中使用方法

1.外链式

      <link rel="stylesheet" href="style.css">

2.嵌入式

       <style>
           p{}
       </style>

3.内联式

        <p style="margin:1em 0">内联式</p>

四、颜色

颜色表示方法：

1. 基础颜色

示例红色：color:red;

2. 十六进制颜色

两个字母为一组，分别表示红色、绿色、蓝色
示例红色：color:#ff0000;

3. RGB颜色/RGBA颜色

颜色指定：RGBA(红，绿，蓝，alpha)A表示透明度，取值0.0~1.0
示例红色：color:rgba(255,0,0,0.5);

4. HSL颜色/HSLA颜色

颜色指定：HSLA(色调，饱和度，亮度，alpha)
 示例红色：color:rgba(236, 43, 9, 0.853);

五、字体

常用类型

• font-family
• font-size
• font-style
• font-weight
• line-height
• text-align
• letter-spacing
• word-spacing

六、继承

某些属性会自动继承自父元素的计算值，除非显示的指定一个数值，一般跟文字相关的都会自动继承，和模型相关的不会继承，如果想强制继承可以使用inherit属性。如果没有指定同时也没有继承到值则使用初始值。

line-height继承问题

• line-height如果继承过来的是数值，那么元素就直接等于继承来的值，
• 如果是2/1.5这种比例，会将比例继承过来，
• 如果是百分比那么会将计算好的数值继承过来。

七、布局

网页布局的本质–用CSS来摆放盒子，把盒子摆放到相应的位置，css提供了三种传统布局方式，分别是标准流，浮动和定位三种。

1.常规流 Normal Flow

常规流是最基本的布局方式

常见属性

• width
• height
• padding
• border
• margin
• overlow
• display
• 块级元素与行级元素

根元素、浮动和绝对定位会脱离常规流，其他元素都在常规流内常规流中的盒子，在某种排版上下文中参与布局

• 行级排版上下文
• 块级排版上下文
• BFC内的排版规则
• FlexBox
• Grid布局

2. 浮动

有很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

属性

• float:none;
• float:left;
• float:right;

3. 绝对定位

position属性

• position：relative
• position：absolute