CSS简明通俗教程

news2024/12/23 6:29:32

CSS简明通俗教程

1. CSS简介

CSS(Cascading Style Sheets,层叠样式表)是一种样式表语言。CSS用于描述HTML或XML(包括SVG或XHTML等XML方言)文档的呈现方式,它有自己的语法规则和逻辑,用于控制网页的视觉呈现。CSS的主要目的是为网页提供样式设计,包括颜色、字体、布局等,通过CSS,可以控制网页元素的外观和排版,使得网页更加美观和生动。HTML用于结构化内容,而CSS用于定义这些内容的样式和布局。

“层叠”意味着多个样式可以应用到同一元素,最终的样式是这些规则的组合结果。

可以用什么编辑和测试 CSS代码?

可以使用各种文本编辑器(如Windows的记事本、Sublime Text)、集成开发环境(IDE,如HBuilder XWebStorm)和在线代码编辑器(如 CodePen、JSFiddle 等),编辑CSS文件或代码片段。

所有现代浏览器都内置了强大的开发者工具,特别适合实时编辑和测试CSS。例如打开谷歌的Chrome或Microsoft的 Edge 浏览器的开发者工具DevTools(Windows/Linux: F12 或 Ctrl+Shift+I, Mac: Cmd+Option+I)

【虽然从严格的计算机科学角度来看,HTML和CSS可能不被归类为传统的编程语言,但在Web开发的实际应用和行业认知中,它们通常被视为“代码”的一部分。】

HTML引入CSS的方式主要有有三种:

1).内联样式(Inline Styles)

内联样式直接在HTML元素的style属性中定义CSS。如:

<p style="color: blue; font-size: 18px;">这是一个蓝色的段落,字体大小为18像素。</p>

内联样式完整而简单示例源码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">这是一个标题</h1>

    <p style="font-size: 18px; color: green;">这是一个段落,使用内联样式设置字体大小和颜色。</p>

    <div style="border: 1px solid black; padding: 20px; margin-top: 10px;">
        这是一个带边框的盒子。
    </div>
</body>
</html>

用浏览器打开运行效果:

2).内部样式表(Internal Stylesheet)

内部样式表在HTML文档的<head>部分使用<style>标签定义CSS。

示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>
    <style>
        p {
            color: green;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一个绿色的段落,字体大小为16像素。</p>
</body>
</html>

你可以用浏览器打开运行看看。

3).外部样式表(External Stylesheet)

外部样式表是最常用的方法。CSS被定义在一个单独的.css文件中,然后通过<link>标签在HTML文档中引用:<link rel="stylesheet" type="text/css" href="styles.css"> ,其中type="text/css" 在HTML5中是可选的。在 HTML 文档中的 <head> 部分使用 <link> 标签引入。这样方式可以方便地重用 CSS 样式。

示例:

首先,创建一个名为styles.css的文件:

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

然后,在HTML文件中引用这个CSS文件:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>
    <link rel="stylesheet" type="text/css" href="styles.css"> <!-- 引入外部 CSS 文件 -->
</head>
<body>
    <p>这是一个红色的段落,字体大小为20像素。</p>
</body>
</html>

你可以用浏览器打开运行看看。

2.CSS基础语法

CSS规则由两个主要部分构成:选择器和声明块。语法:

selector {
    property1: value;
    property2: value;
    /* 更多属性-值对 */
}
其中,selector是选择器名,{ }内是属性-值对。
每个CSS规则由属性和值对组成,放在英文大括号内,属性和值之间用英文冒号,属性和值对之间用英文分号隔开。用来定义特定样式。例如:
h1 {
    color: blue; /* 文本颜色 */
    font-size: 24px; /* 字体大小 */
}

