第一次课

css用于网页样式的控制

1.样式定义方式

1.1 行内样式表

把css的代码写在标签的style属性内
作用范围：仅对当前标签产生影响

<img src="bg1.jpg" alt="背景" style="width:500px;height:500px;">

1.2 内部样式表

定义在style标签中，通过选择器影响对应的标签
作用范围：对同一页面的多个元素会产生影响

1.3 外部样式表

定义在css样式文件中，通过选择器影响对应的标签，用link标签引入css页面
作用范围：可以对多个页面产生影响

css的注释是用

/* 注释 */ 

2.选择器

2.1 标签选择器

选择所有的标签

    <style>
        div {
            width:100px;
            height:100px;
            background-color:lightblue;
            margin-bottom:10px;
        }
    </style>

2.2 ID选择器

标签的id属性是唯一的，不能重复

    #mydiv1 {
        background-color:lightcoral;
    }

2.3 类选择器

类选择器可以重复，表示的是一类属性
class可以定义多个名字，用空格隔开

    .ch {
        background-color:lightcyan;
    }

2.4 伪类选择器

伪类用于定义元素的特殊状态

2.4.1 链接型伪类选择器

:link 链接访问前的样式
:visited 链接访问后的样式
:hover 鼠标悬停时的样式
:active 鼠标点击长按时的样式
:focus 聚焦后的样式

2.4.2 位置型伪类选择器

p:nth-child(2):依次判断p标签是不是其父节点的第2个儿子，是则触发定义的样式

把nth-child看成一个状态/函数，看是否满足条件（是不是父节点的第n个儿子）
括号内数字比较灵活
如：
even,odd,3n+1,2n+1

2.4.3 目标伪类选择器

:target 标签元素定义target伪类属性后，当有链接指向该标签时，target属性会被触发

2.5 复合选择器

由两个及以上的基础选择器组合而成的选择器

ele1,ele2 ：同时选择ele1与ele2
ele.class ：在满足是某标签基础上再加上class属性（.可以串联）ele可以是.class或者#id
ele1+ele2 ：选择紧跟ele1元素的ele2元素
ele1 ele2 ：选择ele1内的所有ele2元素（ele2的祖先节点是ele1就会触发条件）
ele1>ele2 ：选择父标签是ele1的所有ele2元素（必须满足父节点是ele1，可以多个>）

2.6 通配符选择器

* : 选择所有的标签
[attribute]：选择具有某个属性的所有标签
[attribute=value] : 选择attribute值为value的所有标签

2.7 伪元素选择器

将特定的内容当作一个元素，选择这些元素的选择器被称为伪元素选择器

::first-letter ：选择第一个字母
::first-line ：选择第一行
::selection ：选择已被选中的内容
::after ：可以在元素后插入内容
::before ：可以在元素前插入内容

2.8 样式渲染优先级

• 权重大小：越具体的选择器权重越大
• !important > 行内样式 > id选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
• 权重相同时，后面的样式会覆盖前面的样式
• 继承自父元素的权重最低

2. 颜色

2.1 预定义颜色表示

用英文字母表示颜色

2.2 16进制表示法

使用6位16进制表示颜色，如#BBAACC

2.3 rgb表示法

rgb(100,110,120)
第一个数表示红色，第二个数表示绿色，第三个数表示蓝色

2.4 rgba表示法

第四个数表示透明度