前端开发：（三）CSS入门

星光闪闪k

已于 2024-02-08 20:55:56 修改

阅读量1.3k

点赞数 20

分类专栏：前端 Java 文章标签： css 前端架构 java html js vue

于 2024-02-07 21:47:21 首次发布

本文链接：https://blog.csdn.net/qq_35763697/article/details/136074120

版权

Java 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

1. 介绍CSS

1.1 什么是CSS

CSS（Cascading Style Sheets）是一种用于描述文档样式和布局的样式表语言，用于美化和排版HTML和XML等标记语言的内容。

1.2 CSS的作用和优势

CSS的主要作用是控制网页的样式和布局，包括字体、颜色、间距、边框、背景等方面，从而增强用户体验并提高页面的可读性和美观度。其优势包括：

分离内容与表现：将样式和结构分开，使得网页结构更清晰，易于维护和管理。
提高网页性能：可以通过CSS控制页面加载速度和渲染效率，提升用户体验。
增强可访问性：使用CSS可以轻松实现对网页内容的可访问性和无障碍体验。
跨平台兼容性：CSS可以适用于各种不同的设备和平台，并且能够适应不同尺寸和分辨率的屏幕。

1.3 CSS的发展历史

CSS最初由Håkon Wium Lie和Bert Bos在1996年提出，并在1997年成为W3C的推荐标准。随着Web技术的发展，CSS经历了多个版本的更新，从CSS1到CSS2再到CSS3，逐步增加了新的特性和功能，如盒模型、浮动、定位、动画等，以满足不断增长的Web设计需求。

2. CSS基础

2.1 CSS语法规则

CSS语法规则由选择器和声明块组成，选择器用于选择要应用样式的元素，声明块包含一个或多个属性值对。

selector {
    property: value;
}

2.2 CSS样式规则的结构

CSS样式规则由选择器和一组样式声明组成，选择器指定了要应用样式的HTML元素，样式声明指定了要修改的样式属性和对应的值。

h1 {
    color: blue;
    font-size: 24px;
}

2.3 CSS选择器的分类和使用

CSS选择器根据选择元素的不同方式分为元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。不同的选择器适用于不同的场景，可以精确地选择需要修改样式的元素。

/* 元素选择器 */
p {
    color: red;
}

/* 类选择器 */
.title {
    font-weight: bold;
}

/* ID选择器 */
#header {
    background-color: #ccc;
}

2.4 CSS注释的语法

CSS注释以/* */的形式包裹注释内容，用于在样式表中添加注释说明，提高代码的可读性和可维护性。

/* 这是一个CSS注释 */
p {
    color: blue; /* 这是另一个CSS注释 */
}

3. CSS样式的应用

3.1 内联样式

内联样式通过在HTML标签的style属性中直接定义样式，适用于单个元素的特定样式设置。

<p style="color: red; font-size: 16px;">这是一个红色字体的段落。</p>

3.2 嵌入样式表

嵌入样式表将样式规则直接写在HTML文档的<style>标签内部，适用于单个页面的样式设置。

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

3.3 外部样式表的链接

外部样式表将样式规则写在一个单独的CSS文件中，并通过<link>标签引入到HTML文档中，适用于整个网站的样式共享和统一管理。

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

4. CSS文本样式

4.1 字体样式（font）

字体样式属性用于控制文本的字体、大小、粗细和样式。

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
}

4.2 文本颜色（color）

文本颜色属性用于设置文本的颜色。

p {
    color: #333;
}

4.3 文本对齐（text-align）

文本对齐属性用于设置文本在其容器中的水平对齐方式。

h1 {
    text-align: center;
}

4.4 文本装饰（text-decoration）

文本装饰属性用于添加文本的下划线、删除线等装饰效果。

a {
    text-decoration: none; /* 移除链接下划线 */
}

5. CSS盒模型

5.1 盒模型的概念