CSS3的书写规范(约定

遵循这些规范可以使您的CSS代码更加清晰、一致和易于维护。在团队开发中,遵循一致的编码规范尤为重要,可以提高协作效率。

选择器使用小写字母,使用连字符(-)而不是下划线(_)或驼峰命名。

每个属性声明单独一行,属性和属性值应使用小写字母,冒号后面加一个空格,以分号结束每个声明,最后一个属性也加分号(有利于添加新属性)。

在选择器和左大括号之间加一个空格,右大括号单独一行。

使用两个或四个空格进行缩进,保持一致。属性之间用一个空行分隔,选择器与其属性之间不需要额外空行。

2.1 选择器类型

常见的如下

☆元素选择器:直接使用标签名,例如 div、p、h1。

基本形式:
element {
    property: value;
}

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        /* 选择所有的段落 */
        p {
            color: blue;
            font-size: 16px;
        }

        /* 选择所有的标题1 */
        h1 {
            color: green;
            font-size: 32px;
        }

        /* 选择所有的标题2 */
        h2 {
            color: orange;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <p>这是一段蓝色的文字。</p>
</body>
</html>

☆ 类选择器:使用.加类名,可以应用于多个元素。

基本形式:
.class-name {
    property: value;
}
示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="highlight">这段文字将被高亮显示。</p>
    <p class="highlight">这段文字也将被高亮显示。</p>
    <p>这段文字没有高亮。</p>
</body>
</html>

☆ ID选择器:使用#加ID名,只能应用于一个唯一元素,即同一页面上不应出现相同的ID。

基本形式如下:
#id-name {
    /* CSS 属性 */
    property: value;
}
示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        #myId {
            background-color: lightblue;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="myId">这是示例</div>
</body>
</html>

☆属性选择器:用于选择具有特定属性或属性值的 HTML 元素。它允许根据元素的特定属性来应用样式,而不需要依赖类或ID。

语法:
1) 选择具有指定属性的元素:
[attribute] {
    property: value;
}
2)选择具有特定属性值的元素:
[attribute="value"] {
    property: value;
}
3) 更复杂的属性选择器:
a.选择属性值以某个值开头:
[attribute^="value"] {
    property: value;
}
b.选择属性值以某个值结尾:
[attribute$="value"] {
    property: value;
}
c.选择属性值包含某个值:
[attribute*="value"] {
    property: value;
}

示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>属性选择器示例</title>
    <style>
        /* 选择所有带有title属性的元素 */
        [title] {
            border: 1px solid blue;
            padding: 5px;
            margin: 5px 0;
        }

        /* 选择所有href属性值为https的链接 */
        a[href^="https"] {
            color: green;
            font-weight: bold;
        }

        /* 选择所有href属性以.html结尾的链接 */
        a[href$=".html"] {
            color: orange;
        }

        /* 选择所有包含data特性(data-*)的元素 */
        [data-info] {
            background-color: lightyellow;
        }

        /* 选择所有class属性包含"btn"的元素 */
        [class*="btn"] {
            padding: 10px;
            background-color: lightgray;
            border: 2px solid black;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>属性选择器 示例</h1>
    <p title="这是段落">这是一段带有title属性的段落。</p>
    <a href="https://example.com">这是一个安全链接</a>
    <a href="http://example.com">这是一个不安全链接</a>
    <a href="page.html">这是一个HTML页面链接</a>
    <div data-info="一些信息">这个<div>元素包含data-info属性。</div>
    <button class="btn-primary">主要按钮</button>
    <button class="btn-secondary">次要按钮</button>
    <button class="btn">普通按钮</button>
</body>
</html>

说明(解释):

[title]:选中所有具有 title 属性的元素,给它们设置边框和内边距。

a[href^="https"]:选择所有href属性以https开头的链接,并使它们的文本颜色变为绿色,字体加粗。

a[href$=".html"]:选择所有href属性以.html结尾的链接,并给它们设置橙色文本。

[data-info]:选择所有带有data-info属性的元素,设置背景色为淡黄色。

[class*="btn"]:选择所有class属性中包含btn的元素,并应用一些按钮样式。

用浏览器运行效果:

☆ 组合选择器:结合多种条件进行选择,如后代、子代、兄弟等。

后代选择器:使用空格可以选择某个元素内的所有后代元素。例如 css div p { color: red; }

子代选择器:使用>选择器可以选择某个元素的直接子元素。例如 css div > p { color: green; }

相邻兄弟选择器:使用+选择器可以选择某个元素后面的第一个兄弟元素。例如 css h1 + p { margin-top: -10px; }

一般兄弟选择器:使用~可以选择某个元素后面的所有兄弟元素。例如,选择所有在h2后面出现的的p元素:h2 ~ p { color: green;}

通过组合选择器,可以灵活、精准地控制CSS样式的应用范围。可以组合多种选择器来提供更具体的样式。例如,选择所有div内的p元素或所有.highlight类的元素:div p, .highlight { font-weight: bold; }

简单而完整示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合选择器示例</title>
    <style>
        /* 后代选择器 */
        div p {
            color: blue;
        }

        /* 子选择器 */
        ul > li {
            list-style-type: square;
        }

        /* 相邻兄弟选择器 */
        h1 + p {
            margin-top: 0; /* 没有额外的顶部边距 */
        }

        /* 一般兄弟选择器 */
        h2 ~ p {
            color: green; /* 设置h2后所有p的颜色 */
        }

        /* 组合选择器 */
        div p, .highlight {
            font-weight: bold; /* 加粗所有特定的元素 */
        }
    </style>
</head>
<body>
    <div>
        <h1>这是一个标题</h1>
        <p>这是一个段落,应该为蓝色。</p>
    </div>
    <div>
        <h2>这是二级标题</h2>
        <p>这是另一个段落,会变为绿色,因为它在h2之后。</p>
        <p class="highlight">这是一个高亮段落,会加粗。</p>
    </div>
    <ul>
        <li>第一个列表项</li>
        <li>第二个列表项</li>
    </ul>
</body>
</html>

群组选择器

用逗号分隔多个选择器,适用于多个选择器共同应用相同样式的情况。例如:

h1, h2, h3 {
    color: blue; 
}

简单而完整示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>群组选择器示例</title>
        <style>
            /* 群组选择器 */
            h1, h2, h3 {
                color: blue;     /* 所有 h1、h2 和 h3 的文字颜色都变为蓝色 */
                font-family: Arial, sans-serif; /* 所有 h1、h2 和 h3 使用相同的字体 */
            }

            p {
                font-size: 16px; /* 所有段落字体大小为16px */
                line-height: 1.5; /* 段落行高为1.5倍字体大小 */
            }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <h2>这是一个小标题</h2>
    <h3>这是更小的小标题</h3>
    <p>这是一个段落,用于说明内容。</p>
    <p>这是另一个段落。</p>
</body>
</html>

群组选择器和组合选择器的区别
群组选择器:
使用逗号分隔多个选择器。
适用于多个选择器共享相同样式。
组合选择器:
使用空格、>、+ 和 ~ 等符号组合选择器。
根据元素的结构或层级关系来选择元素。

☆伪类选择器

伪类选择器是 CSS 中用于选择并样式化元素的工具,特定于元素的状态或结构。可以分为两大类:状态伪类和结构伪类。

1)状态伪类:

