CSS标签笔记

最新推荐文章于 2023-11-08 09:21:46 发布

郭大胖ovo

最新推荐文章于 2023-11-08 09:21:46 发布

阅读量219

点赞数 1

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44066678/article/details/115583131

版权

HTML/CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS标签

CSS选择器

CSS选择器分为基础选择器和复合选择器

基础选择器

基础选择器是由单个选择器组成的。

基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签名 {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	...
}
<style>
	<!--为全部P标签设置样式-->
    p {
        color: red;
    }
</style>
<!--
	作用：标签选择器可以把某一类标签全部选择起来，比如所有的<p>标签或其他标签
	优点：能快速为页面中同类型的标签统一设置样式
	缺点：不能设置差异化样式，只能选择全部的当前标签
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        p {
            color: red;
        }
        div {
            color: pink;
        }
    </style>
  </head>
  <body>
    <p>广州</p>
    <p>深圳</p>
    <p>清远</p>
    <div>湛江</div>
    <div>雷州</div>
  </body>
</html>

类选择器

类选择器可以差异化选择不同的标签，单独选一个或者几个标签。

类选择器在HTML中以 class 属性表示，在CSS中，类选择器以一个点 " . " 号表示。

注意：

1、类选择器使用" . "进行标识，后面紧跟类名(自定义，自己命名)

2、可以理解为给这个标签起一个名字，来表示。

3、长名称或词组可以使用中滑线来为选择器命名。

4、不要使用纯数字或中文命名，尽量使用英文字母来表示。

5、命名要有意义，让人一眼就知道这个类名的目的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .red {
            color:  red;
        }
    </style>
  </head>
  <body>
      <ul>
          <li class="red">我是1</li>
          <li>我是2</li>
          <li>我是3</li>
      </ul>
  </body>
</html>

多类名使用

<div class="red font20">红色的20px字</div>
<!--
1、在标签class属性中写多个类名
2、多个类名中间必须用空格分开
3、这个标签就可以分别具有这些类名的样式

优点：
节省CSS代码，统一修改方便
-->

id选择器

id选择器可以为标有特点id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以" # "来定义

#id名{
	属性1： 属性值1；
	...
}
<style>
    将id为nav元素中的内容设置为红色。
    #nav{
        color:red;
    }
</style>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink{
            color: pink;
        }
    </style>
  </head>
  <body>
      <div id="pink">麦克</div>
  </body>
</html>

id选择器和类选择器的区别

类选择器好比人的名字，可以被多次使用。

id选择器好比人的身份证号码，全中国唯一，不能重复。

id选择器和类选择器最大的不同在于使用次数上。

类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

通配符选择器

在CSS中，通配符选择器使用" * "定义，它表示选取页面中所有元素（标签）

<style>
	*{
		属性1:属性值1;
		...
	}
</style>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            color: red;
        }
    </style>
  </head>
  <body>
      <div>我的</div>
      <span>我的</span>
      <ul>
          <li>我的</li>
      </ul>
  </body>
</html>

基本选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color:red;}
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.nav{color:red;}
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和JS搭配使用	#nav{color:red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{color:red;}

CSS字体属性

CSS Fonts(字体)属性用来定义字体系列、大小、粗细、文字样式(如斜体)。

字体系列

CSS使用font-family属性定义文本的字体系列。

<style>
    p{ font-family:"微软雅黑";}
    div{font-family:"Microsoft Yahei",Arial,"微软雅黑";}
</style>

<body>
      <h2>阿巴阿巴</h2>
      <div>你好啊阿巴</div>
</body>
<!--
	各种字体之间必须使用英文状态下的逗号隔开。
	一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
	尽量使用系统默认自带字体，保证在任何用户的游览器中都能正确显示。
-->

<style>
    p{
        font-size:20px;
    }
</style>
<!--
	px(像素)大小是我们网页的最常用的单位
	谷歌游览器默认的文字大小为16px
	不同游览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
	可以给body指定整个页面文字的大小