CSS盒模型描述了一个元素在页面上所占空间的模型，它由内容区域、内边距、边框和外边距组成。

5.2 盒模型的组成（content、padding、border、margin）

内容区域（content）：元素的实际内容，由宽度（width）和高度（height）决定。
内边距（padding）：内容区域与边框之间的空间，可以用来增加元素内容与边框之间的距离。
边框（border）：围绕内容和内边距的线条，可以设置边框的样式、宽度和颜色。
外边距（margin）：元素边框与相邻元素边框之间的空间，用于控制元素之间的间距。

5.3 盒模型的尺寸控制

通过设置盒模型的宽度（width）、高度（height）、内边距（padding）、边框（border）和外边距（margin）等属性，可以控制元素在页面上的尺寸和位置。

.box {
    width: 200px; /* 设置元素宽度 */
    height: 150px; /* 设置元素高度 */
    padding: 20px; /* 设置内边距 */
    border: 1px solid #000; /* 设置边框 */
    margin: 10px; /* 设置外边距 */
}

6. CSS布局

6.1 常见的布局方式（水平布局、垂直布局）

常见的布局方式包括水平布局和垂直布局，可以通过设置元素的display属性和float属性来实现。

/* 水平布局 */
.horizontal-layout {
    display: flex;
}

/* 垂直布局 */
.vertical-layout {
    display: flex;
    flex-direction: column;
}

6.2 流式布局和固定布局

流式布局（Fluid Layout）根据浏览器窗口大小自动调整元素尺寸和位置，而固定布局（Fixed Layout）则保持元素的固定尺寸和位置。

/* 流式布局 */
.fluid-layout {
    width: 100%;
}

/* 固定布局 */
.fixed-layout {
    width: 960px;
    margin: 0 auto; /* 居中显示 */
}

6.3 弹性布局（Flexbox）和网格布局（Grid）

弹性布局和网格布局是CSS3新增的布局模式，可以更灵活地控制元素的排列和对齐方式。

/* 弹性布局 */
.flex-container {
    display: flex;
    justify-content: space-between;
}

/* 网格布局 */
.grid-container {
    display: grid;
    grid-template-columns: 50% 50%;
}

7. CSS背景样式

7.1 背景颜色（background-color）

背景颜色属性用于设置元素的背景颜色。

.element {
    background-color: #f0f0f0;
}

7.2 背景图片（background-image）

背景图片属性用于设置元素的背景图片，可以使用图片的URL或者渐变色。

.element {
    background-image: url('example.jpg');
}

7.3 背景重复和定位

背景重复属性用于设置背景图片的重复方式，背景定位属性用于设置背景图片的位置。

.element {
    background-repeat: no-repeat; /* 不重复 */
    background-position: center; /* 居中显示 */
}

8. CSS边框样式

8.1 边框样式（border-style）

边框样式属性用于设置元素的边框线条的样式，包括实线、虚线、双线等。

.element {
    border-style: solid; /* 实线 */
}

8.2 边框宽度（border-width）

边框宽度属性用于设置元素的边框线条的宽度。

.element {
    border-width: 1px; /* 1像素宽度 */
}

8.3 边框颜色（border-color）

边框颜色属性用于设置元素的边框线条的颜色。

.element {
    border-color: #ccc; /* 灰色 */
}

9. CSS浮动和定位

9.1 浮动（float）的概念和使用

浮动属性用于控制元素在父元素内的浮动方式，常用于实现多列布局和图文混排效果。

.float-left {
    float: left; /* 左浮动 */
}

.float-right {
    float: right; /* 右浮动 */
}

9.2 定位（position）的概念和属性

定位属性用于控制元素在文档中的定位方式，常用的定位属性包括相对定位、绝对定位和固定定位。

.relative-position {
    position: relative; /* 相对定位 */
}

.absolute-position {
    position: absolute; /* 绝对定位 */
}

