css三大选择器，及样式，看完秒懂

最新推荐文章于 2024-04-26 16:47:03 发布

花自向阳开589

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.7k

点赞数 1

分类专栏：笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_63215199/article/details/123947209

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是css

Css是(Cascading Style sheet) 级联(层叠)样式表

理解为:css是对网页标签进行修饰

Css的优势

内容(html)与表现(css)分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎
在网页中添加css的方法
行内样式:使用标签的style属性设置样式
<标签 style=”一系列的样式规则”>

样式规则: 样式属性:样式属性值;

示例:控制内容的颜色为红色，字体为18px

<p style="color:#F00; font-size:18px">我会使用css啦</p>
内部样式:使用style标签添加样式
<style type="text/css">

/*一系列的选择器(选择器必需先定义，后引用)*/

</style>

注意:style标签一般放在head标签中
1. 基本选择器分类:
类选择器、ID选择器、标签选择器

注意:选择器的使用规则:先定义选择器，再引用选择器
1. 使用类选择器
定义类选择器
使用标签的class属性引用类选择器名即可
1. 使用ID选择器
定义ID选择器
使用标签的ID属性引用ID选择器名即可
1. 使用标签选择器
定义标签选择器
使用标签选择器，当使用该标签时，会自动套用样式
使用内部样式实例

 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
  /*定义一系列的样式选择器(选择器必需先定义，后引用)*/
  /*
    1.使用类选择器
	定义:
	.类选择器名称{一系列的样式规则}
	引用:
	使用标签的class属性引用类选择器名即可
  */
  .cname{ color:red; font-size:24px;}
  
  /*
    2.使用id选择器
	定义:
	#id选择器名称{一系列的样式规则}
	引用:
	使用标签的id属性引用id选择器名称即可
  */
   #idname{ color:green; font-size:24px;}
   
   /*
    3.使用标签选择器
	定义：
	标签名称{一系列的样式规则}
	引用标签选择器:
	当使用该标签时会自动套用样式
   */
   h1{ color:#00F; font-size:50px;} 
</style>
</head>

<body>
<p class="cname">我会使用内部样式</p>
<p class="cname">我会使用内部样式的类选择器</p>
<p id="idname">我会使用内部样式的id选择器</p>
<h1>我会使用标签选择器</h1>
</body>

外部样式:
所谓外部样式就是将内部样式定义在外部样式文件中(样式文件扩展为:.css).
1. 在网页中使用link标签引用外部样式文件
<link href="样式文件的路径" type="text/css" rel="stylesheet" />

示例:

<link href="css/index.css" type="text/css" rel="stylesheet" />
(理解)样式选择器的优先级
ID选择器 > 类选择器 > 标签选择器

行类样式 > 内部样式 > 外部样式
扩展高级选择器(复合选择器)
交集选择器
定义交集选择器
标签选择器类选择器|ID选择器{一系列样式规则}
引用交集选择器:
使用该标签的同时，还引用类或者id选择器
并集选择器
定义并集选择器
选择器1,选择器2...{一系列样式规则}
引用并集选择器:
使用以上任何一种选择器都行

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
   /*
     1.交集选择器
	 定义：
	 标签选择器类选择器|id选择器{一系列的样式规则}
	 引用:
	 使用该标签的同时引用了类选择器或者id选择才会引用样式
   */
    h1.cname{ color:red; font-size:24px;}
	
	/*
	 2. 并集选择器：定义多个选择器声明为同一效果
	 定义
	 选择器1,选择器2{一系列样式规则}
	 引用
	 使用任何一个选择器即可
	*/
	#idname,.one{ color:#6F0; font-size:24px;}
</style>
</head>
<body>
  <h1 class="cname">我会使用交集选择器</h1>
  <p id="idname">我要使用并集选持器</p>
  <p class="one">我要使用并集选持器</p>
</body>

高级选择器的层次选择器
理解标签的层次：

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
使用层次后代选择器
定义层次后代选择器
选择器1 选择器2{一系列样式规}
引用层次后代选择器:
先使用选择器1，再使用选择器2.且选择器1与选择器2存在层次关系.

#idname li{ color:red; font-size:24px;}
使用层次子选择器
定义层次子选择器
选择器1>选择器2{一系列样式规}
引用层次后代选择器:
先使用选择器1，再使用选择器2.且选择器1与选择器2存在父子关系.

#idname>li{ color:red; font-size:24px;}
（了解）使用层次相邻兄弟选择器
a.定义相邻兄弟选择器

选择器1+选择器2{一系列样式规则}

b.引用相邻兄弟选择器:

先使用选择器1，再使用选择器2.且选择器1与选择器2存在同级关系(相邻的之后).

.one+.two{ color:red; font-size:34px;}
（了解）使用层次通用兄弟选择器
a.定义层次通用兄弟选择器

选择器1~选择器2{一系列样式规}

b.引用层次通用兄弟选择器:

先使用选择器1，再使用选择器2.且选择器1与选择器2存在同级关系(相邻的之后所有).

.one~.two{ color:red; font-size:24px;}

常用的样式属性:

Color 表示颜色

Font-size 表示字体大小
加油，坚持努力