【Web】CSS学习笔记

IT阳晨。

已于 2022-07-31 11:09:56 修改

阅读量455

点赞数

分类专栏： Web前端文章标签：前端 css 学习

于 2022-07-29 17:46:52 首次发布

本文链接：https://blog.csdn.net/qq_62361050/article/details/126036957

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、CSS简介

CSS英文全称【cascading style sheet】：层叠样式表。

作用：CSS用于美化网页、还可以进行网页布局。

前端三层是什么呀？
答案：前端分为三层：HTML（结构层）、CSS（样式层）、JavaScript（行为层）。

语言	层级	作用
HTML	结构层	可以利用语义化标签搭建网页内容
CSS	样式层	可以利用一些样式技术，美化页面、或者进行网页布局。
JavaScript【简称JS】	行为层	可以让用户和网页进行人机交互

总结：CSS，前端人当中称之为样式层，可以对网页进行美化。比如：文字设置颜色、文字设置大小、设置文字字体。可以进行网页页面布局。

1. CSS书写规则

CSS【层叠样式表，简称样式】：根据在网页书写位置不同。分为三种：行内样式、内嵌样式、外链样式。

注意：我们刚开始学习的是行内样式写法。

在这里插入图片描述

<div style="color:red;">我是行内样式呀</div>
<p style="color:yellow;">我是一个段落呀</p>
<a style="color:gree;font-size:66px">我是一个超级链接</a>

任意标签【容器、文本】都可以添加行内样式。上面写法、书写位置称之为行内样式。
需要在双标签、单标签的开始标签位置进行书写
在开始标签名字后面，别忘记有空格，给这个标签添加一个style（英文含义：样式）属性
但是需要注意的是：这个style属性的属性值，写法很独特。

style属性的属性值写法:

样式属性名字:样式属性的属性值
别忘记在样式属性值后面加上一个分号，代表当前这一个样式设置完毕，进行下一个样式属性。
一个标签可以同时设置多个样式，多个样式之间用分号隔开。

二、常用样式

在制作网页的时候，我们经常和网页中文字打交道。比如设置文字颜色、文字大小、文字字体。

1. color

color这个样式，主要的作用是设置文字的颜色。

属性值：是有英文单词、十六进制数字组成。

1.1 下面这种写法：color属性值对应颜色英文单词。

在这里插入图片描述

	  <div style="color:red;">我是一个划分区域容器级别标签</div>
	  <div style="color:orange;">我是一个划分区域容器级别标签</div>
	  <div style="color:yellow;">我是一个划分区域容器级别标签</div>
	  <div style="color:green;">我是一个划分区域容器级别标签</div>
	  <div style="color:cyan;">我是一个划分区域容器级别标签</div>
	  <div style="color:blue;">我是一个划分区域容器级别标签</div>
	  <div style="color:purple;">我是一个划分区域容器级别标签</div>
	  <div style="color:skyblue">我是一个划分区域容器级别标签</div>

注意：

一般情况下，一个样式只需要设置一次即可。如果设置多次。右侧覆盖左侧属性。
任意标签都可以设置行内样式。

<div style="color:red;color: black">我是一个划分区域容器级别标签</div>

注意：

一般情况下，一个样式只需要设置一次即可。如果设置多次。右侧覆盖左侧属性。
任意标签都可以设置行内样式

1.2 下面这种写法：color属性值对应十六进制数字。

在这里插入图片描述

<ul>
          <li>
             <h3 style="color:#a52a2a;">西游记</h3>
          </li>
          <li>
             <h3 style="color:#7FFF00;">三国演义</h3>
          </li>
          <li>
             <h3 style="color:#CD5C5C;">水浒传</h3>
          </li>
          <li>
             <h3 style="color:#7CFC00;">红楼梦</h3>
          </li>
 </ul>

如果color样式的属性值为十六进制数字，切记以#号开头，分号结束。
十六进制的英文字母不区分大小写
十六进制的数字不需要死记硬背，因为你记不住。参考手册即可。

1.3 下面这种写法：rgb(red,green,blue)有三色素组成，红色部分三色素，需要的是0~255之间的数字.

p#box1{
      	color:rgb(188,99,44);
 }

注意：
标签文字的颜色数值，可以rgb三色素形式。三色素数值是0~255之间整数，三色素数值之间用逗号隔开。

2. font-size

font-size:字体大小。这个样式的主要的作用是可以设置文字的大小。
属性值：属性值是由数字加上px单位。

pixel：px全称，像素含义。

属性值：有三种写法。

像素单位：比如50px，代表文字大小为50像素。

	  <div style="font-size: 1px;">我的大小为1px</div>
	  <div style="font-size: 12px;">我的大小为12px</div>
	  <p style="font-size:16px;">我的大小为16px，是浏览器默认大小</p>
	  <div style="font-size: 20px;">我的大小为20px</div>
	  <div style="font-size: 25px;">我的大小为25px</div>
	  <div style="font-size: 30px;">我的大小为30px</div>

