行内样式表

行内样式表

直接定义在标签的属性中 作用范围: 仅对当前标签产生影响 例如: <img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">

内部样式表

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

外部样式表

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

选择器

标签选择器

例如: 选择所有div标签:

    div{
       width: 200px;
       height: 200px;
       background-color: gray;
    }

ID选择器

例如: 选择ID为rect-1的标签:

#rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
}	

类选择器

选择所有类的标签:

.rectangle {
   width: 200px;
   height: 200px;
   background-color: gray;
}

伪类选择器

• 伪类用于定义元素的特殊状态
• 链接伪类选择器:
• :link ：链接访问前的样式
• :visited ：链接访问后的样式
• :hover ：鼠标悬停时的样式
• :active ：鼠标点击后长按时的样式
• :focus ：聚焦后的样式

位置伪类选择器:

• :first-child ：选择属于其父亲元素的首个子元素
• :last-child ：选择属于其父亲元素的最后一个元素
• :nth-child(n) ：选择是其父标签第n个子元素的所有元素，从后面计数
• :nth-child(n) ：选择是其父标签第n个子元素的所有元素

	even	选择偶数
	odd	选择奇数

目标伪类选择器:

:target ：当url指向该元素时生效

复合选择器

• 由两个及以上基础选择器组合而成的选择器
• element1,element2 ：同时选择元素 element1 和元素 element2.
• element.class ：选择包含某类的 element 元素。
• element1 + element2 ：选择紧跟 element1 的 element2 元素
• element1 element2 ：选择 element1 内的所有 element2 元素
• element1 > element2 ：选择父标签是 element1 的所有 element2 元素

通配符选择器

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

伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器

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

样式渲染优先级

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

这些是我这几天总结的，比较常用的，感觉CSS知识点比较杂，记住比较长用的就可以了，不常用的等到用的时候在查就可以了。 第一次写笔记，哪里写错了望指出。