CSS总讲（上篇）基础篇

最新推荐文章于 2024-11-14 17:40:35 发布

悸动445

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量1.2k

点赞数 29

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/2202_75375955/article/details/140294296

版权

CSS

CSS 是一种描述 HTML 文档样式的语言。

前面的文章，我们有所涉及样式。那么本篇我们将着重样式来讲。

什么是 CSS？

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

也称级联样式表。

1.CSS3概述

设置HTML页面中的文本内容（字体、大小、对齐方式等）图片的外形（宽高、边框样式、边距等）版面的布局等外观显示样式。如图中文字的颜色、粗体、背景、行间距和左右两列的排版等，都是通过CSS控制的。（也就是服务于我们的HTML）

CSS3基本功能

基础选择器

元素选择器：选择HTML元素，如 div, p, a。
类选择器：通过类名选择元素，如 .my-class。
ID选择器：通过ID选择元素，如 #my-id。
ID选择器和class选择器的区别：
（id选择器（ID Selector）：
- HTML属性：使用id属性来定义，它是唯一的，一个页面中只能有一个元素拥有相同的id值。
- CSS语法：#idName，比如#myId。
- 作用域：由于id是唯一的，id选择器通常用来唯一地指定页面中的某个特定元素。
- 用途：适用于不需要重复样式规则的场景，如固定导航栏、页脚、图标等。
class选择器（Class Selector）：
- HTML属性：使用class属性来定义，它可以应用于多个元素，多个元素可以拥有相同的class值。
- CSS语法：.className，比如.myClass。
- 作用域：class选择器适用于需要对一组具有类似属性的元素应用样式的场景。
- 用途：适用于样式需要复用的场景，比如一组按钮、一组列表项等。）
通配符选择器：选择所有元素，如 *。
属性选择器：根据元素的属性选择元素，如 [type="text"]。

字体样式

字体属性：控制字体的大小、类型和粗细，如 font-size, font-family, font-weight。
文字属性：调整文字的颜色、对齐方式和装饰效果，如 color, text-align, text-decoration。

文本排版样式

文本属性：调整文本行高、间距和缩进，如 line-height, letter-spacing, text-indent。

新增选择器

子元素选择器：选择某元素下的直接子元素，如 parent > child。
相邻兄弟选择器：选择紧接在另一元素后的元素，如 element + sibling。
伪类和伪元素：如 :hover, :nth-child, ::before, ::after。

新增字体文本样式属性

字间距：letter-spacing
文字阴影：text-shadow
文字换行：word-wrap

CSS3盒模型

盒模型属性：width, height, padding, border, margin。
元素类型与转换：display, visibility, transform。
浮动与定位：float, position, clear。

背景控制

背景属性：background-color, background-image, background-size。

边框特性

边框属性：border-color, border-width, border-radius。

阴影box-shadow

阴影属性：box-shadow。

多背景图

多背景属性：background-image 可以指定多个背景图层。

多列布局与弹性盒模型布局

多列布局：使用 column-count, column-width 实现多列布局。
弹性盒模型：使用 display: flex 和相关属性实现弹性布局。

CSS3其它新功能

盒子的变形transform：旋转、缩放、倾斜和移动元素，如
```
transition: property duration timing-function delay
```

过渡与动画transition/animation：通过过渡和动画效果增强用户体验，如

transition: property duration timing-function delay, animation: name duration timing-function delay.