状态伪类用于定义用户与元素交互时的样式。这些伪类通常以冒号(:)开头。常见的状态伪类包括:

:hover:当鼠标悬停在元素上时应用样式。

:focus:当元素获得焦点时应用样式(例如,输入框)。

:active:当元素被激活(如点击)时应用样式。

:visited:选取已访问过的链接。

:link:选取未访问过的链接。

示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>状态伪类示例</title>
    <style>
        a {
            color: blue;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline; /* 鼠标悬停时下划线 */
        }

        input:focus {
            border-color: green; /* 输入框获得焦点时边框变绿 */
        }

        button:active {
            background-color: orange; /* 按钮被点击时背景变橙色 */
        }
    </style>
</head>
<body>

<a href="#">这是一个链接</a><br/>
<input type="text" placeholder="点击我..."><br/>
<button>点击我</button>

</body>
</html>

2)结构伪类:

结构伪类用于根据文档树(DOM 结构)中的位置或结构来选择元素。这些也以冒号(:)开头。常见的结构伪类包括:

:first-child:选取作为其父元素第一个子元素的元素。

:last-child:选取作为其父元素最后一个子元素的元素。

:nth-child(n):选取作为其父元素第n个子元素的元素,可以使用数字、关键字或公式。

示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>结构伪类示例</title>
    <style>
        li:first-child {
            font-weight: bold; /* 第一个列表项加粗 */
        }

        li:last-child {
            color: red; /* 最后一个列表项变红 */
        }

        li:nth-child(2) {
            background-color: lightgray; /* 第二个列表项背景变灰 */
        }

        li:not(:last-child) {
            border-bottom: 1px solid #ccc; /* 除最后一个外其他列表项添加底部边框 */
        }
    </style>
</head>
<body>

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>

</body>
</html>

☆伪元素选择器

伪元素选择器

伪元素选择器则是用来选择元素的特定部分或创建虚拟元素,而不直接改动 DOM 结构。伪元素通常是用来对元素内部的某些内容进行样式设置。

常见的伪元素选择器包括:

::before:在元素内容之前插入内容。

::after:在元素内容之后插入内容。

::first-line:选择元素文本的第一行。

::first-letter:选择元素文本的首字母。

示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器示例</title>
    <style>
        /* 使用 ::before 在段落前添加内容 */
        p::before {
            content: "注意: "; /* 插入文本 */
            font-weight: bold;  /* 加粗 */
            color: red;         /* 红色 */
        }

        /* 使用 ::after 在段落后添加内容 */
        p::after {
            content: " (结束)"; /* 插入文本 */
            font-style: italic;  /* 斜体 */
            color: gray;         /* 灰色 */
        }

        /* 使用 ::first-line 改变第一行样式 */
        p::first-line {
            font-weight: bold;   /* 第一行加粗 */
            color: blue;         /* 蓝色 */
        }

        /* 使用 ::first-letter 改变第一个字母样式 */
        p::first-letter {
            font-size: 2em;      /* 增大字体大小 */
            color: green;        /* 绿色 */
            float: left;         /* 左浮动,使其独立于文本流 */
            margin-right: 5px;   /* 添加右边距以分隔文字和字母 */
        }
    </style>