-->

<style>
        h2{
            font-size: 30px;
        }
        p{
            font-size: 12px;
        }
</style>

<body>
    <h2>阿巴阿巴</h2>
    <p>你好啊阿巴</p>
</body>

字体粗细

CSS使用font-weight控制字体粗细

参数	作用
normal	正常字体，相当于number为400
bold	粗体
bolder	特粗体
lighter	细体
number	100\|200\|300\|400\|500\|600\|700\|800\|900

    <style>
        p{
            font-weight: bold;
        }
    </style>
    <body>
        <p>我是第一个</p>
    </body>

文字样式

CSS使用font-style属性设置文本的风格。

属性值	作用
normal	默认值，游览器会显示标准的字体样式 font-style:normal;
italic	游览器会显示斜体的字体样式。

    <style>
        p{
            font-style:italic;
        }
    </style>
    <body>
        <p>上课时的你</p>
    </body>

CSS文本属性

CSS Text(文本) 属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color属性可以定义文本的颜色。

表示	属性值
预定义的颜色值	red,green,blue,pink
十六进制	#FF0000,#FF6600
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

<style>
   p{
     color: red;
   }
</style>
<body>
   <p>我是红色</p>
</body>

文本对齐

text-align属性用于设置元素内容的水平对齐方式。

属性值	解释
left	左对齐(默认值)
right	右对齐
center	居中对齐

    <style>
        div {
            text-align: center;
        }
    </style>
  <body>
      <div>
          我是居中对齐的文字
      </div>
  </body>

装饰文本

text-decoration属性规定添加到文本的装饰。可以给文本添加下划线、删除线、上划线等。

属性值	描述
none	默认。没有装饰线(最常用)
underline	下划线。链接a自带下划线(常用)
overline	上划线。(几乎不用)
line-through	删除线。(不常用)

    <style>
        div{
            text-decoration: none;
        }
        span{
            text-decoration: underline;
        }
        p{
            text-decoration: overline;
        }
        h1{
            text-decoration: line-through;
        }
    </style>
  <body>
      <div>我是默认值没有效果</div>
      <span>我是有下划线的字体</span>
      <br>
      <p>我是有上划线的字体</p>
      <h1>我是有删除线的字体</h1>
  </body>

文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

    <style>
        p{
            /* 文本第一行首航缩进 多少距离 */
            /* text-indent: 20px; */
            /* 2em,则是缩进当前元素2个文字大小的距离 */
            text-indent: 2em;
        }
    </style>
<p>菲菲菲菲菲菲</p>
菲菲菲菲菲菲菲菲菲菲菲菲

行间距

line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。

行间距分为

上间距
文字高度
下间距

    <style>
        p{
            line-height: 30px;
        }
    </style>
  <body>
    <p>我是第一行</p>
    <p>我是第二行</p>
  </body>

文本属性总结

属性	表示	注意点
color	文本颜色	通常用十六进制比如#ff0000
text-align	文本对齐	可以设定文本水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进2个字的距离 text-indent:2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none
line-height	行高	控制行与行之间的距离

CSS引入方式

CSS样式表可以分为三大类

1、行内样式表(行内式)

2、内部样式表(嵌入式)

3、外部样式表(链接式)

内部样式表

内部样式表是写到HTML页面内部，将所有CSS代码抽取处理，单独放到一个style标签中

<style>
    div{
        color:red;
    }
</style>
<!--内部样式表-->

行内样式表

