CSS快速入门

最新推荐文章于 2025-05-07 11:15:37 发布

原创最新推荐文章于 2025-05-07 11:15:37 发布 · 1.2k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

前端专栏收录该内容

6 篇文章

订阅专栏

CSS

引入方式

CSS 样式文件有两种引入方式，既可以写在 HTML 文件内，也可以作为独立的以.css结尾的文件存在

方式一：使用独立的 CSS 文件引入

当 CSS 样式作为单独的文件时，需要在 HTML 文件的<head>标签中使用link标签来引入该 CSS 文件。

例如，假设有一个名为styles.css的 CSS 文件，要将其引入到 HTML 文件中，需按以下方式在<head>标签内添加link标签：

<link rel="stylesheet" href="styles.css">

在上述代码中：
- rel="stylesheet"的作用是表明所链接的文件为样式表，用于告知浏览器该文件的性质。
- href属性则用于指定 CSS 文件的具体路径。这里的路径可以是相对路径（也就是相对于当前 HTML 文件所在位置而言的路径），也可以是绝对路径（完整的文件访问路径）。

方式二：在 HTML 文件内定义 CSS 样式

如果选择将 CSS 样式直接写在 HTML 文件内，那就需要在 HTML 文件的末尾（通常建议放在<head>标签内）使用<style>标签来定义 CSS 样式，示例代码如下：

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
    </style>
</head>

CSS 选择器

1. 元素选择器

根据 HTML 元素标签名来选择元素，例如p、h1、div等。

p {
  font - family: Arial, sans - serif;
  line - height: 1.6;
}

2. 类选择器

以一个点号（.）开头，后面跟着类名。它是通过 HTML 元素的class属性来选择元素，例如.header、.content等。

<button class="button">登录</button>
<input type="submit" class="button" value="注册"/>

. button {
    background - color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border - radius: 5px;
}

3. ID选择器

以一个井号（#）开头，后面跟着 ID 名称。它根据 HTML 元素的id属性来选择元素，例如#main - content、#navbar等。在一个 HTML 文档中，ID 应该是唯一的。

<div id="sidebar">
  <ul>
    <li>菜单1</li>
    <li>菜单2</li>
  </ul>
</div>

# sidebar {
  width: 200px;
  background - color: #F4F4F4;
  padding: 10px;
}

常用CSS配置项

常用 CSS 配置项（完整请查看：W3school）

文本

属性	描述
color	设置文本颜色
font-size	设置文本字号
text-align	对齐元素中的文本。值：left right center
vertical-align	设置元素的垂直对齐方式。值：top middle bottom

设置行内元素文本自动换行：word-wrap: break-word

元素

属性	描述
width	宽度
height	高度
line-height	行高
color	字体颜色
font-size	字体大小

背景

属性	描述
background-color	设置背景颜色
background-image	设置背景图像
background-size	设置背景图片的大小

盒子模型（Box Model）

一个盒子的组成包含：Margin外边距，Border边框，Padding内边距，Content内容。一、Border（边框）

组成

一、Border（边框）

除了像素值、实虚线、边框颜色这三个属性外，边框还可以通过border-style属性设置具体的边框样式，如dotted（点状）、dashed（虚线）、double（双线）等。
可以单独设置某一边的边框，例如border-top（上边框）、border-right（右边框）、border-bottom（下边框）、border-left（左边框），每个单独的边也可以分别设置像素值、样式和颜色。

二、Margin（外边距）

除了分别设置上、右、下、左的外边距值外，还可以使用margin:auto来自动居中元素，通常与设置元素的宽度结合使用。
可以使用margin:0 auto来实现水平居中，其中0表示上下外边距为 0，auto表示左右外边距自动分配，从而使元素在父容器中水平居中。

三、Padding（内边距）

同样可以单独设置某一边的内边距，如padding-top、padding-right、padding-bottom、padding-left。
内边距会增加元素的总尺寸，在进行布局时需要考虑内边距对元素尺寸的影响。

四、boxShadow（元素阴影效果）

box-shadow属性可以接受多个参数，如box-shadow: h-shadow v-shadow blur spread color inset;，分别表示水平阴影位置、垂直阴影位置、阴影模糊半径、阴影扩展半径、阴影颜色和是否为内阴影（inset 表示内阴影，默认为外阴影）。
例如box-shadow: 5px 5px 10px #888888;表示在元素的右边和下边各产生 5 像素的水平和垂直阴影，模糊半径为 10 像素，阴影颜色为灰色。

五、border-radius（设置元素的外边框圆角）

可以分别设置四个角的圆角半径，如border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
也可以使用简写形式，如border-radius: 10px 20px 30px 40px;分别表示左上角、右上角、右下角、左下角的圆角半径。如果四个值相同，可以简写为一个值，如border-radius: 20px;。

flex布局

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
所有现代浏览器均支持 flexbox 属性。

如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。
通过将 display 属性设置为 flex，flex 容器将可伸缩：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<style>
.flex-container {
  display: flex;
}
</style>

容器属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction 属性

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

可选值：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。
flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

可选值：

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

可选值：

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

可选值：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的底部对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。