.fixed-position {
    position: fixed; /* 固定定位 */
}

9.3 相对定位、绝对定位和固定定位

相对定位（relative）：相对于元素本身原来的位置进行定位。
绝对定位（absolute）：相对于最近的已定位的父元素进行定位。
固定定位（fixed）：相对于浏览器窗口进行定位，元素固定在页面上不随滚动而移动。

.element {
    position: relative; /* 相对定位 */
    top: 10px; /* 相对原位置向下偏移10像素 */
}

10. CSS尺寸和单位

10.1 像素（px）和百分比（%）

像素（px）：绝对单位，相对于显示设备的屏幕分辨率而言，常用于固定尺寸的元素。
百分比（%）：相对单位，相对于父元素的尺寸进行计算，常用于响应式布局和元素相对尺寸设置。

.element {
    width: 200px; /* 使用像素设置宽度 */
    height: 50%; /* 使用百分比设置高度 */
}

10.2 em、rem和vw/vh单位

em：相对于父元素字体大小的单位，可以实现相对于文本大小的尺寸设置。
rem：相对于根元素（html）字体大小的单位，可以实现全局的相对尺寸设置。
vw/vh：视口宽度和高度的百分比单位，可以根据视口大小进行尺寸设置，常用于响应式布局。

.element {
    font-size: 1.2em; /* 相对于父元素字体大小的1.2倍 */
    margin-bottom: 2rem; /* 相对于根元素字体大小的2倍 */
    width: 50vw; /* 相对于视口宽度的50% */
    height: 80vh; /* 相对于视口高度的80% */
}

10.3 CSS计算（calc()）

CSS计算函数calc()可以对长度值进行数学计算，用于实现动态计算尺寸的效果。

.element {
    width: calc(50% - 20px); /* 宽度为父元素宽度的50%，减去20像素 */
}

11. CSS动画与过渡

11.1 CSS过渡（transition）的基本使用

CSS过渡属性可以在元素属性变化时平滑地过渡到新状态，提升用户体验。

.element {
    transition: width 0.3s ease-in-out; /* 宽度变化时，过渡时间0.3秒，缓动效果 */
}

11.2 CSS动画（animation）的基本使用

CSS动画属性可以创建复杂的动画效果，可以定义动画的关键帧、持续时间和循环次数等。

@keyframes slide-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.element {
    animation: slide-in 1s ease-in-out; /* 使用slide-in动画，持续1秒，缓动效果 */
}

11.3 关键帧动画（@keyframes）

关键帧动画允许开发人员定义动画的各个阶段，从而实现更灵活的动画效果。

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.element {
    animation: bounce 1s ease-in-out infinite; /* 使用bounce动画，无限循环 */
}

12. 响应式Web设计

12.1 媒体查询（media queries）的概念和使用

媒体查询允许我们针对不同的媒体类型和设备特性应用不同的样式，以实现响应式布局和设计。

/* 当视口宽度小于600px时应用以下样式 */
@media only screen and (max-width: 600px) {
    .element {
        font-size: 14px;
    }
}

12.2 响应式图片和视频

通过设置图片和视频的最大宽度为100%，可以实现在不同设备上自适应大小的响应式媒体展示。

img, video {
    max-width: 100%;
    height: auto;
}

12.3 移动优先设计理念

移动优先设计理念是指在进行网页设计时，首先从移动设备的视角出发，确保网站在小屏幕上具有良好的用户体验，然后逐步增强布局和样式以适应更大屏幕的设备。

/* 移动优先设计 */
.element {
    font-size: 16px; /* 默认字体大小 */
}

@media only screen and (min-width: 768px) {
    .element {
        font-size: 18px; /* 在大屏幕上增加字体大小 */
    }
}

13. CSS预处理器

13.1 LESS、Sass和SCSS的介绍

LESS、Sass和SCSS是三种常用的CSS预处理器，它们提供了类似编程语言的特性，如变量、嵌套、混合和函数等，以提高CSS代码的可维护性和可复用性。

