Cascading style sheets

1.语法规则

  1. 选择器 {
  2.     属性名: 属性值
  3. }

lipboardErrorCopied

2.书写位置

  1. <head>
  2.     <title></title>
  4.     <style>
  5.         /* 这里写css */
  6.     </style>
  7. <head>

y to clipboardErrorCopied

3.CSS 引入方式

引入方式 书写位置 作用范围 使用场景
内嵌式 style 标签 当前页面 小案例
外链式 link 标签引入单独 css 文件 多个页面 项目中
行内式 标签 style 属性中 当前标签 配合 js 使用

（1）内嵌式

  • CSS 写在 style 标签中
  • style 标签可以写在页面任意位置，一般放在 head 标签中 ```html <!DOCTYPE html>

这是一段设置了css样式的文字

y to clipboardErrorCopied![image.png](https://cdn.nlark.com/yuque/0/2022/png/25488431/1648456544508-8e0c4d74-27f9-44cc-9bdc-ac9a1f293bdf.png#clientId=ufca6b209-53a3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=100&id=uba7fc68d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=100&originWidth=600&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7874&status=done&style=none&taskId=u3e00844b-74be-4478-a1fa-0b8505d6ce4&title=&width=600)
<a name="suFk6"></a>
### （2）外链式

- CSS 写在单独的.css文件中
- 通过 link 标签引入到网页中
```css
/* css-2.css */

p {
  color: red;
}

py to clipbo

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet"
          href="./css-2.css">
</head>

<body>
    <p>这是一段设置了css样式的文字</p>
</body>

</html>

arimage.pngdErrorCopied

（3）行内式

  • CSS 写在标签 style 属性中

    <div style="color: green; background-color: #f1f1f1;">
这是一段设置了css样式的文字
</div>

    o clipboardErrorCopied
    这是一段设置了css样式的文字

    4.基础选择器

  • 标签选择器

  • 类选择器
  • id 选择器
  • 通配符选择器

    （1）标签选择器

    标签名 { 属性名：属性值; }Copy to clipboardErrorCopied
    标签名 {
  属性名：属性值;
}
    o clipboardErrorC ```html

你好，世界

opied![image.png](https://cdn.nlark.com/yuque/0/2022/png/25488431/1648456692466-b0d3ca5a-3e15-4cb1-a640-cf3cded15663.png#clientId=ufca6b209-53a3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=41&id=udf5b2bee&margin=%5Bobject%20Object%5D&name=image.png&originHeight=41&originWidth=116&originalType=binary&ratio=1&rotation=0&showTitle=false&size=969&status=done&style=none&taskId=ubdabb0c0-7833-40f6-91ee-dc9483f2e29&title=&width=116)
<a name="oftQE"></a>
### （2）类选择器
```html
.类名{
    属性名：属性值;
}

py to clipboardErrorCopied

  • 合法的类名：数字、字母、下划线、中划线

  • 一个元素可以有多个类名，空格隔开 ```html

你好，世界

你好，世界

py![image.png](https://cdn.nlark.com/yuque/0/2022/png/25488431/1648456783548-8a06f508-83d3-4a2c-97b9-34f857cf89a6.png#clientId=ufca6b209-53a3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=109&id=uf6110ff7&margin=%5Bobject%20Object%5D&name=image.png&originHeight=109&originWidth=323&originalType=binary&ratio=1&rotation=0&showTitle=false&size=6507&status=done&style=none&taskId=uc00dc06f-6ad8-4517-a03e-3ea708ff600&title=&width=323) to clipboardErrorCopied
<a name="i1sSM"></a>
### （3）id 选择器
```html
#元素id{
    属性名：属性值;
}

py to clipboardErrorCopied

  • 页面中唯一，不能重复
  • 一个标签只能有一个 id
  • id 选择器一般与 js 配合使用 ```html

你好，世界

y t![image.png](https://cdn.nlark.com/yuque/0/2022/png/25488431/1648456823290-4b043de8-81a4-4ee1-9a58-257ab36b1849.png#clientId=ufca6b209-53a3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=40&id=ue86a6aab&margin=%5Bobject%20Object%5D&name=image.png&originHeight=40&originWidth=109&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1132&status=done&style=none&taskId=u6977d356-ce2d-495f-8d0a-b84bc9b3f96&title=&width=109)o clipboardErrorCopied
<a name="yGYM8"></a>
### （4）通配符选择器
```html
*{
   属性名：属性值;
}

y to clipboardErrorCopied

  • 选中页面所有标签
  • 一般用于统一设置页面样式 ```css / 清除内外边距 /
  • { margin: 0; padding: 0; box-sizing: border-box; } ```