CSS入门笔记

目录

概述

组成

CSS 语法

常见的使用方式

CSS 优先级

CSS 选择器

1. 基本选择器

2. 属性选择器

3. 伪类选择器

4. 组合选择器

示例 

优先级

边框样式与盒子模型

单个边框

边框轮廓（Outline）

盒子模型

模型介绍

边距设置

布局示例

文本样式

基本属性

文本显示

元素显示与隐藏

文本省略（长文本省略）

概述

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页外观和布局的样式表语言。它为 HTML 提供了视觉上的美化工具，能够控制网页中元素的展示方式，包括字体、颜色、布局、间距、边框等。

  • 层叠：CSS 的“层叠”概念意味着样式规则可以以多种方式应用，它们的优先级会按一定的规则叠加生效。样式可以直接在 HTML 元素中定义，可以在页面的 <style> 标签中编写，也可以存储在外部的 CSS 文件中。
  • 样式：CSS 为网页的不同元素赋予样式，帮助开发者定义元素的外观，如字体样式、背景颜色、边距、边框等。

组成

  • 选择器：用来选择需要设置样式的 HTML 元素。比如选择 <p> 标签、选择类名为 header 的元素等。
  • 属性：指代可以设置的样式种类，如字体大小、背景颜色、边框样式等。
  • 值：属性对应的具体样式定义，比如 color 属性的值可以是 red，表示将文本颜色设置为红色。

CSS 语法

CSS 的基本语法如下：

选择器 {属性名: 属性值;属性名: 属性值;
}

示例： 

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

这段代码将所有 <p> 标签的文本颜色设置为红色，并且字体大小设置为 16 像素。

常见的使用方式

行内样式：直接在 HTML 元素中使用 style 属性定义 CSS。

<p style="color: red;">这是一个红色段落。</p>

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

<style>p {color: blue;}
</style>

外部样式表：将 CSS 代码放在单独的 .css 文件中，并通过 <link> 标签引入到 HTML 中。

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

外部样式表是推荐的使用方式，因为它使样式与内容分离，提高代码的可维护性。

CSS 优先级

CSS 的优先级规则决定了当多个样式应用于同一元素时，哪个样式将会生效。

优先级遵循以下层叠顺序，数字越大优先级越高：

  1. 浏览器默认样式：每个浏览器都有默认的样式（例如 <h1> 标签的字体通常比 <p> 标签大），但这些样式通常会被用户定义的样式覆盖。
  2. 外部样式表：使用 <link> 引入的外部样式表，通常被优先考虑，但优先级较低于内部和内联样式。
  3. 内部样式表：在 HTML 的 <head> 标签中的 <style> 定义的样式，优先级高于外部样式表。
  4. 内联样式：直接在 HTML 元素中使用 style 属性定义的样式，优先级最高。

CSS 选择器

选择器用于指定哪些 HTML 元素应用特定的样式规则。不同类型的选择器可以根据标签名、类名、ID、属性等条件选择元素。

1. 基本选择器

分类名称符号作用示例
元素选择器标签选择器标签名选择文档中指定的 HTML 标签div { }
类选择器类选择器.选择具有特定类 (class) 的元素.center { }
ID选择器ID 选择器#选择具有特定 ID (id) 的元素，ID 是唯一的#username { }
通用选择器通配符选择器*选择文档中的所有元素* { }

2. 属性选择器

属性选择器基于元素的属性和属性值选择元素。

选择器作用示例
[attr]选择具有指定属性的所有元素[type] { }
[attr=value]选择具有指定属性值的所有元素[type="text"] { }
[attr~=value]选择属性包含空格分隔值的元素[title~="example"] { }
[attr^=value]选择以某值开头的属性[href^="https"] { }
[attr$=value]选择以某值结尾的属性[src$=".jpg"] { }

3. 伪类选择器

伪类选择器用于选择特殊状态下的元素（如鼠标悬停时、选中时等）。

选择器作用示例
:hover选择鼠标悬停时的元素a:hover { }
:first-child选择作为父元素的第一个子元素的元素p:first-child { }
:nth-child(n)选择某个元素的第 n 个子元素li:nth-child(2) { }

4. 组合选择器

组合选择器允许将多个选择器组合在一起，以选择更具体的元素。

选择器名称符号作用示例
分组选择器分组选择器,同时应用相同的样式到多个选择器h1, h2, h3 { }
后代选择器后代选择器空格选择某元素的所有后代元素div p { }
子元素选择器子选择器>选择某元素的直接子元素ul > li { }

示例 

优先级

CSS 选择器的优先级可以用来决定当多个规则冲突时，哪一个会被应用。具体优先级规则如下：

