CSS 快速入门

野生派蒙

于 2024-08-01 06:34:58 发布

阅读量669

点赞数 21

文章标签： css 前端开发语言学习

本文链接：https://blog.csdn.net/m0_62854966/article/details/140824066

版权

一、前言

参考网址：https://www.w3school.com.cn/css/index.asp

CSS（层叠样式表，Cascading Style Sheet）用于定义网页的样式和布局的样式表语言，通过 CSS 你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

二、CSS 语法

CSS 的语法由选择器和声明块组成：

选择器指定你需要设置样式的 HTML 元素；
声明块包含一条或多条用分号分隔的声明；
每条声明都包含一个 CSS 属性名称和一个值，用冒号分隔；
多条 CSS 声明之间由分号分隔，声明块用大括号括起来。

p {
	color: red;
	font-size: 18px;
}

例子解释：

p 是 CSS 中的选择器，指向要设置样式的 HTML 元素；
color 是属性，red 是属性值；
font-size 是属性，18px 是属性值

三、引入方式

CSS 的导入方式主要有以下三种，它们的优先级是：内联样式 > 内部样式表 > 外部样式表。

3.1 内联样式

直接在 HTML 元素的 style 属性中编写 CSS 样式：

<p style="color: red; font-size: 18px;">这是一段内联样式的文本</p>

3.2 内部样式表

在 HTML 文件的 <head> 部分使用 <style> 标签来定义 CSS 样式：

<head>
    <style>
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>

3.3 外部样式表

将 CSS 代码保存为独立的 .css 文件（例如 styles.css ），然后在 HTML 文件的 <head> 部分使用 <link> 标签将其引入：

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

四、选择器

CSS 选择器用于准确地选择要应用样式的 HTML 元素。以下是常见的 CSS 选择器类型：

4.1 元素选择器

通过元素的名称来选择，如 p 选择所有的 <p> 元素，div 选择所有的 <div> 元素。

<p>段落标签</p>

p {
	color: red;
}

4.2 类选择器

以 . 开头，后跟类名，如 .myClass 选择所有具有 class=“myClass” 的元素。

<p class="myClass">段落标签</p>

.myClass {
    color: red;
}

4.3 ID选择器

以 # 开头，后跟 ID 名称，如 #myId 选择具有 id=“myId” 的唯一元素。

<p id="myId">段落标签</p>

#myId {
    color: red;
}

4.4 通用选择器

使用 * 选择页面上的所有元素。

* {
    color: red;
}

4.5 子选择器：

用 > 分隔，如 div > p 选择 <div> 元素的第一个元素 <p> 。

<div>
    <p>段落标签</p>
</div>

div > p {
	color: red;
	font-size: 18px;
}

4.6 后代选择器

用 空格 分隔，如 div p 选择 <div> 元素内部的所有 <p> 元素。

<div>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
</div>

div p {
    color: red;
}

4.7 相邻兄弟选择器

用 + 分隔，如 h1 + p 选择紧跟在 <h1> 元素后的第一个 <p> 元素。

<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

h1 + p {
	color: red;
}

4.8 通用兄弟选择器

用 ~ 分隔，如 h1 ~ p 选择 <h1> 元素之后的所有 <p> 元素。

<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

h1 ~ p {
	color: red;
}

4.9 伪类选择器

基于元素的特定状态进行选择，如 :hover 用于鼠标悬停时，:active 用于元素被激活时（如鼠标点击但未释放），:focus 用于元素获得焦点时（如输入框被选中）。

<h1>标题</h1>

h1:hover {
    color: red;
}

4.10 伪元素选择器

用于选择元素的特定部分，如 ::before 和 ::after 用于在元素内容的前面或后面插入内容(content)。

<h1>标题</h1>

h1::before {
    content: 'before';
}

h1::after {
    content: 'after';
}

运行结果：

在这里插入图片描述

五、常用属性

以下是一些在 CSS 中常用的属性：

color：用于设置文本的颜色，如 color: red; 。
font-size：设置文本的字体大小，如 font-size: 16px; 。
font-family：指定文本的字体，如 font-family: Arial, sans-serif; 。
font-weight：控制字体的粗细，如 font-weight: bold; 表示加粗。
text-align：设置文本的对齐方式，包括 left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐），如 text-align: center; 。
background-color：定义元素的背景颜色，如 background-color: #f0f0f0; 。
background-image：为元素设置背景图片，如 background-image: url(‘image.jpg’); 。
width 和 height：分别设置元素的宽度和高度，如 width: 200px; height: 100px; 。
margin 和 padding：用于控制元素的外边距（margin）和内边距（padding），如 margin: 10px; padding: 20px; 。
border：用于设置元素的边框，包括边框的宽度、样式（如实线、虚线等）和颜色，如 border: 1px solid black; 。
display：决定元素的显示方式，常见的值有 block（块级元素）、inline（行内元素）、none（隐藏元素）等，例如 display: block; 。
float：用于设置元素的浮动，如 float: left; 使元素向左浮动。
position：用于定位元素，常见的值有 static（默认定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位），例如 position: absolute; 。
opacity：设置元素的透明度，取值范围从 0（完全透明）到 1（完全不透明），例如 opacity: 0.5; 。
transition：用于创建平滑的过渡效果，例如 transition: all 0.3s ease; 表示所有属性在 0.3 秒内以平滑的方式过渡。
transform：用于对元素进行变换操作，如旋转（rotate）、缩放（scale）、平移（translate）等，例如 transform: rotate(45deg); 表示旋转 45 度。