在这里插入图片描述

百分比写法：就是后代元素的字体大小，是祖先元素字体大小的百分比。
em单位：就是后代元素的字体大小，是祖先元素的字体大小的多少倍。

#box1{
        	font-size: 500%;//80px
      }

代表的是这个匹配标签字体大小为就近的祖先元素font-size的500%。
由于咱们这个案例，p标签就近的祖先元素为body（默认字体大小为16px）。

#box2{
        	font-size: 5em;//80px
        }

代表的是这个匹配的标签字体大小为就近的祖先元素font-size的5倍。
由于咱们这个案例，p标签就近的祖先元素body(默认字体为16px)。

一、谷歌浏览器

谷歌浏览器，一般标签默认文字的大小是16px，谷歌浏览器最小的12px，如果比12px还小，显示12px。

谷歌浏览器字体大小最大都是上不封顶的。

三、IE浏览器

IE浏览器，一般标签默认文字的大小16px，IE浏览器最小的1px，如果比1px还小，显示1px

IE浏览器字体大小最大也是上不封顶的。

<h1>我是一级标题</h1>
<h1>我是二级标题</h1>

注意：比如h系列标签，默认字体大小的。还有一些浏览器自带默认样式。

3. font-family

font-family:中文含义，即为字体系列。这个样式主要的作用是设置文字的字体。

文字：分为中文、英文。中文有属于字体字体、英文也有属于自己字体。

在这里插入图片描述

	 <p>默认字体</p>
	 <p style="font-family:'微软雅黑'">微软雅黑</p>
	 <p style="font-family:'方正粗黑宋简体'">方正粗黑宋简体</p>
	 <p style="font-family:'楷体'">楷体</p>

在这里插入图片描述

font-famliy属性值外层需要加上一对单引号。
font-family:可以同时设置多个字体，多个字体之间用逗号隔开，从左到右，后面字体设置覆盖前面字体设置。

 <hr/>
	 <p style="font-family:'Arial'">my name is jch</p>
 	 <p style="font-family:'Webdings','Arial'">my name is jch</p>
 	 <p style="font-family:'Webdings','Arial'">my name is jch</p>
	 <hr/>
	 <div style="font-family:'Webdings','Arial','楷体','简方正粗黑宋体'">my name is 花骨朵</div>

在这里插入图片描述

英文字体不需要记忆：

1：如果文字内容，为纯的英文（没有汉字），设置多个英文字体。后者没有用。
2：如果文字内容，为文字+英文，设置多个中英文字体。从左到右找到第一个符合自己字体进行设置。

4. line-height

line-height:它主要的作用是，可以设置文字实际占有的高度。

文字实际占有的高度，不是由font-size大小决定的，是有行高决定的。文字在行高中垂直居中的。

属性值：2种写法。

像素单位：100px，代表文字占有的高度为100px。
百分比：按照自身的font-size大小进行划分的。

 p{
     	 font-size: 50px;
     }

在这里插入图片描述

p{
     	 font-size: 50px;
     	 /*行高:line-height*/
     	 line-height: 100px;//文字实际占有的高度为100px
     }

在这里插入图片描述

p{
     	 font-size: 50px;
     	 /*行高:line-height*/
     	 line-height: 200%;
 }

在这里插入图片描述
行高经常用来做什么?

经常用来制作：固定宽度和高度的标签，文字垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      *{
      	 margin:0;
      	 padding: 0;
      }
      div{
      	   /*标签的宽度*/
      	   width:600px;
      	   /*标签的高度*/
      	   height: 200px;
      	   /*外边框*/
      	   border:5px solid red;
      	   font-size:50px;
      	   /*让文字行高和标签的高度一样即可*/
      	   line-height:200px;
      }
	</style>
</head>
<body>
	 <div>
	      我是老花骨朵呀
	 </div>
</body>
</html>

在这里插入图片描述

文字垂直居中只需让文字实际占有的高度，和标签的高度一样即可。

5. font-weight

font-weight：可以让文字加粗。

属性值：纯数字、英文单词。

在这里插入图片描述

#box{
      	/* color:red;*/
      	 /*font-weight:让文字加粗*/
      	 font-weight: 700;
      }

font-weight:属性值可以是纯数字（没有像素单位）
属性值为纯数字：100~700之间的整数。【网页文字默认加粗的效果400】

#box{
      	/* color:red;*/
      	 /*font-weight:让文字加粗*/
      	 font-weight: bold;
      }

font-weight:属性值可以为英文单词
normal【英文含义：正常的意思】相当于默认加粗数值400。bold【英文含义：加粗】，相当于数字700

注意：加粗的这个属性值没有像素单位。

6. font-style