</head>
<body>

<p>这是一个包含多个样式效果的段落。它展示了如何使用伪元素来增强文本表现。</p>

</body>
</html>

2.2 常见CSS属性

文本相关属性

这些属性用于控制文本的外观。

例如:

body {
    color: #333;                     /* 设置文本颜色 */
    font-size: 16px;                  /* 设置字体大小 */
    font-family: Arial, sans-serif;   /* 设置字体系列 */
    text-align: center;               /* 文本对齐方式 */
    line-height: 1.5;                 /* 行高 */
    font-weight: bold;                /* 字体粗细 */
    text-decoration: underline;       /* 文本装饰 */
    text-transform: uppercase;        /* 文本转换 */
}

盒子模型及相关属性

CSS 盒子模型是一个重要的概念,它描述了网页中每个元素的布局方式。

盒子模型,所有的 HTML 元素都被视为一个盒子,这个盒子由多个部分组成:

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

内容区域(Content Box): 盒子的实际内容区域,比如文本、图像等。通过属性 width 和 height 来设置其宽度和高度。

内边距(Padding): 内容区域与边框之间的空间,使用 padding 设置。内边距是透明的,背景色会填充内边距的区域。

边框(Border): 包围在内边距和内容周围的边框,可以通过 border 属性来设置其样式、宽度和颜色。

外边距(Margin): 盒子外部的空间,使用 margin 设置。外边距也是透明的,可以用来控制元素之间的距离。

例如:

div {
    width: 300px;                     /* 宽度 */
    height: 200px;                    /* 高度 */
    padding: 20px;                    /* 内边距 */
    margin: 10px auto;                /* 外边距 */
    border: 2px solid #000;           /* 边框 */
    box-sizing: border-box;           /* 盒模型计算方式:使宽高包含内边距和边框 */
}
 

布局(Layout)及相关属性

这些属性控制元素在页面中的定位和排列方式。

CSS 布局(Layout)模型:

块级布局(Block):最基本的布局,适用于常规文档流。

行内布局(Inline):主要用于文本和小型内联元素的排列。

表格布局(Table):适用于展示表格式数据,但在现代web开发中较少使用。

浮动布局(Float):虽然最初用于文字环绕,但也常用于创建多列布局。

定位布局(Positioned):允许精确控制元素位置,适用于特定的布局需求。

弹性盒子布局(Flexbox):非常适合一维布局,如导航栏或均匀分布的内容。

网格布局(Grid):强大的二维布局工具,适合复杂的页面结构。

在实际开发中,我们通常会综合使用这些布局模型。例如,你可能会在一个使用Grid布局的页面中,对某些容器使用Flexbox,而对一些特定元素使用绝对定位。

例如:

.layout {
    display: flex;                    /* 弹性布局 */
    position: relative;               /* 相对定位 */
    float: left;                      /* 浮动 */
}

.grid-container {
    display: grid;                    /* 网格布局 */
    grid-template-columns: 1fr 1fr 1fr; /* 三列等宽布局 */
    gap: 10px;                        /* 网格间隙 */
}

背景属性

背景属性用于设置元素的背景样式。

例如:
.background {
    background-color: #f0f0f0;        /* 背景颜色 */
    background-image: url('image.jpg'); /* 背景图片 */
    background-repeat: no-repeat;     /* 背景不重复 */
    background-position: center;      /* 背景位置 */
    background-size: cover;           /* 背景尺寸 */
}
 

变形(转换)与动画属性

这些属性用于创建动态效果和动画。

transform 用于对元素进行旋转、缩放、倾斜等变形。

transition 创建平滑的状态变化效果。

@keyframes 和 animation 用于创建更复杂的动画序列。

示例 1:变形(转换,Transform)

