文章目录
- 1、CSS
- 2、CSS的引入方式
- 3、选择器
-
- [3.1 标签选择器](#3.1 标签选择器)
- [3.2 类选择器](#3.2 类选择器)
- [3.3 id选择器](#3.3 id选择器)
- [3.4 通配符选择器](#3.4 通配符选择器)
- 4、练习:画盒子

1、CSS
CSS,Cascading Style Sheets,层叠样式表,是一种样式表语言,用于表述HTML的呈现,做美化的

上面是最简单的一种写法,title标签下方写style标签(因为CSS是给浏览器看的,是浏览器渲染给你看,所以放html的head里),style标签
中写CSS代码,先定义一个选择器,里面key-value写CSS的属性,效果:


2、CSS的引入方式
三种引入方式:
方式一:内部样式表:
- CSS代码写在style标签里面
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS初体验</title>
<style>
p {
color: red;
font-size: 30px;
}
</style>
</head>
方式二:外部样式表:
- CSS代码写在单独的CSS文件中(.css)
- 在HTML文件中使用link标签引入
html
<!--rel,即关系,是一个样式表,href即文件地址-->
<link rel="stylesheet" href="./my.css">
效果:

方式三:行内样式:
- 配合JavaScript使用
- CSS写在标签自己的style属性中
html
<div style="color: green; font-size:30px;">这是 div 标签</div>

3、选择器
要美化HTML,就要先找到对应的标签,选择器就是用来查找对应的标签 ,并给它设置样式,基础的选择器有四种:
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
3.1 标签选择器
使用标签名作为选择器 → 选中同名标签设置相同的样式,如p, h1, div, a, img...
html
<style>
p {
color: red;
}
</style>
缺点:同名标签的显示效果只能一样,即不能差异化
3.2 类选择器
用于查找标签,差异化设置标签的显示效果:
- 定义类选择器 →
.类名
- 使用类选择器 → 标签添加
class="类名"

注意:
- 类名自定义,不要用纯数字或中文,尽量用英文命名,见名知意,多个单词用-连接,如news-hd
一个
类选择器可以供多个
标签使用- 一个标签可以
使用多个类名
,类名之间用空格隔开
3.3 id选择器
用于查找标签,差异化设置标签的显示效果,这和类选择器一样,但id选择器一般配合 JavaScript 使用,很少用来设置 CSS 样式:
- 定义id选择器→
#id名
- 使用 id 选择器 → 标签添加
id= "id名"

另外,和类选择器不同的是,同一个id选择器,在一个页面只能使用一次
3.4 通配符选择器
用于查找页面所有标签,设置相同样式,使用上:
*,不需要调用
,浏览器自动查找页面所有标签,设置相同的样式
html
*{
color: red;
}
- 可以用于清除标签的默认样式,比如,h和p标签之间,或者两个p标签之间自带的默认边距

4、练习:画盒子
使用合适的选择器画出:

新属性:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
background-color: red;
width: 100px;
height: 100px;
}
.div2 {
background-color: yellow;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
效果: