【CSS】第一天基础选择器与文字控制属性

【CSS】第一天

1. CSS定义
2. css引入方式
- 2.1 内部样式
- 2.2 外部样式
- 2.3 行内样式
3. 选择器
- 3.1 标签选择器
- 3.2 类选择器
- 3.3 id选择器
- 3.4 通配符选择器

1. CSS定义

层叠样式表(CSS)是一种样式表语言，用来描述HTML文档的呈现(美化内容)。
书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>h1{color: red;font-size: 30px;}</style>
</head>
<body><h1>哈哈哈</h1>
</body>
</html>

在这里插入图片描述

2. css引入方式

内部样式表：CSS代码写在style标签里面
外部样式表
行内样式

2.1 内部样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>h1{color: red;font-size: 30px;}</style>
</head>
<body><h1>哈哈哈</h1>
</body>
</html>

在这里插入图片描述

2.2 外部样式

CSS代码写在单独的CSS文件当中(.css)
在HTML使用link标签引入

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" href="./my.css">
</head>
<body><h1>哈哈哈</h1>
</body>
</html>

/* 这个文件放css代码 */
h1{color: red;font-size: 30px;
}

在这里插入图片描述

2.3 行内样式

CSS写在标签的style属性值里

<div style="color:red; font-size:20px">新年快乐</div>

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" href="./my.css">
</head>
<body><h1>哈哈哈</h1><div style="color:red; font-size:20px">新年快乐</div>
</body>
</html>

在这里插入图片描述

3. 选择器

基础选择器：

标签选择器
类选择器
id选择器
通配符选择器

3.1 标签选择器

使用标签名作为选择器，选中同名标签设置相同样式。
例如:p,h1,div,a,img......

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>h1{color: red;font-size: 30px;}</style>
</head>
<body><h1>哈哈哈</h1>
</body>
</html>

3.2 类选择器

作用：查找标签，差异化设置标签的显示效果。
步骤：

定义类选择器 -> .类名
使用类选择器->标签添加 class="类名"

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>.red{color: blue;}</style>
</head>
<body><div class="red">类选择器</div>
</body>
</html>

在这里插入图片描述

3.3 id选择器

作用：查找标签，差异化设置标签的显示效果。
场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式。

步骤：

定义id选择器-> #id名
使用id选择器 ->标签添加id="id名"

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>#red{color: blue;}</style>
</head>
<body><div id="red">类选择器</div>
</body>
</html>

3.4 通配符选择器

作用：查找页面所有标签，设置相同样式。
通配符选择器：*，不需要调用，浏览器自助查找页面所有标签，设置相同的样式。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>* {color: blue;}</style>
</head>
<body><p>p 标签</p><div>div标签</div><h1>h1</h1><div>类选择器123123</div>
</body>
</html>