CSS基础

意巷浓

于 2023-10-08 19:42:17 发布

阅读量42

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_56534351/article/details/133688368

版权

本文详细介绍了CSS的基础知识，包括选择器的类型、样式声明、颜色表示法、长度单位、HTML中引入CSS的方法以及字体样式设置，为初学者提供了全面的CSS入门指南。

摘要由CSDN通过智能技术生成

1.语法

CSS 规则由选择器和样式声明组成。选择器用于指定需要应用样式的元素，例如 HTML 元素、class 或 id。样式声明则用于定义元素的样式，例如颜色、字体、大小、位置等。

例如：

selector {
  property: value;
  property: value;
  ...
}

selector 是选择器，用于指定需要应用样式的元素。property 是样式属性，value 是样式属性的值。多个样式属性可以在一个规则中定义，用分号分隔。

2.CSS颜色

十六进制颜色代码：使用"#"前缀，后面跟着六位十六进制数字。例如，"#FF0000"表示红色。
RGB 颜色代码：使用"rgb(r, g, b)"格式，其中 r、g 和 b 分别表示红色、绿色和蓝色的值，值范围为 0 到 255。例如，"rgb(255, 0, 0)"表示红色。
HSL 颜色代码：使用"hsl(h, s, l)"格式，其中 h 表示色调，s 表示饱和度，l 表示亮度，值范围为 0 到 100。例如，"hsl(0, 100, 5)

3.CSS长度单位

百分比（%）：百分比是相对长度单位，表示相对于父元素的长度。

像素（px）：像素是最常用的长度单位，表示屏幕上的一个点。

毫米（mm）：毫米是一种物理长度单位，在打印时常用。

厘米（cm）：厘米是一种物理长度单位，在打印时常用。

英寸（in）：英寸是一种物理长度单位，在打印时常用。

em（浏览器默认字体大小）：em 是相对长度单位，表示相对于浏览器默认字体大小的比例。通常情况下，浏览器默认字体大小为 16px，所以 1em 等于 16px。

rem（根元素字体大小）：rem 是相对长度单位，表示相对于根元素字体大小的比例。根元素是 HTML 元素，其字体大小可以通过 CSS 样式表设置。

ex（x-height）：ex 是相对长度单位，表示相对于 x-height 的比例。x-height 是指字母 "x" 的高度，通常约为字体大小的一半。

ch（字符宽度）：ch 是相对长度单位，表示相对于字符宽度的比例。字符宽度是指一个字符在水平方向上所占的宽度。

vw（视窗宽度）：vw 是相对长度单位，表示相对于视窗宽度的比例。视窗宽度是指浏览器窗口的宽度。

vh（视窗高度）：vh 是相对长度单位，表示相对于视窗高度的比例。视窗高度是指浏览器窗口的高度。

4.HTML引入CSS

外部样式表：在 HTML 文件之外创建一个 CSS 文件（通常扩展名为.css），然后在 HTML 文件中使用<link>标签来引入该样式表。

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

内部样式表：在 HTML 文件内部使用<style>标签来定义 CSS 样式。

<style>
    /* 定义 CSS 样式 */
</style>

内联样式：在 HTML 元素内部使用 style 属性来定义 CSS 样式。

<div style="color: red;">这是一个红色的 div。</div>

5.CSS选择器

元素选择器：选择具有特定元素名称的元素。例如，p 选择所有段落元素。

selector {
   填写属性
}

类选择器：选择具有特定类名的元素。例如，.warning 选择所有带有"warning"类的元素。

.class {
    填写属性
}

ID 选择器：选择具有特定 ID 名的元素。例如，#footer 选择具有"footer"ID 的元素。

#id {
    填写属性
}

6.选择器的优先级

在 CSS 中，选择器的优先级决定了样式的应用顺序。选择器的优先级由选择器的权重决定，权重越高，优先级越高。

内联样式（!important 除外）：1000
ID 选择器：100
类选择器、属性选择器、伪类选择器、伪元素选择器：10
元素选择器：1

7.选择器的继承性

CSS 选择器的继承性是指，当一个元素应用了一个样式后，其子元素也会继承该样式。

<div class="parent">
    <p class="child">这是一个段落。</p>
</div>

在上面的代码中，<div>元素应用了"parent"类，<p>元素应用了"child"类。如果在 CSS 文件中定义了以下样式：

.parent {
    color: red;
}

<div>元素将显示为红色，而其子元素<p>也将继承该样式，显示为红色。

8.CSS字体样式

font-family：设置文本的字体，例如 Arial、Times New Roman 等。
font-size：设置文本的字号，单位可以是像素（px）、磅（pt）、英寸（in）等。
font-style：设置文本的样式，例如加粗（bold）、斜体（italic）、下划线（underline）等。
font-weight：设置文本的粗细程度，可以是 normal、bold、lighter 等。
color：设置文本的颜色，可以使用十六进制颜色代码、RGB 颜色代码或 HSL 颜色代码等。
line-height：设置文本行高，单位可以是像素（px）、磅（pt）、英寸（in）等。
letter-spacing：设置文本中字母之间的间距，单位可以是像素（px）、磅（pt）、英寸（in）等。
text-align：设置文本的对齐方式，可以是左对齐（left）、右对齐（right）、居中对齐（center）等。

9.CSS引入外部字体

@font-face 规则：@font-face 规则是 CSS3 引入的一种方法，可以允许您在网页上使用自定义字体。您可以通过提供字体文件的 URL 来指定字体，然后通过 CSS 选择器来应用字体样式。
链接外部 CSS 文件：您可以将字体样式定义在一个外部 CSS 文件中，然后在 HTML 文件中通过链接外部 CSS 文件来应用字体样式。
使用 @import 语句：@import 语句是 CSS2.1 引入的一种方法，可以用于引入外部 CSS 文件。您可以在 CSS 文件中使用 @import 语句来引入包含字体样式定义的外部 CSS 文件。
使用 HTML 中的 link 元素：link 元素是 HTML 中的一种链接元素，可以用于链接外部 CSS 文件。您可以在 HTML 文件中使用 link 元素来链接包含字体样式定义的外部 CSS 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <style>
    @font-face {
    font-family: my-font;/*自定义名称*/
    src: url('./ziti.ttf');
}
    p {
    font:50px my-font,sans-serif;
}

 </style>  
 <p>这是一种字体！！！</p> 
</body>
</html>