在这里插入图片描述

font-style:它主要的作用是可以让文字倾斜。

属性值：英文单词

normal：正常、文字不倾斜。

italic:斜体字【工作当中经常使用到它】

oblique:倾斜

<style type="text/css">
       *{
       	  margin:0;
       	  padding: 0;
       }
       .normal{
       	font-style: normal;
       }
       .italic{
       	font-style: italic;
       }
       .oblique{
       	font-style: oblique;
       }
	</style>

在这里插入图片描述

7. 复合样式—font

其实font是一个符合样式：

font-style:文字倾斜
font-weight:加粗
font-size:字体大小
line-height:行号
font-family：字体设置【宋体、微软雅黑】

相当于：这个五个样式简写方式

font：font-style font-weight font-size line-height font-family

.normal1{
      	 color:rgb(123,66,99);
      	 font:italic bold 50px/300px '楷体';
      }

font是上面五个属性简写方式。多个属性值之间用空格隔开。
字体倾斜、字体加粗的位置可以互换。但是其余三个位置书写不能互换。
字体大小和行高之间用斜杠链接。

8. 文本相关样式

8.1 text-align

在这里插入图片描述
text-align：它主要的作用是设置网页中的文本的水平对齐方式。

属性值：英文单词

left:让网页中的文本水平靠左侧对齐。（默认数值）
center:让网页中的文本水平居中对齐。
right:让网页中的文本水平靠右侧对齐。

注意：不管单行文本、多行文本都可以通过text-align属性值，进行设置文本水平方向对齐方向。

 .cur{
     	 width:400px;
     	 height: 200px;
     	 /*外边框*/
     	 border:2px solid red;
     	 /*设置文本对齐方式*/
     	 text-align: right;
     }

在这里插入图片描述

默认情况下：网页的文本水平对齐方式靠左侧对齐。
不管是单行文本、还是多行文本都可以通过text-align进行设置水平对齐方式。

8.2 text-decoration

在这里插入图片描述
text-decoration：它主要的作用是可以给文本添加线条修饰。

属性值：英文单词

none:没有线条修饰
overline:文本上方有线条修饰
line-through:文本有中线的修饰
underline:文本有下线的修饰

在这里插入图片描述

<style type="text/css">
      *{
      	 margin:0;
      	 padding: 0;
      }
      .none{
      	  text-decoration: none;
      }
      .overline{
      	 text-decoration: overline;
      }
      .through{
      	text-decoration: line-through;
      }
      .underline{
      	 text-decoration: underline;
      }
	</style>

8.3 text-indent

text-indent:英文含义，文本缩进。

text-indent:可以设置文本首行的缩进的距离。

属性值：2种

像素单位：比如100px，代表文本首行向右缩进100像素
em单位：比如10em，代表文本首行向右缩进10个中文字符。

在这里插入图片描述

 .indent{
      	 width:400px;
      	 height: 400px;
      	 border:1px solid red;
      	 /*文本首行缩进*/
      	 text-indent: 100px;
      }

下面em单位代表的是文本首行缩进的中文字符个数。

.indent{
      	 width:400px;
      	 height: 400px;
      	 border:1px solid red;
      	 /*文本首行缩进*/
      	 text-indent:2em;//代表首行缩进两个中文字符
      }

9. 盒模型样式

盒模型有人也称之为‘框模型’，盒模型就是网页中的标签，在网页中实际占有区域而已。

盒模型是有五个样式组成：
width(宽度)、height（高度）、padding(内边距)、border（边框）、margin(外边距)。

另外还有一个：background-color:汉语意思，背景颜色。
background-color:样式属性值和color样式的属性值一样的【英文单词，16进制数字】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       *{
       	   margin:0;
       	   padding: 0;
       }
       div{
       	   width:400px;
       	   height: 400px;
       	   padding:50px;
       	   border:10px solid red;
       	   margin:60px;
       }
	</style>
</head>
<body>
	 <div>
           大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女
	 </div>
</body>
</html>

在这里插入图片描述

标签在网页中实际占有的区域：width +height +padding+border+margin
标签可以书写内容区域：width +height

9.1 宽度、高度

宽度（width）和高度（height）：设置标签可以书写内容区域。

属性值：像素单位、百分比单位。

非常常用像素单位

宽度和高度常用的单位为像素单位：数字设置为多少，宽度和高度即为多少像素。
在这里插入图片描述

 #inner{
      	 width:200px;
      	 height: 200px;
      	 background-color: red;
      }

也是比较常用的单位：百分比

元素的宽度和高度可以写百分比单位：元素的宽度和高度百分比参照父元素的宽度和高度进行划分的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      *{
      	 margin:0;
      	 padding: 0;
      }
      #inner{
      	 width:50%;  ====>200px
      	 height:100%;=====>400px
      	 background-color: red;
      }
      #outer{
      	 width:400px;
      	 height: 400px;
      	 border:1px solid cyan;
      }
	</style>
