第024篇：CSS1

1、css基础

1)什么是CSS

 CSS又叫层叠样式表，是web标准中的表现标准，主要负责网页中内容的布局和样式

2)css写在哪儿

 a、内联样式表 - 将CSS代码写到标签的style属性中
 b、内部样式表 - 将CSS代码写在style标签中
 c、外部样式表 - 将CSS代码写在css文件中；然后再通过link标签在html文件中导入

3)怎么写样式表

1)语法：
    选择器{属性1:属性值1; 属性2:属性值2; 属性3: 属性值3; ...}
    
    2)说明
    选择器  -  选中需要添加样式的标签
    {}      -  固定写法  
               注意: 如果是内联样式'选择器{}'可以省略
    属性    -  属性名和属性值用冒号连接，属性和属性之间用分号隔开
              学CSS就是学CSS中的属性和功能
              注意: 如果属性值是表示大小的数字，必须加单位： px(像素)、em(空格); 也可以使用百分比

    3)常用属性
    color              -  设置文字颜色
    background-color   -  设置背景颜色
    font-size          -  字体大小
    width              -   宽度
    height             -  高度

    
        
        
        
        
        
        
        
        
        
    
    
        
        
        
我是段落1
        
我是段落2

    

---

2、选择器

• css中的选择器就是用来选中标签的

1)选择器

 1、元素(标签)选择器：直接将标签名作为选择器，选中当前页面中所有的指定标签
 2、id选中器：将id属性值前加一个#作为一个选择器，选中的是当前页面中id属性值是指定值的标签(id唯一)
 3、class选择器：同意个class在一个页面中可以有多个，同一个标签可以有多个class
 4、群组选择器：将多个选择器用逗号隔开作为一个选择器
 5、后代选择器：将多个选择器用空格隔开作为一个选择器，从第一个开始往后找，找到最后一个选择器对应的标签
 6、子代选择器：将多个选择器用>隔开作为一个选择器(两个选择器之间必须为父子关系)
 7、通配符：将*作为选择器，选中当前页面所有的标签

2)伪类选择器

 1.什么是伪类选择器

• 普通选择器选中的是一个标签所有的状态，选中后添加的样式对标签的所有状态有效
• 伪类选择器选中的是一个标签指定的状态，选中后添加的样式只针对这一个状态有效

&msp;2.语法:

• 普通选择器:状态{}

div #p1{
        color: yellow;
    }

1)link - 链接没有被成功访问的时候对应的状态, 只有a标签才有这个状态
2)visited - 链接已经被成功访问过对应的状态， 只有a标签才有
3)hover - 鼠标悬停在标签上对应的状态， 所有可见标签都有效
4)active - 鼠标按住标签不放对应的状态， 所有可见标签都有效

---

3、选择器的权重

• 如果权重值相同，后写的优先级比先写的高
• 除非特殊说明，内联样式表的优先级最高
• 属性后如果添加了!important，那么这个属性一定会有效

!important >内联选择器样式 > id选择器 > class选择器 > 元素选择器
群组选择器： 看单独选择器的权重
后代/子代选择器: 各选择器之和
伪类选择器与元素选择器一致

001.png