CSS基础—>四个基础选择器

最新推荐文章于 2023-11-02 13:42:37 发布

hsvenus

最新推荐文章于 2023-11-02 13:42:37 发布

阅读量503

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44754740/article/details/105711392

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS

简介
CSS语法规范
CSS代码风格
CSS基础选择器
总结

刚简单的学完HTML5这就屁颠屁颠的跑进了CSS的场地，嘻嘻

简介

CSS网页的美容师主要使用场景就是美化网页，布局页面的
CSS是层叠样式表(Cascading Style Sheets)的简称
CSS也是一种标记语言
CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形(高宽、边框样式、边距等)以及版面布局和外貌显示样式
CSS让我们的网页更加丰富多彩，布局更加灵活自如，简单理解：CSS可以没换HTML，让HTML具有较高的观赏性，让网页的布局更简单

为什么不用HTML直接布局？？？

HTML的局限性
HTML只关注网页页面的内容语义，比如<h1>标明这是一个大标题，<p>表明这是一个段落,<img>表明这有一个图片，<a>表示这有一个链接
HTML可以做一些简单的样式，但是带来的是代码无尽的繁琐和臃肿
CSS最大的价值就是由HTML专注的去做结构呈现，样式交给CSS，即结构(HTML)与样式(css)相分离

CSS语法规范

使用HTML时，需要尊从一定的规范，CSS也是一样，要想熟练的使用CSS对网页进行修改，首先需要了解CSS样式规则
CSS规则由两个主要的部分组成 选择器以及一条以上的声明
选择器适用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值是以键值对的形式出现
属性是对指定的对象设置的样式，例如字体大小、文本颜色等
属性和属性值之间用英文符号:分开
多个键值对之间用英文符号;进行区分开
CSS标记语言要写到HTML文本的head语言当中并且要写到<style></style>标签里

CSS代码风格

最好规范
规范 —>略。。。。

CSS基础选择器

CSS选择器的作用

选择器（选择符）就是根据不同需求把不同的标签筛选出来这就是选择器的作用：就是筛选标签用的

选择器的分类

两大分类

基础选择器
复合选择器

基础选择器

是有单个选择器构成的

标签选择器
类选择器
id选择器
通配符选择器

标签选择器

作用：标签选择器可以吧某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签
优点
能快速的为页面中同类型的标签同一设置样式
缺点
不能设计异化样式，只能选择全部的当前标签要改就全改

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_day(1)</title>
	<style>
		/*		所有的p标签*/
		p {
			color: #15B31F;
			font: 20px;
		}
		/*		所有的div标签*/
		div {
			color: #F20062;
			font: 20px;
		}
	</style>
</head>

<body>
	
	<p>男生</p>
	<p>男生</p>
	<p>男生</p>
	
	<div>女生</div>
	<div>女生</div>
	<div>女生</div>
	
</body>
</html>

效果

在这里插入图片描述

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签可以使用类选择器
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点.号显示

语法

结构需要用class属性来调用
class类

注意

类选择器都使用.进行标识，后面的紧跟类名（自定义，我们自己命名的）可以理解为给这个标签都起一个名字，来表示
长名字或词组可以使用中横线来为选择器命名
不要使用纯数字，中文等命名，尽量使用英文字母来表示
命名要有意义、尽量是别人一眼就能看懂这个类名的目的
命名要规范请参考CSS命名规范

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_day(1)</title>
	<style>
/*		类选择器*/
		.rad {
			color: #920D0F;
			font: 200px;
		}
		.blue {
			color: #0B1599;
			font: 200px;
		}
		.green {
			color: #316600;
			font: 200px;
		}
	</style>
</head>

<body>
<!--	调用类选择器green-->
	<p class="green">男生</p>
<!--	调用类选择器blue-->
	<p class="blue">男生</p>
	<p>男生</p>
<!--	调用类选择器rad-->
	<div class="rad">女生</div>
<!--调用类选择器blue-->
	<div class="blue">女生</div>
	<div>女生</div>
	
</body>
</html>

效果

在这里插入图片描述

类选择器里面还有一个多类名
就是一个便签可以调用多个类选择器从而达到了更多的选择，也相当一部分减少了代码的重复增加了代码的灵活性
class="类名1 类名2 ... ... ... "各类名之间用空格隔开

id选择器

id选择器可以为标有特定id的HTMl元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中的id选择器以#来定义

语法

#id名 {
	属性: 属性值;
	...  ...
}

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

类选择器（class）好比人的名字，一个人可以有很多个名字，同时一个名字也可以被很多个人使用
id选择器好比人的身份证号码一样，每个身份证号码在全国是唯一的，不能重复
id选择器和类选择器最大的不同在于使用的次数上
类选择器在修改样式中用的很多，id选择器一般用于页面唯一的元素上，经常和JavaScript搭配使用

通配符选择器

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

语法

* {
	属性: 属性值;
	...  ...
}

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况下才使用

总结

基础选择器	作用	特点	使用情况
标签选择器	可以选出所有相同的标签，比如p标签	不能差异化选择	较多
类选择器	可以选出1个或多个标签	可以根据需求选择	非常多
id选择器	一次只能选一个标签	id属性只能在每个HTML文档中出现一次	一般和js搭配
通配符选择器	选择所有的标签	选择大多数、有部分不需要	特殊情况下使用

hsvenus

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础—>四个基础选择器

CSS简介CSS语法规范CSS代码风格CSS基础选择器CSS选择器的作用选择器的分类标签选择器代码效果类选择器刚简单的学完HTML5这就屁颠屁颠的跑进了CSS的场地，嘻嘻简介CSS网页的美容师主要使用场景就是美化网页，布局页面的CSS是层叠样式表(Cascading Style Sheets)的简称CSS也是一种标记语言CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式...
复制链接

扫一扫