</head>
<body>
    <div id="outer">
    	  <div id="inner"></div>
    </div>
</body>
</html>

元素宽度和高度属性值可以书写为百分比形式
元素的宽度和高度百分比，是按照父元素的宽度和高度进行百分比划分的。

注意事项：

元素的宽度和高度属性值为百分比。元素的宽度和高度会随着父元素的宽度和高度变化而变化。
body为网页主题部分，它有默认宽度。默认宽度为用户浏览器宽度。在开发当中很少设置body的宽度。
如果某一个标签想和网页主体一样宽。作为body的子元素设置为100%即可。
类似div这种容器级别标签，如果没有设置w、h。宽度默认和父元素一般宽。高度为零。
如果设置文本，会让文本撑出一个高度。

9.2 内边距

在这里插入图片描述
内边距：内边距（padding），它主要的作用是，设置宽高区域和边框距离的设置。

特点：内边距不能显示内容的，但是可以设置背景。

属性值：像素单位。

注意：padding这个样式，它是一个复合样式。是由下面这四个单一样式组成的。

padding-top、padding-right、padding-bottom、padding-left。

在这里插入图片描述

.pdd{
      	 width:200px;
      	 height: 200px;
      	 border:2px solid red;
      	 padding-top: 10px;
      	 padding-right: 20px;
      	 padding-bottom: 30px;
      	 padding-left: 40px;
      }

padding是一个复合样式，是由上面这四者组成。而我们这个padding样式，它的样式属性值写法，有四种。
多个属性值之间用空格隔开。

第一种写法：四个属性值（多个属性值之间，用空格隔开）
分别代表：上、右、下、左（顺时针）四个内边距数据设置。

在这里插入图片描述

 padding: 10px 20px 30px 40px;

第二种写法：三个属性值（多个属性值之间，用空格隔开）
分别代表：上、右和左、下内边距数据设置。

在这里插入图片描述

  padding: 10px 20px 30px;

第三种写法：两个属性值（多个属性值之间，用空格隔开）
分别代表：上下和左右内边距数据设置。

 padding: 10px  20px;

第四种写法：一个属性值。
分别代表的是：上右下左内边距设置。

在这里插入图片描述

 padding:10px;

下面这种情况需要注意：

  padding: 20px;
  padding-left: 40px;

如果复合样式padding属性值书写完毕，在复合样式后面，如果在出现单一内边距样式出现。会覆盖前者内边距设置数据。

9.3 边框

作用：边框（border），主要的作用是设置标签外层边框。

属性值：属性值是由三部分组成，三个属性值之间需要用空格隔开。

三个属性值分别是：边框的宽度、边框线条设置、边框的颜色。

在这里插入图片描述

.bk{
      	  width:200px;
      	  height: 200px;
      	  padding: 10px;
      	  /*边框*/
      	  border:10px solid red;
      }

border三个属性值：属性值之间用空格隔开。
三个属性值：边框的宽度、边框线条类型、边框的颜色。

注意：border是一个复合样式。是由下面这三个单一样式组成。

border-width：边框的宽度
border-style：边框的线条类型
border-color：边框的颜色

9.3.1 border-width

作用：它主要的作用是，设置标签边框的宽度。

属性值：它的属性值的写法，类似padding，属性值都是像素单位。也是有四种写法。

在这里插入图片描述

 border-width:10px 20px 30px 40px;

代表：代表的是标签：上、右、下、左边框的宽度。（多个属性值之间用空格隔开）

在这里插入图片描述

  border-width:10px 20px 30px;

代表：代表的是标签：上、左右、下边框的宽度（多个属性值之间用空格隔开）。

在这里插入图片描述

border-width:10px 20px;

代表：代表的是标签：上下、左右边框的宽度。（多个属性值用空格隔开）

在这里插入图片描述

 border-width:50px;

代表：代表的是标签：上、右、下、左边框的宽度。

9.3.2 border-style

作用：它主要的作用是，设置边框的线条类型。

属性值：它的属性值写法类似于padding，也是有四种写法。属性值都是英文单词

solid 实线
dashed 虚线

在这里插入图片描述

 border-style:solid solid dashed solid;

代表：上、左右、下的线条类型

在这里插入图片描述

border-style:solid dashed solid;

代表：上、左右、下的线条类型

在这里插入图片描述

border-style:dashed solid;

代表：上下、左右的线条类型

在这里插入图片描述

 border-style:dashed;

代表：上、右、下、左线条类型

9.3.3 border-color

作用：主要的作用是设置边框的颜色。

属性值：属性值写法，类似于padding。也是有四种写法。属性值可以英文单词、也可以16进制颜色值。

属性值也有四种写法，多个之间用空格隔开。