这个示例展示如何使用 transform 属性来旋转和缩放一个方块。源码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
       <title>Transform Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: transform 0.5s; /* 过渡效果 */
        }

        .box:hover {
            transform: rotate(45deg) scale(1.5); /* 旋转45度并放大1.5倍 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

示例 2:动画(Animation)

这个示例展示如何使用 animation 属性来创建一个简单的动画,使方块在页面上移动。源码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Animation Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative; /* 需要设置为相对定位以便于动画 */
            animation: move 2s infinite alternate; /* 设置动画 */
        }

        @keyframes move {
            0% {
                left: 0; /* 起始位置 */
            }
            100% {
                left: 300px; /* 结束位置 */
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3. CSS的层叠性和优先级

CSS的层叠性

层叠性是CSS(层叠样式表)名称的由来。它指的是多个样式规则可以同时应用于一个HTML元素,最终的样式是这些规则的组合结果。

层叠的主要特点:

多个来源的样式可以合并

继承允许子元素获得父元素的某些属性

当发生冲突时,通过特定的规则决定哪个样式生效

CSS优先级和特异性(Specificity)计算

当多个规则应用于同一元素时,CSS优先级决定了哪个规则会被采用。优先级从高到低排序如下:

类型选择器(如 div、p):每个计 1 分。

类选择器(如 .class-name)和伪类(如 :hover):每个计 10 分。

ID选择器(如 #id-name):每个计 100 分。

内联样式:计 1000 分(通过 HTML 元素的 style 属性设置的样式)。

!important:强制应用样式,忽略通常的优先级计算,但应尽量少用。

注意

如果优先级相同,则后面的规则会覆盖前面的规则。

继承的样式没有优先级。

通用选择器 (*) 和组合器(如 >、+、~)对优先级没有影响。

示例、假设有以下 CSS 规则:

/* 元素选择器 */
p { color: black; }  /* 优先级: 1 */

/* 类选择器 */
.text { color: blue; }  /* 优先级: 10 */

/* ID选择器 */
#unique { color: green; }  /* 优先级: 100 */

/* 内联样式 */
<p style="color: red;">这是红色文本</p>  /* 优先级: 1000 */

/* 使用!important */
p { color: purple !important; }  /* 覆盖所有其他声明 */

/* 复杂选择器 */
body .content p.highlight { color: orange; }  /* 优先级: 1 + 10 + 1 + 10 = 22 */

在这个例子中,如果所有这些规则应用于同一个元素:

若没有 !important 时,内联样式会胜出。

因为有 !important 时,紫色 (purple) 会被应用,无论其他规则如何。

4. 响应式设计

CSS 响应式设计是一种 web 设计方法,旨在使网页在不同屏幕尺寸和设备上都能良好展示和操作。它的核心理念是根据用户的设备和屏幕尺寸动态调整页面布局和样式,这意味着同一个网页可以在桌面电脑、平板电脑和智能手机等各种设备上都能良好地展示和使用。

响应式设计的挑战,某些复杂的桌面布局可能难以在小屏幕上优雅地展示。布局一般采用Flexbox和Grid,这些CSS布局模型天生就具有响应式特性。

响应式设计的关键概念和技术:

☆视口(Viewport)
使用meta标签来控制页面在移动设备上的显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width 设置视口宽度为设备的实际宽度。initial-scale=1.0 设置初始缩放比例为1,即不缩放。
☆流动网格布局(Fluid Grid)
使用相对单位(如百分比)而不是固定单位(如像素)来定义元素大小,以便根据屏幕尺寸自适应调整布局。除了百分比,还可以使用其他相对单位如em、rem、vw、vh等。例如:width: 50%; 或 width: 50vw;
☆灵活的图片(Flexible Images)
图片可以缩放、裁剪或隐藏,以适应不同的屏幕尺寸。如:
img {
    max-width: 100%;
    height: auto;
}
对于背景图片,可以使用 background-size: cover; 或 background-size: contain;
还可以使用 picture 元素和 srcset 属性来为不同屏幕尺寸提供不同分辨率的图片。
☆媒体查询(Media Queries)
允许针对不同的设备特性(主要是屏幕宽度)应用不同的样式。如:
@media (max-width: 768px) {
    .col {
        width: 50%;
    }
}
@media (max-width: 480px) {
    .col {
        width: 100%;
    }
}
除了 max-width,还可以使用 min-width,或者两者结合使用。

下面给出一个简单完整示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式设计示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 流动网格布局 */
        .container {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
            justify-content: space-between; /* 均匀分布 */
            padding: 10px;
        }

        .col {
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            box-sizing: border-box; /* 包含内边距和边框 */
            padding: 20px;
            margin-bottom: 10px; /* 下边距 */
        }

        /* 默认宽度为33.33%(三列布局) */
        .col {
            width: calc(33.33% - 20px); /* 减去内外边距以保持间隔 */
        }

        /* 灵活的图片 */
        img {
            max-width: 100%; /* 图片最大宽度为其父元素宽度 */
            height: auto; /* 高度自动调整以保持比例 */
        }

        /* 媒体查询:当屏幕宽度小于768px时,每列占50%宽度(两列布局)*/
        @media (max-width: 768px) {
            .col {
                width: calc(50% - 20px);
            }
        }

        /* 媒体查询:当屏幕宽度小于480px时,每列占100%宽度(单列布局)*/
        @media (max-width: 480px) {
            .col {
                width: calc(100% - 20px);
            }
        }
    </style>
</head>
<body>

<div class="container">
    <div class="col">
        <h2>标题一</h2>
        <img src="https:// t7.baidu.com/it/u=3698594414,3115881545&fm=193&f=GIF" alt="示例图片1">
        <p>这是第一列内容。</p>
    </div>
    <div class="col">
        <h2>标题二</h2>
        <img src="https://t7.baidu.com/it/u=1113080330,2134066741&fm=193&f=GIF" alt="示例图片2">
        <p>这是第二列内容。</p>
    </div>
    <div class="col">
        <h2>标题三</h2>
        <img src="https://t7.baidu.com/it/u=977361633,847178935&fm=193&f=GIF" alt="示例图片3">
        <p>这是第三列内容。</p>
    </div>
</div>

</body>
</html>

说明(解释):

示例中使用了几个网页图片(地址链接)。

视口:

使用 <meta name="viewport"> 标签来设置视口,使得页面在移动设备上能够正确显示。

流动网格布局:

使用 Flexbox 创建 .container 类,并通过 flex-wrap 属性允许子元素换行。

每个 .col 元素默认设置为 calc(33.33% - 20px),这样可以实现三列布局,同时考虑到间隔。

灵活的图片:

图片使用 max-width: 100%; 和 height: auto; 确保其在不同屏幕尺寸下能够自适应缩放。

媒体查询:

当屏幕宽度小于768像素时,.col 的宽度变为 calc(50% - 20px),实现两列布局。

当屏幕宽度小于480像素时,.col 的宽度变为 calc(100% - 20px),实现单列布局。

断点(Breakpoints)是指在哪些屏幕宽度下改变网页的布局。这些宽度通常对应于常见设备的屏幕尺寸。常见的断点通常包括:

320px(小型手机)
480px(大型手机)
768px(平板)
1024px(桌面)
1200px(大屏桌面)
这些值可以根据你的具体设计需求进行调整。
/* 小型手机 */
@media (max-width: 320px) {
    /* 样式定义 */
}

/* 大型手机 */
@media (max-width: 480px) {
    /* 样式定义 */
}

/* 平板 */
@media (max-width: 768px) {
    /* 样式定义 */
}

/* 桌面 */
@media (max-width: 1024px) {
    /* 样式定义 */
}

/* 大屏桌面 */
@media (max-width: 1200px) {
    /* 样式定义 */
}

设计师和开发者可以在不同断点下为网页的各个组件定义不同的样式,以确保它们在各种设备上都能有良好的用户体验。

5.尺寸单位

HTML 和 CSS 中的尺寸单位有些相似,但它们各自的应用场景和具体语义略有不同。以下是一些常用的尺寸单位:

1)绝对长度单位

这些单位在所有设备上的大小都是固定的。

☆ 像素 (px)

最常用的单位之一,一个屏幕上的像素点。例如:

width: 100px;

☆ 英寸 (in)

1in = 96px = 2.54cm。例如:

margin: 2in;

☆ 厘米 (cm)

1cm = 37.8px = 25.2/64in。例如:

padding: 2cm;

☆ 毫米 (mm)

1mm = 1/10 厘米。例如:

border-width: 3mm;

☆ 磅 (pt)

1pt = 1/72英寸。例如:

font-size: 12pt;

☆ 派卡 (pc)

1pc = 12pt。例如:

margin: 1.5pc;

2)相对长度单位

这些单位相对于其他一些长度来定义。

☆ em

相对于元素的字体大小。例如:

padding: 2em;

☆ rem(根em)

相对于根元素的字体大小。例如:

font-size: 1.5rem;

☆ ex

相对于字符"x"的高度。但不常用,因为不同字体的 "x" 高度差异较大。。例如:

line-height: 2ex;

☆ ch

相对于数字"0"的宽度。例如:

width: 40ch;

☆ 视窗宽度单位 (vw)

1vw = 视窗宽度的1%。例如:

width: 50vw;

☆ 视窗高度单位 (vh)

1vh = 视窗高度的1%。例如:

height: 100vh;

☆ 视窗最小尺寸 (vmin),vw和vh中的较小值。例如:

font-size: 5vmin;

☆ 视窗最大尺寸 (vmax),vw和vh中的较大值。例如:

width: 50vmax;

☆百分比%单位,相对于父元素的百分比。例如:

width: 50%;

☆ 根据视窗的百分比 (vi, vb)

CSS3的新特性,相对于初始包含块的大小,在水平写作模式下vi=vw,vb=vh。例如:

width: 50vi;

☆ 大写字母高度 (cap),相对于当前字体的大写字母高度。例如:

line-height: 1.5cap;

☆ 小写字母高度 (lh),相对于行高。例如:

margin-top: 1lh;

☆ 根元素字体大小 (rlh),相对于根元素的行高。例如:

margin-bottom: 2rlh;

3)HTML特有的无单位数值

