【CSS】一、基础选择器
文章目录
- 1、CSS
- 2、CSS的引入方式
- 3、选择器
- 3.1 标签选择器
- 3.2 类选择器
- 3.3 id选择器
- 3.4 通配符选择器
- 4、练习：画盒子
1、CSS
CSS，Cascading Style Sheets，层叠样式表，是一种样式表语言，用于表述HTML的呈现，做美化的
上面是最简单的一种写法，title标签下方写style标签（因为CSS是给浏览器看的，是浏览器渲染给你看，所以放html的head里），style标签中写CSS代码，先定义一个选择器，里面key-value写CSS的属性，效果：
2、CSS的引入方式
三种引入方式：
方式一：内部样式表：
- CSS代码写在style标签里面
<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标签引入
<!--rel，即关系，是一个样式表，href即文件地址-->
<link rel="stylesheet" href="./my.css">
效果：
方式三：行内样式：
- 配合JavaScript使用
- CSS写在标签自己的style属性中
<div style="color: green; font-size:30px;">这是 div 标签</div>
3、选择器
要美化HTML，就要先找到对应的标签，选择器就是用来查找对应的标签，并给它设置样式，基础的选择器有四种：
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
3.1 标签选择器
使用标签名作为选择器 → 选中同名标签设置相同的样式，如p, h1, div, a, img…
<style>
p {
color: red;
}
</style>
缺点：同名标签的显示效果只能一样，即不能差异化
3.2 类选择器
用于查找标签，差异化设置标签的显示效果：
- 定义类选择器 →
.类名 - 使用类选择器 → 标签添加
class="类名"
注意：
- 类名自定义，不要用纯数字或中文，尽量用英文命名，见名知意，多个单词用-连接，如news-hd
一个类选择器可以供多个标签使用- 一个标签可以
使用多个类名，类名之间用空格隔开
3.3 id选择器
用于查找标签，差异化设置标签的显示效果，这和类选择器一样，但id选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式：
- 定义id选择器→
#id名 - 使用 id 选择器 → 标签添加
id= "id名"
另外，和类选择器不同的是，同一个id选择器，在一个页面只能使用一次
3.4 通配符选择器
用于查找页面所有标签，设置相同样式，使用上：
*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
*{
color: red;
}
- 可以用于清除标签的默认样式，比如，h和p标签之间，或者两个p标签之间自带的默认边距
4、练习：画盒子
使用合适的选择器画出：
新属性：
<!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>
效果：
