CSS简介及常用样式

一、CSS简介

CSS：层叠样式表(英文全称：Cascading Style Sheets)：是一种用来表现HTML样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、CSS选择器2.1基本选择器（三种）

1.标签选择器

    p {        font-size:20px;    }

2.类选择器（不唯一，用.）

    .one {        font-size:20px;    }
这是一个p标签

3.id选择器（唯一，一个网页只能出现一次，用#）

    #one {        font-size:20px;    }
这是一个p标签

2.2层次选择器

1.后代选择器

下面div中的全部p中都会字体变大，div外的p则不会

    div p {        font-size:20px;    }
    
这是div里的p标签
    
这是div里的p标签
这是p标签

2.子选择器

只能找到前两个p无法再找到里面的p

    div > p {        font-size: 20px;    }
    
这是div里的p标签
    
这是div里的p标签
    
        
这是div里的p标签
    
这是p标签

3.兄弟选择器

相邻兄弟选择器：找一个元素下边的第一个兄弟元素，操作符是+号
所有兄弟选择器：找一个元素下边所有兄弟元素，操作符是~号

    /*第2，4，5，7的p会放大字体，因为他们上面还有个p，第三个p没有放大是因为被h3中断了导致上面并不是p*/    p + p {        font-size: 20px;    }
    
这是div里的p标签
    
放大
    
断开
    
这是div里的p标签
    
放大
    
放大
这是p标签
放大

    /*跟他同级的不含它本身*/    p ~ p {        font-size: 20px;    }
    
这是div里的p标签
    
放大
    
断开
    
放大
    
放大
    
放大
这是p标签
放大

4.群组选择器

前三个p中字体都变大了

    div > p,li > p {        font-size: 20px;    }
    
这是div里的p标签
    
这是div里的p标签
    
        
这是div里的p标签
    
这是p标签

2.3伪类选择器

1.:first-of-type：选择一组子元素中的第一个（即使有其他子元素，也不会受到影响）

    div p:first-of-type{        color: red;    }
    
one
    
two
    
three

2.:last-of-type：选择一组子元素中的最后一个（即使有其他子元素，也不会受到影响）

    div p:last-of-type {        color: red;    }
    
one
    
two
    
three

3.:nth-of-type()：使用索引来选择某一个子元素（即使有其他子元素，也不会受到影响）

    div p:nth-of-type(2){        color: red;    }
    
one
    
two
    
three

三、CSS引入方式

• 行内样式
• 内部样式
• 外部样式

3.1行内样式

只对写入本标签生效，多个用,隔开

行内样式

3.2内部样式

可以参考上面第二模块部分

    div p:nth-of-type(2){        color: red;    }
    
one
    
two
    
three

3.3外部样式

要单独写一个.css文件，并且要在html页面中导入，在head中添加

四、CSS优先级4.1基本规则

• 从引用方式方面来说：行内样式 > 内嵌样式/外部样式

• 从选择器方面来说：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器

4.2叠加时的优先级

• 就近原则：距离最近的样式有效。
• 顺序原则：这里的顺序是指的书写顺序，也就是最后书写(不是调用)的样式有效。
• 精细原则：或者叫特殊原则。既选择器的指向越精细越优先。

五、CSS中的颜色

这里仅仅写了我常用的，更多的读者可以进一步查询如：HSL、HSLA

5.1直接使用颜色英文单词

red、green、orange、blue...

5.2使用十六进制表示

//前两位红，中间两位绿，后面两位蓝通常是6位#99CCFF也可以简写为3位#9CF

5.3RGB与RGBA

//RGB由三部分组成//第一位红，第二位绿，第三位蓝(范围0-255)RGB(255,0,0);//RGBA由四部分组成，最后一位用于加透明度//最后一位(范围(0-1),0完全透明,1完全不透明RGBA(255,0,0,0.6);

六、常用样式6.1字体样式

6.2文本样式

6.3尺寸样式

6.4列表样式

6.5背景样式

6.6鼠标样式

6.7伪类样式

这个顺序不能变从上到下lvha

6.8透明度样式