☆<table>的border属性,设置表格边框的宽度,值为0时不显示边框,大于0时显示边框。例如:

<table border="1">

☆<input> 的 maxlength 属性,设置输入字段允许的最大字符数。例如:

<input type="text" maxlength="50">

☆<textarea> 的 cols 和 rows 属性,设置文本区域的列数和行数。例如:

<textarea cols="30" rows="10"></textarea>

☆<ol> 的 start 属性,设置有序列表的起始编号。例如:

<ol start="5">

使用建议

    对于响应式设计,优先使用相对单位(如em、rem、%、vw、vh)。

    对于需要精确控制的元素,可以使用像素(px)。

    对于打印样式,可以考虑使用英寸(in)、厘米(cm)或毫米(mm)。

    对于文本大小,推荐使用em或rem以便于缩放。

不同的单位适用于不同的场景,选择合适的单位可以让你的设计更加灵活和适应性强。

<length>长度 https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

CSS 的值与单位 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units

附录、权威资料网站

层叠样式表(Cascading Style Sheets,缩写为 CSS)MDN Web Docs 社区https://developer.mozilla.org/zh-CN/docs/Web/CSS

w3schools 教程

中文https://www.w3ccoo.com/Css/ 或https://www.w3schools.cn/Css/

英文https://www.w3schools.com/Css/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2158651.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【计算机网络】传输层协议TCP

