初学CSS的基础知识点笔记-01

柯cute

已于 2022-04-12 22:43:50 修改

阅读量1.4k

点赞数 1

分类专栏：前端学习-CSS 文章标签： css3

于 2022-04-11 16:21:13 首次发布

本文链接：https://blog.csdn.net/weixin_45999422/article/details/124099195

版权

本文详细介绍了CSS的基础知识，包括CSS是什么、引用方式、基础选择器、字体和文本样式、选择器进阶、背景颜色以及元素显示模式。重点讲解了内嵌式、外联式和行内式CSS的使用，标签选择器、类选择器、id选择器和通配符选择器的概念，以及字体大小、颜色和行高的设置。此外，还涵盖了背景颜色、背景图片和元素显示模式转换等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

本篇介绍了CSS的基础内容。

一、CSS是什么？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、css引用方式

1.内嵌式

内嵌式：CSS写在style标签中（提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中）
作用范围：当前页面
使用场景：小案例

2.外联式

外联式：CSS写在一个单独的.css文件中（提示：需要通过link标签在网页中引入）
作用范围：多个页面
使用场景：项目中

3.行内式

行内式：CSS写在标签的style属性中（提示：之后会配合js使用）
作用范围：当前标签
使用场景：配合js使用

二、基础选择器

1.标签选择器

结构：标签名{css属性名：属性值;}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
·标签选择器选择的是一类标签，而不是单独某一个
·标签选择器无论嵌套关系有多深，都能找到对应的标签

2.类选择器

结构：.类名{css属性名：属性值;}
作用：通过类名，找到页面中所有带这个类名的标签，设置样式
注意点：
·所有标签上都有class属性，class属性的属性值称为类名
·类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
·一个标签可以同时有多个类名，类名之间以空格隔开
·类名可以重复，一个类选择器可以同时选中多个标签

<head> 
<title>Document</title>
.one{
color:"red";
}
</head>
<body>
<p class="one">这是一段</p>
</body>

3.id选择器

结构：#id属性值{css属性名：属性值;}
作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
·所有标签上都有id属性
·id属性值类似于身份证号码，在一个页面中是惟一的，不可重复的
·一个标签上只有一个id属性值
·一个选择器只能选中一个标签

<head> 
<title>Document</title>
#two{
color:"red";
}
</head>
<body>
<div id=

最低0.47元/天解锁文章