在这里插入图片描述

 border-color: red orange yellow green;

在这里插入图片描述
属性数目和真实图的关系都和上面一样。

 border:10px solid red;
--------------------相当于下面这种单一样式的写法----------------------
 border-width: 10px;
 border-style: solid;
 border-color: red;

9.3.4 小练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        *{
        	 margin:0;
        	 padding: 0;
        }
        .outer{
        	 width:300px;
        	 height: 200px;
        	 border:1px solid red;
        }
        .outer div{
        	color:green;
        	text-align: center;
        	border-width: 0px 0px 1px 0px;
        	border-style: dashed;
        	border-color: cyan;
        	font-size: 18px;
        	font-family: '楷体';
        }
	</style>
</head>
<body>
	 <div class="outer">
	     <div>我是新闻1</div>
	     <div>我是新闻2</div>
	     <div>我是新闻3</div>
	     <div>我是新闻4</div>
	 </div>
</body>
</html>

在这里插入图片描述

9.4 外边距

在这里插入图片描述
作用：外边距，主要的作用是设置标签与标签之间的距离。

特点：外边距中不能显示内容，不能设置背景。

属性值：它的属性值写法类似于padding，单位都是像素单位。

注意：margin它也是一个复合样式。是由下面四个单一的样式组成的。

margin-top、margin-right、margin-bottom、margin-left。

在这里插入图片描述

 .mr{
       	  width: 200px;
       	  height: 200px;
       	  padding: 20px;
       	  border:2px solid red;  
       	  background-color: cyan;
       	  /*外边距：四个单一样式*/
       	  margin-top:10px;
       	  margin-right: 20px;
       	  margin-bottom: 30px;
       	  margin-left: 40px;
       }

外边距在工作当中：经常使用复合样式margin。它的属性值写法类似于padding，有四种写法。

在这里插入图片描述

margin:10px 20px 30px 40px;

代表：代表的是标签上、右、下、左外边距。（多个属性值之间用空格隔开）

在这里插入图片描述

 margin:10px 20px 30px;

代表：代表的是标签上、左右、下外边距（多个属性值之间用空格隔开）

在这里插入图片描述

margin:10px 20px;

代表：代表标签上下、左右外边距。（多个属性值之间用空格隔开）

在这里插入图片描述

margin:10px;

代表：代表的是上、右、下、左外边距。

在这里插入图片描述

<style type="text/css">
       *{
       	  margin:0;
       	  padding: 0;
       }
       .mr{
       	  width: 200px;
       	  height: 200px;
       	  padding: 20px;
       	  border:2px solid red;  
       	  background-color: cyan;
       	  /*外边距：四个单一样式*/
       	 margin-bottom: 50px;
       	 margin-left: 150px;
       }
       .siblings{
       	  width:200px;
       	  height: 200px;
       	  padding: 20px;
       	  border:2px solid pink;
       	  background-color: skyblue;
       }
	</style>

总结：外边距：用来设置标签与标签之间距离。

老百姓大普通话：相当于这个标签向外踹了一脚，告诉别人（别的标签）离我远点。

三、CSS书写位置

在CSS【层叠样式表】中根据书写位置不同：行内样式、内嵌样式、外链样式。

行内样式写法：

双标签、单标签。在开始标签名字后面加上一个style;
只不过style属性值比较特殊。样式名字：样式属性值；样式名字：样式属性值；

	<div style="color:red;font-size:20px">鹅鹅鹅</div>
	<div style="color:red;font-size:20px">曲项向天歌</div>
	<div style="color:red;font-size:20px">白毛浮绿水</div>
	<div style="color:red;font-size:20px">红掌拨清波</div>

行内样式在工作中使用频率不是很高？

网页中如果样式类似，行内样式需要一个标签一个标签去设置。工作量大。
标签和样式没有分离。特别是初学者，学起来比较费劲。

内嵌样式在工作中使用频率相对高一些？

工作量很小。
标签和样式进行分离。初学者学起来相对友好一些。

<style>
	     div{
	   	  color:cyan;
	   	  font-size: 30px;
	   }
</style>

1. 内嵌样式书写语法规则

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
         p{
           color:red;
           font-size: 30px;
           background-color: pink;
         }
	</style>
</head>

①　内嵌样式需要书写在style标签里面。而且style标签一般放置head标签内部。
②　style标签的type属性，可有可无。属性值text/css,纯文本CSS样式。
③　要通过选择器，选择将来要添加样式标签。
④　选择器后面紧随大花括号。不是小括号，不是中括号。
⑤　在大花括号里面书写要添加样式。（对于空格、换行、缩进不敏感）
样式名字：样式属性值；
样式名字：样式属性值；
样式名字：样式属性值；
⑥　每一个样式结束之后，在后面别忘记加上分号。

在这里插入图片描述

四、选择器*

选择器【英文】：selector

