CSS入门基本规则

橘猫吃不胖～

已于 2024-04-21 23:28:38 修改

阅读量524

点赞数 1

分类专栏： CSS 文章标签： css

于 2021-10-10 19:15:00 首次发布

本文链接：https://blog.youkuaiyun.com/m0_46612221/article/details/120661697

版权

CSS 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了CSS的基础，包括为何使用CSS、三种常见样式应用方法（行内、页面内、导入文件）、核心选择器（标签名、类、ID和通配符）以及颜色的表示方法。从HTML样式单一性出发，讲解了样式分离和团队协作的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 为什么要使用CSS样式

HTML标签的样式比较单一,很难维护
样式表的切换可以改变网站整体界面风格
样式表能实现内容与样式的分离，方便团队开发

2 CSS样式使用方法

2.1 行内嵌入式

行内嵌入式：给标签添加style属性，用来设置样式，而且只对当前嵌入的标签有效。

<p style="color: coral;font-size: 45px;">橘猫吃不胖</p>

在这里插入图片描述

2.2 页面嵌入式

页面嵌入式：在页面中使用<style></style>定义不同的样式规则
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
  body {
    /*表示body中的所有内容都居中*/
    text-align: center;
    border: 1px solid black;
  }

  p {
    /*p标签的字体颜色设置为橙色*/
    color: coral;
    /* p标签的字体大小为45像素 */
    font-size: 45px;
  }
</style>

<body>
  <p>橘猫吃不胖</p>
</body>
</html>

在这里插入图片描述

2.3 导入css文件的方式（推荐使用）

第一步：创建扩展名为.css的样式文件。
在这里插入图片描述
第二步：在页面中通过<link>标签将外部的css文件链接起来。一般是在<head></head>中插入<link href=".css文件的地址">

3 CSS的基本选择器

CSS的选择器用来在CSS中定位页面中的标签（控件）。

3.1 标签名选择器

格式为：

标签名 {
  样式规则（属性）：属性值；
}

例如，下面的代码表示p标签中所有的字体为橙色，字号为30像素：

/* p指的是<P>标签 */
p {
  /* color和font-size都是属性 */
  /* orange和30px代表了属性值 */
  color: orange;
  font-size: 30px;
}

3.2 类选择器

类选择器指的是在页面中给标签添加class属性，标签的class属性值可以重复。

格式：

.类名(标签的class属性值) {
    样式规则(属性): 值;
}

例如，给第一个和第三个p标签添加一个class属性jm，第二个p标签不添加class属性：

<p class="jm">橘猫吃不胖</p>
<p>橘猫吃不胖</p>
<p class="jm">橘猫吃的胖</p>

然后在CSS样式中，使用.类名的格式就可以对该标签进行修改样式：

.jm {
  color: orangered;
  font-size: 35px;
  font-family: 宋体;
}

可以看到，标签的class属性可以重复，而且只有第一个和第三个设置了相同的class属性的p标签改变了样式：
在这里插入图片描述

3.3 id选择器

id选择器是指在页面中给标签添加id属性，但是标签的id属性值不能重复。

格式：

#id名 {
  样式规则(属性): 属性值;
}

例如，给标签添加一个id属性：

<p id="jm">橘猫吃不胖</p>

使用id属性为p标签添加CSS样式：

#jm {
  color: orchid;
  font-size: 50px;
}

在这里插入图片描述

3.4 通配选择符

通配选择符是指*，它代表所有元素。

格式：

* {
  样式规则(属性): 值;
}

4 颜色的表示方式

4.1 颜色名直接表示

red、blue、green、pink、orange、white、black

4.2 十六进制表示

#rgb或#rrggbb，r、g、b表示三原色的值（取值范围在0~f之间）

4.3 rgb函数

rgb(r,g,b)函数：r,g,b三个参数表示三原色的值（取值范围在0~255之间）
rgba(r,g,b,a)函数：r,g,b三个参数表示三原色的值（取值范围在0 ~ 255之间），参数a表示透明度（取值0.0~1.0之间）