目录 一、重新理解封装和解包二、TCP协议段格式三、确认应答(ACK)机制四、超时重传机制五、连接管理机制六、理解TIME_WAIT状态和CLOSE_WAIT状态七、流量控制八、滑动窗口九、拥塞控制十、延迟应答十一、面向字节流十二、粘包问题 一、重新理解封装和解包 在网络协议栈中&…

SRS流媒体服务器在宝塔面板下的安装

目录 一、安装 1、安装Docker 2、安装srs 二、测试 1、进入后台 2、推流 3、播放测试: (1)网页 (2)拉流 之前一篇文章,我们介绍了SRS流媒体服务器在CentOS下的安装,安装流程还是比较麻烦且耗时的,其实SRS支持Docker部署,今天我们介绍在宝塔面板的Docker中部署…

leetcode第80题:删除有序数组的重复项(||)

给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。 说明&…

孤独伤感视频素材哪里找?分享热门伤感短视频素材资源网站

你是不是也经常在抖音上刷到很火的伤感视频&#xff0c;那么伤感视频素材都在哪里可以下载呢&#xff1f;作为一名从业多年的视频剪辑师&#xff0c;今天就跟大家聊聊那些可以下载伤感素材高清无水印的网站&#xff0c;如果你也在苦苦找寻伤感素材&#xff0c;快来看看吧&#…

JEDEC DDR4 SRAM standard

本文主要记录DDR4与DDR3有较大差异的点。 2.DDR4管脚 信号 类型 描述 C0,C1,C2 input chip IDchip ID仅用于通过TSV&#xff08;硅通孔&#xff09;选择3DS堆叠组件的2层、4层、8层高堆栈中的每一片&#xff0c;chip ID被视为命令代码的一部分。 ACT_n input 激活命令…

【小程序】uniapp自定义图标组件可动态更换svg颜色

组件描述 通过图标名称加载对应svg&#xff0c;size参数调整图标大小&#xff0c;color参数调整图标颜色 解决思路&#xff1a; 存svg获svg&#xff0c;对象方式正则替换svg的fill值&#xff0c;不改变源文件&#xff0c;通过base64直接加载缓存svg源文件&#xff0c;避免重…

在VMware16中安装Windows 10:完整教程

在VMware中安装Windows 10&#xff1a;完整教程 1.安装环境准备2.创建虚拟机 1.安装环境准备 1.虚拟机: VMware-workstation-full-16.2.2-19200509 2.系统镜像:win10 2.创建虚拟机 1.自定义 2.下一步 3.稍后安装系统 3.默认下一步 4.虚拟机取名和选择存放路径(按需更改…

【已解决】键盘输入数字-使用JAVA语言实现键盘输入的数字再通过快速排序算法输出

文章目录 一、前言任务描述相关知识分治策略&#xff1a;编程要求测试说明 二、具体代码实现总结 一、前言 —快速排序 任务描述 在待排序的n个元素中任取一个元素&#xff08;通常取第一个元素&#xff09;作为基准&#xff0c;把该元素放入最终位置后&#xff0c;整个数据序…

css如何设置间距

