css笔记8.2

CSS

概述：

1. CSS 指层叠样式表 (Cascading Style Sheets)
2. 样式定义如何显示 HTML 元素
3. 样式通常存储在样式表中
4. 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
5. 外部样式表可以极大提高工作效率
6. 外部样式表通常存储在 CSS 文件中
7. 多个样式定义可层叠为一个

语法

• CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
• 选择器通常是您需要改变样式的 HTML 元素。
• 每条声明由一个属性和一个值组成
• CSS声明总是以分号 ; 结束，声明用大括号 {} 括起来:

css 基本样式

文档流的顺序： 上下左右
行级标签：按照文档流的顺序依次排序
块级标签：独占一行

基本样式

• 宽：width:100px;
• 高：height：100px;
• 背景颜色:background-color:coral;
  注意：行级标签设置的宽高不起作用，需要转成块级才能设置宽高

颜色

• 颜色属性：color
• 单词表示: red、green、blue…
• 十六进制表示:取值范围 (0～9 && a～f)
• RGB 三原色表示:取值范围 (0～255)
• RGBA就是在三原色的基础上加上了透明度取值（0—1）

注释

CSS 注释以 /* 开始, 以 */ 结束

css引入方式

使用CSS的方法有三种

• style内联样式（不推荐使用）
• 内部样式在style标签中写
• 外部样式表css文件（通过link标签连接）

写法一：
内联样式：

 <font style="color: chocolate;font-size: 20px;">大苏打</font>

写法二：
内部样式：

<style>
    font {
        color: yellowgreen;
        font-family: "楷体";
        /* display: block; */
        background-color: blue;
    }

    div {
        background-color: rgba(200, 23, 124, 0.1);
        width: 300px;
        height: 300px;
        border: 1px solid grey;
    }
</style>

写法三：
外部样式：
外联样式需要将样式写到后缀为css的文件中，在html中使用是需要用link标签引用或者使用@import url（‘’）在内部样式中引入

font {
    background-color: red;
}

body {
    background-image: url(../img/微信图片_20220827103828.jpg);
}

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

样式表优先级

• 就近原则：当有相同样式存在时，后面的优先级较高。（内联>内部>外部）但不建议重复设置样式的情况
• 内部样式与外部样式：内部样式与外部样式优先级相同，如果有相同样式存在，内联样式优先级更高
• 单一样式优先级：style 行间 > id > class >tag > * > 继承（注： ！important 强制优先）

冲突、层叠、继承

• 层叠：同一个元素使用不同的样式表，层叠会将内部、内联和外部不同的样式叠加起来
• 冲突：同一元素设置相同属性会造成冲突如果有冲突就遵循就近原则顺序优先级为内部>内联>外部
• 继承：在子父关系中，文本样式可以被继承，布局样式不可以被继承（块级会继承父的宽，行级不可以）

CSS选择器

全局选择器

全局通用的样式选择器又叫做通配符选择器（*）

	* {
        padding: 0;
        margin: 0;
   	 } 

标签选择器

HTML 中定义的标签可以作为选择器

	ul {
        color: greenyellow;
   	 }

类选择器

HTML 中标签定义的类名可以作为选择器

	.c {
        background-color: aquamarine;
  	  }

id选择器

HTML 中标签定义的id可以作为选择器（Id 名字独一无二）

	#w {
        background-color: brown;
  	  }

群组选择器

同时给多个内容加样式时用，隔开

p,a,b {
        background-color: cadetblue;
    }

层次选择器

• 后代选择器 空格
• 如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。

ul li {
        list-style: none;
    }

• 子代选择器 >（父子关系必须是上下级关系紧挨在一起）
• 它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素。

ul>li {
        background-color: cornflowerblue;
    }

• 相邻兄弟 +
• 第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父的子元素，则第二个元素将被选中

li+b {
        background-color: blanchedalmond;
    }

• 通用兄弟 ~
• 匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。

ul~a {
        background-color: dodgerblue;
    }

伪类选择器

ui伪类选择器（循序不能变）

	a:link {//默认状态样式
        background-color: aquamarine;
    }

    a:visited {//使用后的样式
        background-color: brown;
    }

    a:hover {//鼠标悬浮样式
        background-color: cornflowerblue;
    }

    a:active {//鼠标点击后样式
        background-color: black;
    } 

结构伪类

    ul li:nth-child(3) {//选择ul里第三个标签
        background-color: cyan;
    }

    ul b:nth-child(7) {选择ul里第七个标签
        background-color: dodgerblue;
    }