选择器：选择器是CSS（层叠样式）中一种模式，用来选择器给那些网页中的标签添加样式而已。

CSS选择器分为两种：基础选择器、高级选择器。（现在学习的是CSS2的选择器）

基础选择器：标签选择器、id选择器、类选择器、通配符选择器。（4种）

高级选择器：后代选择器、交集选择器、并集选择器。（3种）

1. 基础选择器

1.1 标签选择器

标签选择器：在CSS样式中通过标签名字，选择给那些标签添加样式。

选择器范围：网页当中同名标签都会添加样式。

<style type="text/css">
           h1{
           	  color:red;
           }
           p{
           	  color:cyan;
           	  font-size: 20px;
           }
           li{
           	  color:yellow;
           	  background-color: skyblue;
           }
</style>

标签选择器：通过标签名字，选择器网页中标签进行添加样式。不管标签嵌套层次多深，都可以选中添加样式。

在这里插入图片描述

1.2 id选择器

id选择器：

第一步：给想要添加样式标签添加一个id属性。
第二步：在内嵌样式中，通过#+id属性值进行选择匹配。

<style type="text/css">
          #box{
          	 color:red;
          	 font-size: 20px;
          	 background-color: yellow;
          }
          #box1{
          	color:cyan;
          }
          #BoX{
          	color:yellow;
          }
</style>

标签的id属性值写法：首个字符必须是英文字母，后面的属性值可以是英文字母、数字、下划线。
每一个标签的ID属性值务必唯一。（就和人的身份证是一样的，没人一个，不同）
id属性值区分（英文的）大小写。

1.3 类选择器

类选择器：

第一步：给需要添加样式标签，添加一个class属性。
第二步：在内嵌样式中，通过.+标签的class的属性值

选择范围：只要标签拥有class属性，且class属性值相同就可以选择匹配上【哪怕标签类型不同】

<style type="text/css">
	      .cur{
	      	color:red;
	      }
</style>

class属性值：首个字符务必是英文的，后面的属性值可以是数字、字母、下划线。（区分大小写）

在这里插入图片描述

class属性值可以有多个，多个之间用空格隔开。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
          .lan{
          	 color:cyan;
          }
          .fs20{
          	font-size: 50px;
          }
	</style>
</head>
<body>
	  <ol>
             <li>小明</li>
             <li class="lan fs20">小红</li>
             <li class="lan">小兰</li>
             <li>小王</li>
             <li>小李子</li>
	  </ol>
	  <p class="lan fs20">我是一个段落</p>
</body>
</html>

在这里插入图片描述

1.4 通配符选择器—了解

通配符选择器：*

作用范围：通配符选择器，选择网页中全部标签。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
            *{
            	color:red;
            	background-color: gold;
            }
	</style>
</head>
<body>
	 <h1>我是祖国的栋梁之才</h1>
	 <div>
             <p>我是一个p</p>
	 </div>
	  <div>
             <p>我是一个p</p>
	 </div>
	  <div>
             <p>我是一个p</p>
	 </div>
	 <form>
            <input type="text" value="我是默认文本"/>
	 </form>
</body>
</html>

注意：通配符不常用与设置某一个标签，它经常用来设置网页中全部标签样式。

在网页中很多的容器级别标签、文本级别标签p。都拥有内边距padding、外边距margin。
是网页外观看起来不是很好看。在这种情况下我们可以使用通配符，将这些标签的内外边距归零。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	     *{
	     	margin:0px;
	     	padding: 0px;
	     }
	     h1{
	     	background-color: red;
	     }
	     p{
	     	background-color: cyan;
	     }
	</style>
</head>
<body>
	 <h1>我是祖国的栋梁之才</h1>
	 <div>
             <p>我是一个p</p>
	 </div>
	  <div>
             <p>我是一个p</p>
	 </div>
	  <div>
             <p>我是一个p</p>
	 </div>
	 <form>
            <input type="text" value="我是默认文本"/>
	 </form>
</body>
</html>

通配符选择器：一般用于清除元素默认拥有的外边距、内边距。

2. 高级选择器

我们已经学习完了四种基础选择器：标签选择器、id选择器、类选择器、通配符选择器。

但是在实际工作当中，我们网页中标签的嵌套关系可能很复杂，用基础选择器可能实现不了选中标签添加样式，

或者用基础选择器选中标签添加样式比较复杂。

因此，由基础选择器衍生出一些高级选择器：后代选择器、交集选择器、并集选择器。

2.1 后代选择器

后代选择器使用:
如果你想给某一标签添加样式，先寻找他的祖先元素。
在书写内嵌样式的时候，从左到右一层一层寻找，直到找到要添加样式的标签。
而且需要注意，左侧的都是祖先标签的选择器，而且祖先标签的选择器之间用一个空格隔开，最右侧的这个选择器，是最终添加样式的标签选择器。

