CSS基础选择器及基础知识

良风抚旧

已于 2022-01-27 18:46:22 修改

阅读量329

点赞数

分类专栏：前端文章标签： css css3 前端

于 2022-01-18 15:27:24 首次发布

本文链接：https://blog.csdn.net/Arcofcosmos/article/details/122561105

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

</html>
<!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>
    	
    </style>
</head>
<body>
    
</body>
</html>

在内部样式表中CSS标签写在<head>之间的<style>标签之中。

结构为：选择器 { color:red; font-size:29px; }

选择器为指定的HTML标签，花括号中为该对象设置的具体样式。

选择器

基础选择器

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

标签选择器

直接选择某一类标签名为选择器，将该类标签全部切换样式。

<style>
	<p> {
		color: red;
	}
</style>

类选择器

单独选一个或者几个标签，差异化选择。

<style>
	.类名 {
		color: red;
	}
</style>
<body>
	<p class = "类名">
	
	</p>
</body>

类名自定义，但是不能为标签名。类名不要使用纯数字与中文，可添加横线。

每个标签可以不止一个类名，每个类名都可以被调用。多个类名必须要用空格隔开。提高了泛用性。

class = "name1 name2"

id选择器

以id属性设置id选择器。

<style>
	#id名 {
		color: red;
	}
</style>
<body>
	<p id = "id名">
		...
	</p>
</body>

使用方法类似于类选择器，区别在于id只能被用一次，每个标签的id不能重复。

一般用于页面中惟一的元素上。

通配符选择器

通配符选择器以"*"定义，表示选择页面所有元素标签。

* {
	color: red;
}

CSS的引入方式

内部样式表

将所有样式写入style标签内，style标签可以写在html文档中的任何地方，但是通常写在head标签内。

行内样式表（内联样式表）

直接在元素标签中设定style样式，适合修改简单样式。

<div style = "color: red; font-size: 12px;">文本</div>

style为属性，必须使用双引号。

外部样式表

适合样式比较多情况，单独写到css文件中，再引入css文件到html页面。开发最常用。

新建.css文件。
在html页面中采用link标签引入css文件

<link rel="stylesheet" href="样式表路径">

link标签放在head标签之中。

良风抚旧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础选择器及基础知识

</html><!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"> &.
复制链接

扫一扫