13.2 使用变量、混合（Mixin）和嵌套

预处理器可以定义变量来存储颜色、字体和尺寸等常用值，也可以定义混合和嵌套来减少重复代码和增加代码的可读性。

/* 定义变量 */
$primary-color: #3498db;

/* 定义混合 */
@mixin button-style {
    background-color: $primary-color;
    color: white;
    padding: 10px 20px;
}

/* 使用混合 */
.button {
    @include button-style;
}

/* 嵌套 */
.container {
    width: 100%;
    .header {
        font-size: 24px;
    }
    .content {
        padding: 20px;
    }
}

13.3 CSS的模块化和组织

通过使用预处理器和模块化的设计思路，可以将CSS代码分割为多个模块，每个模块负责管理特定部分的样式，从而提高代码的可维护性和可扩展性。

/* _variables.scss */
$primary-color: #3498db;

/* _button.scss */
@mixin button-style {
    background-color: $primary-color;
    color: white;
    padding: 10px 20px;
}

/* main.scss */
@import 'variables';
@import 'button';

.button {
    @include button-style;
}

以上是CSS的一些进阶主题，通过使用媒体查询、预处理器等技术，可以更好地管理和组织CSS代码，实现更复杂和更灵活的样式效果。

14. CSS优化与性能

14.1 CSS选择器

选择器的复杂度会直接影响到页面的渲染性能。过于复杂的选择器会增加匹配元素的时间，因此应尽量避免使用过于复杂的选择器，尤其是嵌套层级过深的选择器。

/* 不推荐的复杂选择器 */
.container .header .nav ul li a {}

/* 推荐简单选择器 */
.nav-link {}

14.2 CSS压缩和合并

在生产环境中，可以对CSS文件进行压缩和合并，以减少文件大小和网络请求次数，提高页面加载速度。

# 使用压缩工具（如uglifycss、clean-css等）压缩CSS文件
uglifycss style.css > style.min.css

# 使用构建工具（如Webpack、Gulp等）合并多个CSS文件

14.3 渲染性能优化

通过优化CSS代码，可以提高页面的渲染性能，例如避免使用不必要的样式属性、减少使用昂贵的属性（如box-shadow、border-radius等）、尽量减少重绘和回流等。

/* 不推荐的样式 */
.element {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

/* 推荐优化后的样式 */
.element {
    /* 尽量避免昂贵的属性 */
    /* 减少不必要的样式属性 */
}

15. CSS最佳实践

15.1 代码规范

制定良好的CSS代码规范对于团队协作和代码维护非常重要，可以提高代码的可读性和可维护性。例如使用一致的命名规范、缩进和空格规范、注释规范等。

/* 代码注释 */
/* Header Styles */

/* 命名规范 */
.nav-menu {}

/* 缩进和空格规范 */
.container {
    padding: 20px;
    margin: 0;
}

15.2 浏览器兼容性

在开发过程中应注意跨浏览器兼容性，确保样式在不同浏览器和设备上都能正确显示。可以使用浏览器的开发者工具进行调试和测试，同时考虑使用CSS前缀和特性检测等技术来解决兼容性问题。

/* 使用浏览器前缀 */
.element {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

15.3 性能优化

除了上述提到的性能优化方法外，还可以考虑使用CSS Sprites技术来减少图片请求、使用字体图标代替图片图标、避免使用过多的嵌套和不必要的选择器等。

/* 使用CSS Sprites技术 */
.icon {
    background-image: url('sprites.png');
    background-position: -20px -40px;
    width: 20px;
    height: 20px;
}

综上所述，通过合理的CSS优化和最佳实践，可以提高页面的性能和用户体验，同时提高代码的可维护性和可读性。

星光闪闪k

关注

20
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发：（三）CSS入门

CSS
复制链接

扫一扫

专栏目录