当前位置：首页 > news >正文

CSS基础选择器、文本属性、引入方式及Chorme调试工具

news 2025/7/10 14:00:53

CSS基础

1.1 CSS简介

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。

总结:

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

1.1.1 CSS的语法规范

使用HTML时，需要遵从一定的语法规范，CSS也是如此。CSS规则由两个主要的部分构成：选择器以及一条或者多条声明

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

所有的样式，都包含在

1.1.2 CSS代码风格

1.样式格式书写

2.样式大小写风格

3.样式空格风格

1.2 CSS基础选择器

1.2.1 标签选择器

书写步骤

在标签标签的上面写上style标签
在

1.2.2 类选择器

在我们使用标签选择器的时候发现一个问题就是使用标签选择器能把改标签的样式全部改变，但是我们如果想把该标签的某一个元素改变样式呢？这时候我们该怎么做呢？这时候我们就要用到类选择器

1.注意事项

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
可以理解为给这个标签起了一个名字，来表示。
长名称或词组可以使用中横线来为选择器命名。
不要使用纯数字、中文等命名，尽量使用英文字母来表示。
命名要有意义，尽量使别人一眼就知道这个类名的目的

1. 给改该标签一个class

2.样式用点定义

3.代码示例

    <style>/* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/.red {color: red;}.star-sing {color: green;}.memeda {  color: pink;}.pink {color: pink;}</style>
</head>
<body><ul><li class="red">冰雨</li><li class="red">来生缘</li><li>李香兰</li><li class="memeda">生僻字</li><li class="star-sing">江南style</li></ul><div class="red">我也想变红色</div><div class="pink">我想要变成粉色</div>
</body>

4.效果展示

1.2.3 多类名选择器

1.多类名的使用方式

2.多类名的使用优点

可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
这些标签都可以调用这个公共的类,然后再调用自己独有的类.
从而节省CSS代码,统一修改也非常方便.

3.多类名的使用案例

代码

 <style>.red {color: red;}.box {width: 100;font-size: 35px;}.pink {color: pink;}</style>
</head>
<body><!-- 多类名使用方式1.在标签class属性中写多个类名2.多个类名中间必须用空格分开 --><div class="box red ">刘德华</div>
<div class="box red ">公孙离</div>
<div class="box red ">西施</div>
<div class="box pink">公孙离</div></body>

效果图

1.2.4 id选择器

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

1.语法

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

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

3.代码示例

style>/*id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用*/#pink {
color: pink;}
</style>
</head>
<body><div id="pink">迈克尔.杰克逊</div>
</body>

1.2.5 通配符*

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

1. 语法

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

2.使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符选择器</title><style>* {color: pink;}/* *这里*号把所有标签html body div span li 等等的标签都改为了红色 */</style>
</head>
<body><div>我的</div><span>我的</span><ui><li>还是我的</li></ui>
</body>
</html>

4.选择器总结

1.3 CSS文本属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

1.3.1 字体系列

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

1. 代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>font-famlity的使用</title><style>.kaiti {font-family: "微软雅黑";}.weiruanyahei {font-family: 'Times New Roman', Arial, Helvetica, sans-serif;}p {font-family: "宋体";}</style>
</head>
<body><h4>字体的使用</h1><p class="kaiti">哈哈哈哈</p><p class="weiruanyahei">我的小猫暴脾气</p>
</body></html>

2.效果展示

1.3.2 字体大小

px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小