行内样式表(内链样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。

<div style="color:red; font-size:12px;">
    青春不常在，抓紧谈恋爱。
</div>

外部样式表

核心：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

引入外部样式表分为两步：

1、新建一个后缀为.css的样式文件，把所有CSS代码放在此文件中。

2、在HTML页面中，使用 link 标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。
href	定义所链接外部样式表文件的URL,可以是相对路径，也可以是绝对路径。

Emmet语法

快速生成HTML结构语法

1、生成标签直接输入标签名按tab键即可比如 div 然后 tab键，就可以生成

2、如果想要生成多个相同标签加上 * 就可以了比如 div * 3 就可以快速生成3个div

3、如果有父子级关系的标签，可以用 > 比如 ul > li 就可以了

4、如果有兄弟关系的标签，用 + 标签就可以了比如 div+p

5、如果生成带有类名或者 id 名字的，直接写 .demo 或者 #two tab键就可以了。

6、如果生成的 div类名是有顺序的，可以用自增符号 $

7、如果想要在生成的标签内部写内容可以用 { } 表示

快速生成CSS标签

1、比如 w200 按 tab键可以生成 width:200px;

2、比如 lh26 按 tab 键可以生成 line-height:26px;

CSS选择器复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

1、复合选择器可以更准确、更高效的选择目标元素(标签)

2、复合选择器是由两个或多个基本选择器，通过不同的方式组合而成的。

3、常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内部标签就成为外部标签的后代。

<!--
	元素1 元素2{样式声明}
	上述语法表示 选择 元素1 里面的所有 元素2(后代元素)
例如:
	ul li{样式声明}
	选择 ul 里面所有的 li标签元素

元素1和元素2中间用 空格 隔开
元素1是父级，元素2是子集，最终选择的是元素2。
元素2可以是儿子，也可以是孙子，只要是元素1的后代即可。
元素1和元素2可以是任意基础选择器
-->

    <style>
      ol li {
        color: pink;
      }
      ul li a {
        color: red;
      }
    </style>

<body>
    <ol>
      <li>我是 ol 的 孩子</li>
      <li>我是 ol 的 孩子</li>
      <li>我是 ol 的 孩子</li>
    </ol>
    <ul>
      <li>我是ul 的孩子</li>
      <li>我是ul 的孩子</li>
      <li>我是ul 的孩子</li>
      <li><a href="#">我是孙子</a></li>
    </ul>
    <ul class="nav">
      <li>我是ul 的孩子</li>
      <li>我是ul 的孩子</li>
      <li>我是ul 的孩子</li>
    </ul>
  </body>

子选择器

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是亲儿子元素。

<!--
元素1>元素2{样式声明}
上诉语法表示选择元素1里面的所有直接后代(子元素)元素2.
例如:
div>p{样式声明}
选择div里面所有最近一级p标签元素

元素1和元素2中间用大于号 > 隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其孙子、重孙之类都不归他管，你也可以叫他亲儿子选择器
-->

    <style>
      .nav > a {
        color: pink;
      }
    </style>
<body>
    <div class="nav">
      <a href="#">我是儿子</a>
      <p>
        <a href="#">我是孙子</a>
      </p>
    </div>
  </body>

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文( , )连接而成，任何形式的选择器都可以作为并集选择器的一部分。

<!--
	元素1,元素2{样式声明}
	上述语法表示选择元素1和元素2。
	例如:
	ul,div{样式声明}
	选择 ul 和 div 标签元素
	
	元素1和元素2中间用逗号隔开
	逗号可以理解为和的意思
	并集选择器通常用于集体声明

-->

伪类选择器

链接伪类选择器

标签	作用
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接(鼠标按下未弹起的链接)

    <style>
      /* 1、未访问过的链接 a:link 把没有点击过(访问过的)链接选出来 */
      a:link {
        color: #333;
        text-decoration: none;
      }
      /* 2、 a：visited 选择点击过的(访问过的)链接 */
      a:visited {
        color: orange;
      }
      /* 3、a:hover 选择鼠标经过的那个链接 */
      a:hover {
        color: skyblue;
      }
      /* 4、 a:active 选择的是我们鼠标正在按下但还没弹起鼠标的那个链接 */
      a:active {
        color: pink;
      }
    </style>
  <body>
    <a href="#">小猪佩奇</a>
    <a href="##">小猪乔治</a>
  </body>

注意事项：

1、为了确保生效，请按照 LVHA 的顺序声明 :link :visited :hover :active

2、开发中，最常用就是 :hover 其他的可以不再加多设置

:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

<style>
    input:focus{
		background-color:yellow;
    }
</style>
    <style>
      input:focus {
        background-color: skyblue;
      }
    </style>
  <body>
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
  </body>

CSS元素显示模式

什么是元素显示模式

元素显示模式就是元素(标签)以什么方式进行显示，比如 div 独占一行 span独占一格一行可以放多个span

HTML元素一般分为块元素和行内元素两种类型

块元素

常见的块元素有 h1~h6、p、div、ul、ol、li等，其中 div 标签是最典型的块元素。

块元素的特点：

1、比较霸道，自己独占一行。

2、高度、宽度、外边距以及内边距都可以控制。

3、宽度默认是容器(父级宽度)的100%

4、是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能使用块级元素

p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div

h1~h6等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素 a、strong、em、i、del、s、ins、u、span等，其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

1、相邻行内元素在一行上，一行可以显示多个。

2、高、宽直接设置无效的

3、默认宽度就是它本身内容的宽度

4、行内元素只能容纳文本或其他行内元素

行内块元素

在行内元素中有几个特殊的标签 img、input、td,它们同时具有块元素和行内元素的特点。

称它们为行内块元素。

行内块元素的特点：

1、和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)