在这里插入图片描述

<style type="text/css">
         div ul li p{
         	color:red;
         }
</style>

表示：div标签的后代ul的后代li的后代全部p标签添加样式

<style type="text/css">
         div ul p {
         	color:red;
         }
</style>

表示：div标签的后代ul的后代标签全部p标签添加样式。同上

在使用后代选择器的时候，可以省略一些祖先标签的选择器。

 #list .cur  p{
        	color:green;
        	font-size: 20px;
 }

表示：带有id属性值为list的标签的后代带有class属性值为cur的后代p全部的标签添加样式。

总结：后代选择器使用

先找到要添加样式标签的祖先元素。通过在内嵌样式中一层一层的找到需要添加样式标签。
是从左到右最后一个选择器给选中标签添加样式。
祖先标签选择器之间一定要记住需要用空格隔开。
后代选择器在使用的时候，可以省略一些祖先标签的选择器。

2.2 交集选择器

交集选择器：被选中需要添加样式的标签，需要同时符合多个基础选择器而已。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        p.cur{//选中的p标签，而且身上需要有class属性，属性值为cur
        	color:green;
        }
        h2.cur{//选中的h2标签，而且身上需要有class属性，属性值为cur
        	color:red;
        }
	</style>
</head>
<body>
	 <div>
         <h2 class="cur">我是二级标题</h2>
         <p>我是小猫咪，天天就是睡觉</p>
         <p class="cur">我是小猫咪，天天就是睡觉</p>
         <p>我是小猫咪，天天就是睡觉</p>
	 </div>
</body>
</html>

交集选择器：无非是选中标签同时需要符合多个基础选择器。
交集选择器：在使用的时候一般都是标签选择器和类选择器一起使用。
交集选择器：一般情况下都是标签选择器在前，类选择器在后。
交集选择器：在使用的时候标签选择器和类选择器之间没有任何符号。
交集选择器：交集选择器可以和其他的高级选择器一起使用。

2.3 并集选择器

我们已经学习完六种选择器，但是有的时候，这六中选择器不同同时选择页面中全部情况。

因此我们可以使用并集选择器。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       h2,p {//代表给h2和p标签同时添加下面样式
       	color:green;
       	background-color: red;
       }
	</style>
</head>
<body>
	<div>
         <h2>我是祖国的老花骨朵</h2>
         <p>我是大帅哥，虽然有点丧良心</p>
         <p>我是大帅哥，虽然有点丧良心</p>
         <p>我是大帅哥，虽然有点丧良心</p>
	</div>
</body>
</html>

并集选择器，是有基础选择器之间用逗号隔开。【最后面不需要添加逗号】
并集选择器：代表的是这些选择器合并一起，共同添加一些相同样式。
并集选择器可以结合其他高级选择器一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        div h2 , div p{
        	color:red;
        	background-color: green;
        }
	</style>
</head>
<body>
	<div>
         <h2>我是祖国的老花骨朵</h2>
         <p>我是大帅哥，虽然有点丧良心</p>
         <p>我是大帅哥，虽然有点丧良心</p>
         <p>我是大帅哥，虽然有点丧良心</p>
	</div>
	<h2>我是h2标题</h2>
	<p>我也是一个段落</p>
</body>
</html>

表示：div的后代标签h2、和div后代标签p，同时设置相同样式。

在这里插入图片描述

五、CSS特性

css【层叠样式】其实它拥有两大特性（注意事项）：继承性、层叠性。

1. 继承性

继承性：有的时候，我们发现没有被选择器选中的标签，也添加上了样式。由于这个标签的祖先元素添加样式。

导致这个没有被选择器选中的标签页继承了一些样式。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	     *{
	     	margin:0px;
	     	padding: 0px;
	     }
        .box{
        	width:400px;
        	height: 250px;
        	background-color: cyan;
        	color:red;
        	font-size: 50px;
        	font-family: '楷体';
        }
	</style>
</head>
<body>
	<div class="box">
          <p>我是一个段落</p>
          <p>哈哈哈</p>
          <p>么么哒</p>
	</div>
</body>
</html>

css层叠样式中有继承特性：祖先元素的样式中（涉及到文字相关样式），后代元素可以继承。

注意：祖先元素的文字相关的样式，可以被后代元素继承。

2. 层叠性

我们已经学习完4中基础选择器、3中高级选择器，选中网页中标签添加样式。
我们已经学习完CSS继承性，没有被选择器选中标签，可以继承祖先元素的文字样式。

问题：
1.我们学习了很多选择器，如果网页中某一个标签，同时被多个选择器选中添加相同的样式。到底听那个选择器呀？

2.我们学习了继承，后代标签可以继承祖先标签的文字样式，如果后代标签的祖先元素有很多（文字样式），到底该继承谁的呀？