这只是 CSS 众多属性中的一部分，根据具体的设计需求，还会用到更多的属性来实现丰富多样的样式效果。

六、盒子模型

在 CSS 中，盒子模型是用于设计和布局页面的基础概念。

盒子模型由四个部分组成：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。

内容（Content）：这是盒子中实际显示文本、图像或其他元素的区域。
内边距（Padding）：位于内容和边框之间的空白区域。它可以增加内容与边框之间的距离，使内容不会紧贴着边框。例如，padding: 20px; 表示在上下左右四个方向都设置 20 像素的内边距。
边框（Border）：围绕内容和内边距的线条，可以设置边框的宽度、样式（如实线、虚线、点线等）和颜色。例如，border: 2px solid black; 表示设置 2 像素宽的黑色实线边框。
外边距（Margin）：在边框之外，用于分隔元素与其他元素的区域。外边距可以使元素之间保持一定的距离。例如，margin: 10px; 表示在上下左右四个方向都设置 10 像素的外边距。

盒子模型的总宽度和总高度的计算方式如下：

对于标准盒子模型（box-sizing: content-box）：
- 总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度
- 总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度
对于替代盒子模型（box-sizing: border-box）：
- 总宽度 = 边框宽度 + 内边距宽度 + 内容宽度
- 总高度 = 边框高度 + 内边距高度 + 内容高度

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

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 5px solid red;
            margin: 30px;
            box-sizing: border-box;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div class="box">这是一个盒子模型的示例</div>
</body>

</html>

在这里插入图片描述
content-box：是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box：如果你将一个元素的 width 设为 100px ,那么这 100px 会包含其它的 border 和padding，内容区的实际宽度会是 width 减去 border + padding 的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

七、浮动

浮动（float）属性用于使元素脱离文档流，并向左或向右移动，直到其边缘碰到包含框或另一个浮动元素的边缘。

浮动的主要用途包括：

实现多列布局：可以将多个元素浮动，使其在一行中排列，从而创建类似报纸栏目的布局效果。
文字环绕：当一个元素浮动时，周围的文本会环绕它显示。

浮动的取值有 left（向左浮动）、right（向右浮动）和 none（默认值，不浮动）。

<div class="parent">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="clearfix"></div>
</div>

.box1 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}

.box2 {
  float: right;
  width: 150px;
  height: 150px;
  background-color: blue;
}

在上述代码中，.box1 元素向左浮动，.box2 元素向右浮动。

然而，使用浮动时可能会出现一些问题，比如父元素高度塌陷。当子元素浮动后，父元素的高度可能不会自动包含浮动的子元素，导致父元素的高度看起来为 0。

解决父元素高度塌陷的常见方法有：

在父元素上添加 overflow: hidden; 。
在父元素的末尾添加一个空的块级元素，并设置其 clear: both; ，以清除浮动的影响。

.parent {
  overflow: hidden;
}

.clearfix {
  clear: both;
}

八、定位

在 CSS 中，定位（position）属性用于控制元素在页面中的位置，主要有以下几种定位方式：

8.1 相对定位

相对定位（relative）：元素相对于其在正常文档流中的原始位置进行定位。通过设置 top、bottom、left、right 属性来偏移元素的位置，但原来的空间仍然保留。

.relative-box {
     position: relative;
     top: 20px;
     left: 30px;
 }

8.2 绝对定位

绝对定位（absolute）：元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的根元素进行定位。绝对定位的元素会从文档流中移除，不占据空间。

.absolute-box {
	position: absolute;
	top: 50px;
	right: 40px;
}

8.3 固定定位

元素相对于浏览器窗口进行定位，无论页面如何滚动，元素的位置始终保持不变。

.fixed-box {
     position: fixed;
     bottom: 20px;
     left: 20px;
 }

九、Flex 布局

Flex 布局（Flexible Box Layout），又称弹性盒布局，是 CSS 中一种强大而灵活的布局方式，用于更轻松地实现页面元素的排列和对齐。

9.1 特点

方向控制：可以轻松地设置主轴方向为水平（row）或垂直（column）。
元素排列：能够方便地控制元素在主轴上的排列方式，如 flex-start（起始端对齐）、flex-end（末端对齐）、center（居中对齐）、space-between（两端对齐，元素之间间隔相等）、space-around（元素周围间隔相等）等。
换行控制：决定元素在空间不足时是否换行，通过 flex-wrap 属性设置为 nowrap（不换行）、wrap（换行）或 wrap-reverse（反向换行）。
元素伸缩：可以让元素按照一定比例伸缩以适应空间，通过 flex-grow（扩展比例）、flex-shrink（收缩比例）和 flex-basis（初始大小）来控制。

9.2 属性

display: flex; ：将元素转换为 Flex 容器。
flex-direction: row | column; ：设置主轴方向。
justify-content: flex-start | flex-end | center | space-between | space-around; ：主轴上的元素对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch; ：交叉轴上的元素对齐方式。
flex-wrap: nowrap | wrap | wrap-reverse; ：控制元素是否换行。

9.3 实例

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

<head>
    <style>
        .flex-container {
            /* 定义 Flex 容器 */
            display: flex;
            /* 容器内的元素两端对齐 */
            justify-content: space-between;
            /* 元素居中对齐 */
            align-items: center; 
            background-color: lightgray;
            height: 200px;
        }

        .flex-item {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>

</html>

运行结果：

在这里插入图片描述

野生派蒙

关注

21
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 快速入门

CSS（层叠样式表，Cascading Style Sheet）用于定义网页的样式和布局的样式表语言，通过 CSS 你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。
复制链接

扫一扫