优先级规则：

  1. ID选择器 (#) 的优先级最高。
  2. 类选择器 (.)、属性选择器 ([attr])、以及 伪类选择器 (:hover, :nth-child) 的优先级次之。
  3. 标签选择器（元素选择器）和 伪元素选择器（::before, ::after）的优先级更低。
  4. 通配符选择器 (*)，继承的样式，以及 浏览器默认样式 具有最低优先级。

优先级示例：

就近原则

如果两个选择器的优先级相同，则后写的选择器会覆盖之前的选择器样式，这被称为就近原则。

边框样式与盒子模型

单个边框

CSS 边框属性可以为元素设置边框，并允许定制边框的各个部分，如上边框、左边框、下边框和右边框。

单个边框

  • border：同时设置四边的边框。
  • border-top：设置上边框。
  • border-left：设置左边框。
  • border-bottom：设置下边框。
  • border-right：设置右边框。

无边框

  • 当 border 值为 none 时，边框将不显示。
div {width: 200px;height: 200px;border: none;
}

圆角边框

  • 使用 border-radius 属性可以设置盒子的圆角效果。

边框轮廓（Outline）

轮廓属性 outline 在元素边框的外部绘制一条线，用于突出显示元素。轮廓不会影响元素的实际大小或布局。

盒子模型

模型介绍

盒子模型是网页布局的基础，通过控制元素的边距、内边距、边框和内容区来进行布局和调整。元素在页面中被看作一个矩形盒子，这个盒子由以下几个部分组成：

  • element：网页中的元素。
  • padding：内边距，指元素内容与边框之间的空间。
  • border：边框，包围元素的边界线。
  • margin：外边距，元素与其他元素之间的空间。

边距设置

CSS 提供了灵活的方式来设置外边距（margin）和内边距（padding）。这些属性可以单独指定四个方向的边距（上、右、下、左），也可以使用简写形式一次设置多个方向的值。

外边距 (margin)

单独设置四个方向的外边距：

margin-top
margin-right
margin-bottom
margin-left

使用 auto 设置左右外边距，自动居中：

margin: auto;

使用简写方式：

一个值：四个方向相同的外边距。

margin: 10px; /* 所有 4 个外边距均为 10px */

两个值：第一个值应用于上下，第二个值应用于左右。

margin: 10px 5px; /* 上下为 10px，左右为 5px */

三个值：第一个值应用于上，第二个值应用于左右，第三个值应用于下。

margin: 10px 5px 15px; /* 上 10px，左右 5px，下 15px */

四个值：依次应用于上、右、下、左。

margin: 10px 5px 15px 20px; /* 上 10px，右 5px，下 15px，左 20px */

内边距 (padding)

类似于 margin，内边距也可以单独设置四个方向：

padding-top
padding-right
padding-bottom
padding-left

布局示例

文本样式

基本属性

属性名作用属性取值
width设置元素宽度值可以为像素（px）或百分比（%）
height设置元素高度值可以为像素（px）或百分比（%）
color设置文本颜色颜色名称、HEX值、RGB或HSL值，如 red，#FF0000，rgb(255,0,0)
font-family设置字体样式常用字体有 宋体、楷体、Arial、Times New Roman 等
font-size设置字体大小px（像素值，绝对大小）或 em（相对父元素的字体大小）。例如 16px 或 1.5em
text-decoration设置文本装饰underline（下划线）、overline（上划线）、line-through（删除线）、none（无线条）
text-align设置水平对齐方式left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐，使文本行宽相同）
line-height设置行高和行间距通常用 px 或 em 设置，例如 1.5em 表示行高是字体大小的1.5倍
vertical-align设置垂直对齐方式top（顶端对齐）、bottom（底端对齐）、middle（居中对齐），也可以使用百分比来相对父元素进行对齐
display设置元素显示方式inline（内联元素，无换行）、block（块级元素，独占一行）、inline-block（内联元素，但可以设置宽高）、none（隐藏元素）

文本显示

元素显示与隐藏

显示元素：通过 display 或 visibility 属性控制元素的显示。默认情况下，display 为 block 或 inline，显示元素。

隐藏元素：

  • display: none;：元素完全隐藏且不占据页面空间。
  • visibility: hidden;：元素隐藏，但仍然占据页面空间。

文本省略（长文本省略）

当文本内容超过容器的宽度时，可以使用 text-overflow 和相关的 CSS 属性使文本显示为省略号（...）。常用于单行和多行文本的情况。

单行文本省略：

.single-line {width: 200px;          /* 宽度 */white-space: nowrap;    /* 不换行 */overflow: hidden;       /* 超出部分隐藏 */text-overflow: ellipsis; /* 超出部分显示省略号 */
}

多行文本省略（使用 line-clamp 进行文本截断）：

.multi-line {width: 200px;display: -webkit-box;-webkit-line-clamp: 3;   /* 限制显示的行数 */-webkit-box-orient: vertical;overflow: hidden;        /* 超出部分隐藏 */text-overflow: ellipsis; /* 显示省略号 */
}

示例 

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机考研408-计算机网络

计算机考研408-计算机网络

【题33】下列选项中&#xff0c;不属于网络体系结构所描述的内容是&#xff08;&#xff09; A.网络的层次 B.每一层使用的协议 C.协议的内部实现细节 D.每一层必须完成的功能 解析&#xff1a; 本题考查的是网络体系结构相关的概念。 图1描述了网络的7层架构以及每一层所要完成…
阅读更多...
Python模块和包：标准库模块（os, sys, datetime, math等）②

Python模块和包：标准库模块（os, sys, datetime, math等）②

文章目录 一、os 模块1.1 获取当前工作目录1.2 列出目录内容1.3 创建和删除目录1.4 文件和目录操作 二、sys 模块2.1 获取命令行参数2.2 退出程序2.3 获取 Python 版本信息 三、datetime 模块3.1 获取当前日期和时间3.2 日期和时间的格式化3.3 日期和时间的运算 四、math 模块4…
阅读更多...
代理IP批理检测工具,支持socks5,socks4,http和https代理批量检测是否可用

代理IP批理检测工具,支持socks5,socks4,http和https代理批量检测是否可用

代理IP批理检测工具,支持socks5,socks4,http和https代理批量检测是否可用 工具使用c编写&#xff1a; 支持ipv4及ipv6代理服务器。 支持http https socks4及socks5代理的批量检测。 支持所有windows版本运行&#xff01; 导入方式支持手工选择文件及拖放文件。 导入格式支持三…
阅读更多...
【我的 PWN 学习手札】劫持 tcache_perthread_struct

【我的 PWN 学习手札】劫持 tcache_perthread_struct

目录 前言 一、tcache perthread struct 二、劫持 tcache_perthread_struct 三、测试与模板 前言 tcache 是 glibc 2.26 (ubuntu 17.10) 之后引入的一种技术&#xff0c;目的是提升堆管理的性能&#xff0c;与 fast bin 类似。 tcache 引入了两个新的结构体&#xff0c; tc…
阅读更多...
机器学习之非监督学习（四）K-means 聚类算法

机器学习之非监督学习（四）K-means 聚类算法

机器学习之非监督学习&#xff08;一&#xff09;K-means 聚类算法 0. 文章传送1.非监督学习定义2.非监督学习分类2.1 聚类 Clustering2.2 异常检测 Anomaly Detection 3.K-means聚类算法 K-means clustering案例引入算法步骤算法优化成本函数初始化方法K的选择 代码实现 4.案例…
阅读更多...
ElementUI 布局——行与列的灵活运用

ElementUI 布局——行与列的灵活运用

ElementUI 布局——行与列的灵活运用 一 . 使用 Layout 组件1.1 注册路由1.2 使用 Layout 组件 二 . 行属性2.1 栅格的间隔2.2 自定义元素标签 三 . 列属性3.1 列的偏移3.2 列的移动 在现代网页设计中&#xff0c;布局是构建用户界面的基石。Element UI 框架通过其强大的 <e…
阅读更多...
learn C++ NO.17——继承

learn C++ NO.17——继承

什么是继承&#xff1f; 用冒号 : 后跟基类名称来声明一个类是从某个基类继承而来的。继承方式可以是 public、protected 或 private&#xff0c;这决定了基类成员在子类中的访问权限。 下面通过代码简单进行一下演示. 派生类Student即子类&#xff0c;而基类Person是它的父…
阅读更多...
Ubuntu22.04安装paddle

Ubuntu22.04安装paddle

查看系统版本信息 使用命令lsb_release -a查看系统版本 rootLAIS01:~# lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.5 LTS Release: 22.04 Codename: jammy查看系统支持的cuda版本&#xff0c;使用命令nvidia-smi&#…
阅读更多...
基于paddleocr的批量图片缩放识别

基于paddleocr的批量图片缩放识别

说明 在进行ocr文字识别的时候&#xff0c;有时候我们需要使用批量测试的功能&#xff0c;但是有些图片会识别失败或者个别根本识别不出来&#xff0c;这时候我们可以通过对原图片进行缩放&#xff0c;提高图像的分辨率&#xff0c;然后再次识别&#xff0c;这样可以大大提高图…
阅读更多...
Canal+RabbitMQ数据同步环境配置

Canal+RabbitMQ数据同步环境配置

Canal 是阿里巴巴开发的开源工具&#xff0c;主要用于解析 MySQL 的 binlog 日志&#xff0c;从而实现数据同步。Canal 会模拟 MySQL 从库的协议&#xff0c;订阅主库的 binlog&#xff0c;从而获取数据库的变更信息。 将 Canal 解析到的 MySQL 数据库变更消息通过 RabbitMQ 分…
阅读更多...
青柠视频云——视频丢包（卡顿、花屏、绿屏）排查

青柠视频云——视频丢包（卡顿、花屏、绿屏）排查

一、问题说明 近期有客户反馈&#xff0c;接入平台的设备经常出来卡顿、花屏、录屏的情况&#xff0c;出现这样的场景很是尴尬。 客户是私有化部署在公网环境&#xff0c;于是我们联系客户&#xff0c;对问题进行追踪排查。 二、场景复现 我们现场情况确认的过程中&#xff0c;…
阅读更多...
蓝桥杯嵌入式客观题合集

蓝桥杯嵌入式客观题合集

十四届模拟赛二客观题 解析&#xff1a;STM32微控制器的I/O端口寄存器必须按32位字被访问 解析&#xff1a;微分电路能将三角波转换为方波&#xff1b;积分电路能将方波转换为三角波 解析&#xff1a;放大电路的本质是能量的控制与转换 解析&#xff1a;具有n个节点&#xff0c…
阅读更多...
修改Docker默认存储路径，解决系统盘占用90%+问题(修改docker root dir)

修改Docker默认存储路径，解决系统盘占用90%+问题(修改docker root dir)

随着Docker技术的广泛应用&#xff0c;它极大地简化了复杂项目的部署与维护流程&#xff0c;仅凭单一镜像即可轻松运行。然而&#xff0c;随着数据量不断增长&#xff0c;Docker的默认数据存储方式可能逐渐成为挑战&#xff0c;尤其是当默认安装于根目录&#xff08;“/”&…
阅读更多...
【雪球-注册安全分析报告-无验证方式导致安全隐患】

【雪球-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…
阅读更多...
Python酷库之旅-第三方库Pandas(104)

Python酷库之旅-第三方库Pandas(104)

目录 一、用法精讲 451、pandas.DataFrame.pow方法 451-1、语法 451-2、参数 451-3、功能 451-4、返回值 451-5、说明 451-6、用法 451-6-1、数据准备 451-6-2、代码示例 451-6-3、结果输出 452、pandas.DataFrame.dot方法 452-1、语法 452-2、参数 452-3、功能…
阅读更多...
【C++】STL简介

【C++】STL简介

&#x1f525;个人主页&#xff1a; Forcible Bug Maker &#x1f525;专栏&#xff1a;STL || C 目录 前言什么是STL&#xff1f;STL的历史STL的版本STL六大组件STL的优缺点STL的优点&#xff1a;STL的缺点&#xff1a; 如何学习STL结语 前言 本篇博客主要内容&#xff1a;ST…
阅读更多...
灾备技术演进之路 | 虚拟化无代理备份只能挂载验证和容灾吗？只能无代理恢复吗？且看科力锐升级方案

灾备技术演进之路 | 虚拟化无代理备份只能挂载验证和容灾吗？只能无代理恢复吗？且看科力锐升级方案

灾备技术演进之路系列 虚拟化备份技术演进 摆脱束缚&#xff0c;加速前行 无代理备份仅能挂载/恢复验证吗&#xff1f; ——科力锐极简验证演练无代理备份来了 无代理备份无法应对平台级故障吗&#xff1f; ——科力锐应急接管无代理备份来了 无代理备份仅能同平台挂载吗&a…
阅读更多...
Llama 3.1 Omni：颠覆性的文本与语音双输出模型

Llama 3.1 Omni：颠覆性的文本与语音双输出模型

你可能听说过不少关于语言模型的进展，但如果告诉你，有一种模型不仅能生成文本，还能同时生成语音，你会不会觉得特别酷？今天咱们就来聊聊一个相当前沿的项目——Llama 3.1 Omni模型。这个模型打破了传统的文字生成边界，直接让文本和语音同时输出，实现了真正的"多模态…
阅读更多...
无人机之AI跟踪篇

无人机之AI跟踪篇

无人机的AI识别技术依托于计算机视觉和深度学习技术&#xff0c;实现了对目标的快速精准识别&#xff0c;在多个领域展现出了巨大的应用潜力和价值。以下是对无人机AI识别技术的详细解析&#xff1a; 一、无人机AI识别算法的基础原理 无人机AI识别算法主要基于先进的计算机视觉…
阅读更多...
轻松解决Jetpack Compose中的一些痛点问题

轻松解决Jetpack Compose中的一些痛点问题

公众号「稀有猿诉」 原文链接 轻松解决Jetpack Compose中的一些痛点问题 暑去秋来&#xff0c;金桂飘香&#xff0c;不知不觉中我们已经练完了『降Compose十八掌』&#xff0c;相信通过这一系列文章能够对Jetpack Compose有足够的理解&#xff0c;并能在实际项目中进行运…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发