解决方案：层叠性

如果网页中标签同时被多个选择器选中，添加相同样式，其实CSS会通过一些手段进行对比，将最后一个选择器层叠调、覆盖调其他选择器。

2.1 标签同时被多个选择器选中，添加相同样式。

解决方案：层叠性。

在CSS中权重高的选择器，会层叠掉权重低的选择器。

基础选择器：

在基础选择器中，根据选择器选择范围大小，划分权重，选择器选择范围越小，权重越高。

id选择器权重>类选择器权重>标签选择器权重>通配符选择器权重

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        *{
        	color:red;
        }
        p{
        	color:orange;
        }
        #box{
        	color:pink;
        }
        .cur{
        	color:purple;
        }
	</style>
</head>
<body>
	  <p id="box" class="cur">我是祖国的老花骨朵</p>
</body>
</html>

如果一个标签被多个选择器选中添加相同的样式，样式属性值不是‘混合物’。
根据选择器权重高低进行层叠、覆盖，权重高的层叠、覆盖权重低的选择器。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       #box p{
       	  color:red;
       }
       #box #box1 p{
         color:orange;
       }
       #box #box1 #box2 p{
       	color:green;
       }
	</style>
</head>
<body>
	 <div id="box" class="box">
          <div id="box1" class="box1">
              <div id="box2" class="box2">
                      <p>我爱你我的祖国</p>
               </div>
          </div>
	 </div>
</body>
</html>

如果是高级选择器，某一个标签同时被多个选择器选中。

层叠依据是:

对比：id选择器个数=>类选择器个数=>标签选择器个数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        p{
        	color:yellow;
        }
        #box p{
        	color:red;
        }
        .box .box1 .box2{
        	color:green;
        }
	</style>
</head>
<body>
	 <div id="box" class="box">
          <div id="box1" class="box1">
              <div id="box2" class="box2">
                      <p>我爱你我的祖国</p>
               </div>
          </div>
	 </div>
</body>
</html>

层叠依据是：

如果高级选择器中id选择器个数、类选择器个数、标签选择器个数一样的。

后者覆盖前者。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        #box p{
        	color:red;
        }
        #box2 p{
        	color:skyblue;
        }
	</style>
</head>
<body>
	 <div id="box" class="box">
          <div id="box1" class="box1">
              <div id="box2" class="box2">
                      <p>我爱你我的祖国</p>
               </div>
          </div>
	 </div>
</body>
</html>

2.2 标签没有被选择器选中，继承祖先元素的文字样式

后代元素可以继承祖先元素的文字样式：就近原则。（不用看选择器权重）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       #box{
       	  color:red;
       	  font-size: 12px;
       }
       #box .box1{
       	color: orange;
       	font-size: 20px;
       }
       .box .box1 .box2{
          color:green;
       	  font-size: 40px;
       }
	</style>
</head>
<body>
      <div id="box" class="box">
           <div id="box1" class="box1">
                <div id="box2" class="box2">
                        <p>我是你们大佬的后代p标签</p>
                </div>
           </div>
      </div>
</body>
</html>

后代标签继承祖先元素的文字样式，选择器选择的都是就近的（比选择器权重）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       #box .box1 .box2{
       	 color:red;
       	 font-size: 20px;
       }
       #box .box1 #box2{
       	color: yellow;
       	font-size: 30px;
       }
       #box #box1 #box2{
       	color:pink;
       	font-size: 50px;
       }
	</style>
</head>
<body>
      <div id="box" class="box">
           <div id="box1" class="box1">
                <div id="box2" class="box2">
                        <p>我是你们大佬的后代p标签</p>
                </div>
           </div>
      </div>
</body>
</html>

后代标签继承祖先元素文字样式，权重是一样的（后者覆盖前者）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       #box .box1 #box2{
         color:red;
         font-size: 40px;
       }
       #box #box1 .box2{
       	color: orange;
       	font-size: 60px;
       }
	</style>
</head>
<body>
      <div id="box" class="box">
           <div id="box1" class="box1">
                <div id="box2" class="box2">
                        <p>我是你们大佬的后代p标签</p>
                </div>
           </div>
      </div>
</body>
</html>

IT阳晨。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Web】CSS学习笔记

CSS英文全称【cascading style sheet】：层叠样式表。作用：CSS用于美化网页、还可以进行网页布局。前端三层是什么呀？答案：前端分为三层：HTML（结构层）、CSS（样式层）、JavaScript（行为层）。总结：CSS，前端人当中称之为样式层，可以对网页进行美化。比如：文字设置颜色、文字设置大小、设置文字字体。可以进行网页页面布局。CSS【层叠样式表，简称样式】：根据在网页书写位置不同。分为三种：行内样式、内嵌样式、外链样式。注意：我们刚开始学习的是行内样式写法。任意标签【容器、
复制链接

扫一扫