Flexbox 布局：通过 display: flex 和相关属性（如 flex-direction, justify-content, align-items）实现更灵活的布局方式，特别适合响应式设计和复杂布局要求。
Grid 布局：使用 display: grid 和相关属性（如 grid-template-columns, grid-template-rows, grid-gap）实现二维网格布局，支持更复杂的页面结构和自适应布局需求。
变量与自定义属性：通过 CSS 变量（Custom Properties）定义和使用变量，提高样式复用性和维护性，例如 --primary-color: #007bff;。
滤镜效果：通过 filter 属性添加图像处理效果，如模糊、对比度调整、色彩饱和度等，提升视觉效果和创意表达。
网格与多列布局：除了多列布局，CSS3 的网格布局（Grid Layout）提供了更强大的布局控制能力，支持定义网格轨道和对齐方式，适用于复杂的网页结构和排版需求。
响应式设计支持：媒体查询（Media Queries）允许根据设备特性（如宽度、分辨率）调整样式和布局，实现响应式设计，提升用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 Features Example</title>
    <style>
        /* 基础选择器样式 */
        .basic-selectors {
            font-family: Arial, sans-serif; /* 设置字体 */
            text-align: center; /* 文本居中对齐 */
        }
        
        /* 新增选择器样式 */
        .basic-selectors > p {
            color: #333; /* 设置文字颜色 */
        }
        
        /* 字体样式 */
        .font-style {
            font-size: 24px; /* 设置字体大小 */
            font-weight: bold; /* 设置字体粗细 */
            text-decoration: underline; /* 添加下划线 */
            color: #007bff; /* 设置文字颜色 */
        }
        
        /* 文本排版样式 */
        .text-layout {
            line-height: 1.5; /* 设置行高 */
            letter-spacing: 1px; /* 设置字间距 */
            text-indent: 20px; /* 设置首行缩进 */
        }
        
        /* CSS3盒模型样式 */
        .box-model {
            width: 300px; /* 设置宽度 */
            height: 200px; /* 设置高度 */
            padding: 20px; /* 设置内边距 */
            border: 1px solid #ccc; /* 设置边框 */
            margin: 20px; /* 设置外边距 */
            background-color: #f0f0f0; /* 设置背景颜色 */
            box-shadow: 3px 3px 5px #888888; /* 添加阴影 */
        }
        
        /* 多背景图样式 */
        .box-model {
            background-image: url('./img/csdn.png'); /* 设置多个背景图片 */
            background-size: cover, auto; /* 设置背景图片尺寸 */
            background-position: center, top right; /* 设置背景图片位置 */
            background-repeat: no-repeat, repeat-x; /* 设置背景图片重复方式 */
        }
        
        /* 盒子的变形样式 */
        .transform-box {
            transform: rotate(10deg) scale(1.2) skew(10deg, 5deg) translate(20px, 10px); /* 设置变形效果 */
        }
        
        /* 过渡与动画样式 */
        .transition {
            transition: all 0.3s ease-in-out; /* 设置过渡效果 */
        }
        
        .transition:hover {
            transform: rotate(360deg); /* 悬停时旋转 */
            background-color: #ffcc00; /* 悬停时背景颜色变化 */
            color: #fff; /* 悬停时文字颜色变化 */
        }
    </style>
</head>
<body>
    <!-- 基础选择器示例 -->
    <div class="basic-selectors">
        <h1>基础选择器</h1>
        <p>这是一个示例段落，使用了基础选择器和新增选择器。</p>
    </div>

    <!-- 字体样式示例 -->
    <div class="font-style">
        字体样式示例
    </div>

    <!-- 文本排版样式示例 -->
    <div class="text-layout">
        <p>文本排版样式示例段落，展示了文本行高、字间距和首行缩进。</p>
    </div>

    <!-- CSS3盒模型与变形示例 -->
    <div class="box-model transform-box transition">
        <h2>CSS3盒模型与变形</h2>
        <p  style="color: brown;">这是一个盒模型示例，同时应用了变形效果和过渡动画。</p>
    </div>
</body>
</html>

结果如上，图片来源可以到往期文章去看

关于web 第一章初识HTML以及HTML四大案例（保姆级教学）

CSS3引入方式

行内式

<p><span style="font-size:18px;color:red;"></span><p>

内嵌式

<head>
<style>
选择器{ style="font-size:18px;color:red;"}；
<style>
</head>

链入式

<head>
<link href="css文件路径"type="text/css" rell="stylesheet">
</head>

导入式


<style>
@import url(css文件路径）;@import"css文件路径"
<style>

CSS 边框样式

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

CSS 边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick

CSS 文本

color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 "red"
十六进制值 - 比如 "#ff0000"
RGB 值 - 比如 "rgb(255,0,0)"

查看 CSS 颜色值，以获取可能颜色值的完整列表。

页面的默认文本颜色是在 body 选择器中定义的。

如果您定义了 color 属性，则还必须定义 background-color 属性。

CSS 文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

CSS 链接

设置链接样式

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

四种链接状态分别是：

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}

CSS 列表

HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：

无序列表（<ul>）- 列表项用的是项目符号标记
有序列表（<ol>）- 列表项用的是数字或字母标记

CSS 列表属性使您可以：

为有序列表设置不同的列表项标记
为无序列表设置不同的列表项标记
将图像设置为列表项标记
为列表和列表项添加背景色

CSS 表格

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为 <table>、<th> 和 <td> 元素规定了黑色边框：

Firstname	Lastname
Bill	Gates
Steve	Jobs

测试代码，大家可以自行模仿修改

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 设置表格的整体样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        /* 设置表格标题的样式 */
        th {
            background-color: #f2f2f2;
            color: #333;
            font-weight: bold;
            padding: 10px;
            text-align: left;
        }

        /* 设置表格单元格的样式 */
        td {
            border: 1px solid #ddd;
            padding: 8px;
        }

        /* 设置表格行的样式，隔行换色 */
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* 鼠标悬停时改变行的背景色 */
        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>工程师</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>28</td>
            <td>市场营销</td>
        </tr>
        <tr>
            <td>悸动445</td>
            <td>20</td>
            <td>web工程师</td>
        </tr>
    </table>
</body>
</html>