HTML5 - CSS基础介绍、四种CSS选择器比较与细节整理

鬼鬼骑士

于 2022-01-25 18:12:31 发布

阅读量477

点赞数

分类专栏：笔记成长阶段文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_39123467/article/details/122690037

版权

笔记同时被 2 个专栏收录

324 篇文章 9 订阅

订阅专栏

成长阶段

272 篇文章 4 订阅

订阅专栏

CSS简介

CSS的主要使用场景就是美化网页，布局页面的

HTML的局限性
CSS-网页的美容师

HTML的局限性

HTML它只关注内容的语义。比如"h1"表明这是一个大标题，"p"表明这是一个段落

很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑

虽然HTML可以做简单的样式，但是带来的是无尽的“臃肿和繁琐…”

CSS-网页的美容师

CSS是层叠样式表（Cascading Style Sheets）的简称

有时我们也称之为CSS样式表或级联样式表

CSS也是一种标记语言

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式

总结

HTML主要做结构，显示元素内容
CSS美化HTML，布局网页
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离

CSS语法规范

使用HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则

CSS规则由两个主要的部分构成：选择器以及一条或多条声明

请添加图片描述

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“：”分开
多个“键值对”之间用英文“；”进行区分

CSS代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式

1.样式格式书写

紧凑格式

h3{color: red;font-size: 20px;}

展开格式

h3{
	color: red;
	font-size: 20px;
}

推荐展开式

2.样式大小写风格

h3 {
	color: red;
}

H3 {
	COLOR: RED;
}

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外

3.样式空格风格

h3 {
	color: red;
}

请添加图片描述

属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格

CSS基础选择器

CSS选择器的作用

<div>我是div</div>
<div>我是div</div>
<p>
    我是段落
</p>
<ul>
    <li>我是ul里面小li</li>
</ul>

<ol>
	<li>我是ol里面小li</li>
</ol>

我想把div里面的文字改为红色？
我想把第一个div里面的文字改为红色？
我想把ul里面的li文字改为红色？

选择器（选择符）就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是标签用的

以上CSS做了两件事：

找到所有的h1标签。选择器（选对人）
设置这些标签的样式，比如颜色为红色（做对事）。

选择器分类

选择器分为基础选择器和复合选择器两大类，我们这里先讲解一下基础选择器。

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

1.标签选择器

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

语法

标签名 {
	属性1：属性值1;
	属性2：属性值2；
}

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			p {
				color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
		<p class="message">111</p>
	</body>

作用

标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签

优点

能快速为页面中同类型的标签统一设置样式

缺点

不能设计差异化样式，只能选择全部的当前标签

2.类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

语法

.类名 {
	属性1：属性值1；
	...
}

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			.message {
				color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
		<p class="message">111</p>
	</body>

口诀

样式点定义
结构类（class）调用
一个或多个
开发最常用

注意

不能用点“标签”形式

error

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			.p {
				color: red;
			}

		</style>
	</head>
	<body>
		<div></div>
		<p>111</p>
	</body>

长名称或词组可以使用中横线来为选择器命名
不要使用纯数字，中文等命名，尽量使用英文字母来表示

类选择器规则命名

 头：header
 容器：container 
 内容：content 
 尾：footer
 导航：nav 
 侧栏：sidebar 
 栏目：column
 页面外围控制整体佈局宽度：wrapper
 左右中：left right center 
 登录条：loginbar
 标志：logo 
 广告：banner
 页面主体：main
 热点：hot
 新闻：news 
 下载：download
 子导航：subnav
 菜单：menu 
 子菜单：submenu 
 搜索：search
 友情链接：friendlink 
 页脚：footer 
 版权：copyright 
 滚动：scroll
 内容：content 
 标签：tags 
 文章列表：list 
 提示信息：msg
 小技巧：tips
 栏目标题：title
 加入：joinus 
 指南：guide
 服务：service 
 注册：regsiter
 状态：status 
 投票：vote
 合作伙伴：partner

应用多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签

简单理解就是一个标签有多个名字

使用语法

.red{
	color: red;
}
.font{
	font-size: 20px;
}
<div class="red font"></div>

个各类名中间用空格隔开
简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字
多类名选择器在后期布局比较复杂的情况下，还是较多使用的

3.id选择器

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

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

语法

#id名 {
	属性1： 属性值1；
	...
}

例如

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			#q {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="q">ffsadfdasfasdf</div>
	</body>

id与类选择器区别

id属性只能在每个HTML文档中出现一次。口诀：样式#定义，结构id调用，

只能调用一次，别人切勿使用

id选择器好比人的身份证号码，全中国是唯一的，不得重复
id选择器和类选择器最大的不同在于使用次数上
id选择器和类选择器最大的不同在于使用次数上
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

4.通配符选择器(*)

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

语法

* {
	属性1：属性值1；
	...
}

例如

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			* {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="q">ffsadfdasfasdf</div>
		<p>ssfsdaf</p>
	</body>
</html>

注意

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况下使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距，后期讲）

* {
	margin: 0;
	padding: 0;
}

选择器总结表格

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