在CSS中设置间距是非常常见的需求&#xff0c;可以通过多种属性来实现。以下是一些常用的CSS属性及其用法&#xff0c;用于设置元素之间的间距&#xff1a; 内边距&#xff08;Padding&#xff09; padding 属性用于设置元素内容与元素边框之间的距离。可以分别设置四个方向的…

RTR_Chapter_6 上

第六章 纹理 表面纹理&#xff08;texture&#xff09;是指其外观和给人的视觉感受&#xff0c;就像是一幅油画的图案一样。而在计算机图形学中&#xff0c;纹理化则指的是一个过程&#xff0c;即通过使用一些图像、函数或者其他数据&#xff0c;来对每个表面位置的外观表现进行…

高德地图矢量图形点击事件生成

官方文档https://lbs.amap.com/demo/javascript-api-v2/example/overlay-editor/polylineeditor 生成矢量图形如上&#xff0c;代码如下 const markerAddof ref(false) // 绘图 function drawMark () {if (!markerAddof.value) {//限制矢量图形点击只显示一个if (cameraId.va…

Discord邀请Midjourney机器人失败?教你一招解决

最近小鲨在使用Midjourney的过程中&#xff0c;遇到一个问题&#xff1a; Discord在邀请Midjourney机器人的时候&#xff0c;报错&#xff1a; Unable to accept invite&#xff08;无法接受邀请&#xff09; 因为Midjourney目前&#xff0c;主要还是在Discord里使用。 如果D…

【docker】在IDEA工具内,远程操作服务器上的docker

一&#xff0c;配置 在服务器上&#xff0c;对docker配置如下内容&#xff1a; vi /usr/lib/systemd/system/docker.service添加如下&#xff1a; -H tcp://0.0.0.0:2375重新加载&#xff0c;并重启docker&#xff1a; #重新加载配置 systemctl daemon-reload# 重启docker …

双路创新深度学习!TCN-Transformer+LSTM多变量时间序列预测(Matlab)

双路创新深度学习&#xff01;TCN-TransformerLSTM多变量时间序列预测&#xff08;Matlab&#xff09; 目录 双路创新深度学习&#xff01;TCN-TransformerLSTM多变量时间序列预测&#xff08;Matlab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab…

肾癌的多模态预测模型-临床-组织学-基因组

目录 摘要 技术路线 ① lncRNA的预测模型 ②病理 WSI 的分类器 ③临床病理分类器 模型结果 与别的模型比较 同行评审学习 1&#xff09;使用lncRNA的原因 2&#xff09;模型临床使用意义 3&#xff09;关于截止值的使用 摘要 A multi-classifier system integrated…

51.字符串比较实例-用户登录

//已知正确的用户名和密码&#xff0c;请用程序实现模拟用户登录 //总共三次机会&#xff0c;登录之后给出相应的提示 import java.util.Scanner;public class 登录 {public static void main(String[] args) {//1.定义两个变量&#xff0c;记录正确的用户名和密码String righ…

红黑树:强大的数据结构之插入详解,附图

一、红黑树概述 红黑树是一种自平衡二叉查找树&#xff0c;具有以下性质&#xff1a;节点要么是红色要么是黑色&#xff1b;根节点是黑色&#xff1b;每个叶子节点&#xff08;NIL 节点&#xff09;是黑色&#xff1b;每个红色节点的两个子节点都是黑色&#xff1b;从任一节点到…

【已解决】ElementPlus 的 el-menu 组件如何用 js 控制展开某个子菜单,并在其他组件中控制使用呢?

文章目录 需求几次探索官网寻找线索&#xff08;解决办法&#xff09; 需求 我如何用代码来实现 ElementPlus 的菜单的展开和收缩呢&#xff1f; 几次探索 尝试通过找到节点之后&#xff0c;使用 click 事件&#xff0c;失败了 // 伪代码如下 const handleFindNodeAndClick …

【数据结构】散列(哈希)表简单介绍

散列表也叫做哈希表&#xff08;Hash table&#xff09;&#xff0c;散列表通过关键码和存储地址建立唯一确定的映射关系&#xff0c;能够快速查找到对应的元素&#xff0c;排序算法中的计数排序就是一种利用哈希进行排序的算法。 一、散列表的概念 散列表&#xff08;Hash ta…

【优选算法之前缀和】No.6--- 经典前缀和算法

文章目录 前言一、前缀和例题模板&#xff1a;1.1 【模板】前缀和1.2 【模板】⼆维前缀和1.3 寻找数组的中⼼下标1.4 除⾃⾝以外数组的乘积1.5 和为 K 的⼦数组1.6 和可被 K 整除的⼦数组1.7 连续数组1.8 矩阵区域和 前言 &#x1f467;个人主页&#xff1a;小沈YO. &#x1f6…