【CSS】一、基础选择器

文章目录

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>

效果：