2、默认宽度就是它本身内容的宽度(行内元素特点)

3、高度、行高、外边距以及内边距可以控制(块级元素特点)

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度高度	它本身内容的宽度

元素显示模式转换

转换为块元素 display:block;

转换为行内元素 display:inline;

转换为行内块 display:inline-block;

    <style>
      a {
        width: 150px;
        height: 50px;
        background-color: pink;
        /* 把行内元素 a 转换为块元素 */
        display: block;
      }
      div {
        background-color: red;
        display: inline;
      }
      span {
        width: 300px;
        height: 250px;
        background-color: skyblue;
        display: inline-block;
      }
    </style>
    <body>
    <a href="#">我是行内元素，我要转换为块元素</a>
    <a href="#">我是行内元素，我要转换为块元素</a>
    <div>我是块级元素，我要转换为行内元素</div>
    <div>我是块级元素，我要转换为行内元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
  </body>

单行文字垂直居中的原理

简单理解：行高的上空隙和下空隙把文字挤到中间了。是如果行高小于盒子的高度，文字会偏上，如果行高大于盒子的高度，则文字偏下

CSS的背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color:颜色值;

定义了元素的背景颜色

一般情况下元素背景颜色默认值是 transparent (透明)，我们也可以手动指定背景颜色为透明。

    <style>
      body {
        background-color: pink;
      }
    </style>
  <body>
    <h1>粉红色背景</h1>
  </body>

背景图片

background-image 属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置(精灵图也是一种运用场景)

background-image:none|url(图片地址)

参数值	作用
none	无背景图(默认的)
url	使用绝对路径或相对路径指定背景图像

    <style>
      div {
        width: 200px;
        height: 200px;
        background-image: url(images/pic.jpeg);
      }
    </style>
  <body>
    <div></div>
  </body>

背景平铺

如果需要在HTML页面对背景图像进行平铺，可以使用background-repeat属性

background-repeat:repeat|no-repeat|repeat-x|repeat-y

参数值	作用
repeat(默认值)	背景图像在纵向和横向向上平铺
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

背景图片位置

利用 background-position属性可以改变图片在背景中的位置。

background-position:x y;

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位

参数值	说明
length	百分数 \|由浮点数字和单位标识符组成的长度值
position	top\|center\|bottom\|left\|center\|right 方位名词

1、参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致

如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐。

    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: pink;
        background-image: url(images/logo.png);
        background-repeat: no-repeat;
        /* 图片在中上位置 */
        /* background-position: center top; */
        /* 此时只有一个参数。另外一个就垂直居中 */
        background-position: bottom;
      }
    </style>
      <body>
    <div></div>
  </body>

2、参数是精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标

如果只指定一个数值，那该值一定是x坐标，另一个是默认垂直居中。

    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: pink;
        background-image: url(images/logo.png);
        background-repeat: no-repeat;
        background-position: 20px 50px;
      }
    </style>
      <body>
    <div></div>
  </body>

3、参数是混合坐标

如果指定的两个值是精确单位和方位单位名词混合使用，则第一个是x坐标，第二个值是 y坐标

背景图像固定

background-attachment 属性设置图像是否固定或者随着页面的其余部分滚动。

background-attachment : scroll |fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定（一直显示在你面前）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url(images/bg.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        color: #fff;
        font-size: 20px;
        background-attachment: scroll;
        /* background-attachment: fixed; */
      }
    </style>
  </head>
  <body>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
    <p>天王盖地虎，身高一米五</p>
  </body>
</html>

背景属性复合写法

使用简写属性时，习惯约定顺序为

background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

background:transparent url(image.jpg) repeat-y fixed top;

背景色半透明

CSS3为我们提供了背景颜色半透明的效果

background:rgba(0,0,0,0.3);

最后一个参数是 alpha 透明度，取值范围在0~1之间

背景颜色总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是 x 和 y 坐标
background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)
背景简写	书写更简单	背景颜色背景图片地址背景平铺背景滚动背景位置;
背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3); 后面必须是4个值

CSS的三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级。

层叠性

相同选择器给设置相同的样式，此时一个样式会覆盖(层叠) 另一个冲突的样式。重叠性主要解决样式冲突的问题

层叠性原则：

样式冲突遵循的原则则是就近原则，哪个样式离结构近，就执行哪个样式

样式不冲突，不会层叠

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background-color: blue;
        font-size: 20px;
      }
      div {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div>层叠性</div>
  </body>
</html>

继承性

现实中的继承：我们继承了父亲的姓

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单理解就是：子承父业。

子元素可以继承父元素的样式(text-,font-,line- 这些元素开头的可以继承，以及color 属性)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        font-size: 20px;
        color: pink;
      }
    </style>
  </head>
  <body>
    <div>
      <p>我是继承了div的CSS样式</p>
    </div>
  </body>
</html>

行高的继承性

<style>
body{
	font:12px/1.5 Microsoft YaHei ;
}
</style>
<!--
	行高可以跟单位也可以不跟单位
	如果子元素没有设置行高，则会继承父元素的行高为1.5
	此时子元素的行高是:当前子元素的文字大小 *1.5
-->

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性

选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或 * 通配符选择器(最小)	0，0，0，0
元素选择器 (标签选择器) div	0，0，0，1
类选择器,伪类选择器 :hover .class	0，0，1，0
id选择器 #id	0，1，0，0
行内样式 style=""	1，0，0，0
!important 重要的 (最大)	无穷大

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #demo {
        color: pink !important;
      }
      .test {
        color: green;
      }
      div {
        color: skyblue;
      }
      * {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="test" id="demo" style="color: blueviolet">
      哈哈哈哈哈哈哈哈哈哈
    </div>
  </body>
</html>

优先级注意点

1、权重是有4组数字组成，但是不会有进位。

2、可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。

3、等级判断从左向右，如果某一位数值相同，则判断下一位数值。

4、可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器为100，行内样式表为1000，!important 无穷大

5、继承的权重是0 ，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.

复合选择器优先级权重叠加

权重叠加:如果是复合选择器，则会有权重叠加，需要计算权重

郭大胖ovo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS标签笔记

CSS标签CSS选择器CSS选择器分为基础选择器和复合选择器基础选择器基础选择器是由单个选择器组成的。基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器标签选择器标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。标签名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; ...}<style>  p {
复制链接

扫一扫