复习css样式的第1章

news2024/11/23 23:41:16

什么是 CSS？

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

三种使用 CSS 的方法

有三种插入样式表的方法：

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

内部 CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

行内 CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

 

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  1. 行内样式（在 HTML 元素中）
  2. 外部和内部样式表（在 head 部分）
  3. 浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

2.字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

字体粗细

font-weight 属性指定字体的粗细：

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

 字体变体

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

 3.CSS 背景

在这些章节中，您将学习如下 CSS 背景属性：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color 属性指定元素的背景色。

body {
  background-color: lightblue;
}

通过 CSS，颜色通常由以下方式指定：

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

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

其他元素

您可以为任何 HTML 元素设置背景颜色：

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

 

不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

div {
  background-color: green;
  opacity: 0.3;
}

 4.CSS 边框

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 - 定义隐藏边框

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

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

 5.CSS 背景图像

CSS 背景图像

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

body {
  background-image: url("paper.gif");
}

6.字体大小

font-size 属性设置文本的大小。

在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。

请始终使用正确的 HTML 标签，例如 <h1> - <h6> 用于标题，而 <p> 仅用于段落。

font-size 值可以是绝对或相对大小。

绝对尺寸：

  • 将文本设置为指定大小
  • 不允许用户在所有浏览器中更改文本大小（可访问性不佳）
  • 当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

  • 设置相对于周围元素的大小
  • 允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

 

用 em 设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

7.CSS 链接 

设置链接样式

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

a {
  color: hotpink;
}

此外，可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

  • a:link - 正常的，未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时
/* 未被访问的链接 */
a:link {
  color: red;
}

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

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

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

 如果为多个链接状态设置样式，请遵循如下顺序规则：

  • a:hover 必须 a:link 和 a:visited 之后
  • a:active 必须在 a:hover 之后

文本装饰

text-decoration 属性主要用于从链接中删除下划线：

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

 背景色

background-color 属性可用于指定链接的背景色

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

 本篇文章就到这吧,期待博主的第二篇文章嘛,请

 

 

 

 

 

 

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

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

相关文章

RISC-V体系结构的U-Boot引导过程 第一阶段

RISC-V体系结构的U-Boot引导过程 第一阶段

RISC-V体系结构的U-Boot引导过程 第一阶段 flyfish .globl _start _start:.globl使符号对链接器可见相当于C语言中的Extern&#xff0c;声明此变量&#xff0c;并且告诉链接器此变量是全局变量&#xff0c;外部可以访问.u-boot.lds里的ENTRY(_start)也是这里的_start。 即指定…
阅读更多...
SUNet: Swin Transformer UNet for ImageDenoising

SUNet: Swin Transformer UNet for ImageDenoising

Abstract 图像恢复是一个具有挑战性的不适定问题&#xff0c;也是一个长期存在的问题。在过去的几年中&#xff0c;卷积神经网络(cnn)几乎主导了计算机视觉&#xff0c;并在不同层次的视觉任务中取得了相当大的成功&#xff0c;包括图像恢复。然而&#xff0c;最近基于Swin tr…
阅读更多...
权限验证框架之Shiro

权限验证框架之Shiro

文章目录 前言shiro 核心项目构建默认Session模式配置测试接口Realm编写权限测试无权限测试登录测试权限测试 前后端分离tokenJWTFilter重写认证修改配置 总结 前言 交替换个脑子&#xff0c;一直搞考研的东西&#xff0c;实在是无聊。所以顺便把工程上的东西&#xff0c;拿来…
阅读更多...
软件测试面试大全（全800+题）

软件测试面试大全（全800+题）

1、B/S架构和C/S架构区别 B/S 只需要有操作系统和浏览器就行&#xff0c;可以实现跨平台&#xff0c;客户端零维护&#xff0c;维护成本低&#xff0c;但是个性化能力低&#xff0c;响应速度较慢 C/S响应速度快&#xff0c;安全性强&#xff0c;一般应用于局域网中&#xff0c…
阅读更多...
C++ [STL之list模拟实现]

C++ [STL之list模拟实现]

本文已收录至《C语言和高级数据结构》专栏&#xff01; 作者&#xff1a;ARMCSKGT STL之list模拟实现 前言正文基本框架节点类迭代器类list类 迭代器类功能实现list迭代器迭代器设计思想迭代器操作设计 list类功能实现默认成员函数容量查询数据访问节点插删相关头尾插删任意位置…
阅读更多...
MySQL数据库索引的种类、创建、删除

MySQL数据库索引的种类、创建、删除

目录 一&#xff1a;MySQL 索引 1、MySQL 索引介绍 2、 索引的作用 3、索引的副作用 4、 创建索引的原则依据 二、索引的分类和创建 1、 普通索引 &#xff08;1&#xff09; 直接创建索引 &#xff08;2&#xff09; 修改表方式创建 &#xff08;3&#xff09; 创建表的…
阅读更多...
【Turfjs】几何计算，计算地理空间上点坐标的经纬度，距离，围成的闭合空间面积等工作，都可以通过Turfkjs来实现

【Turfjs】几何计算，计算地理空间上点坐标的经纬度，距离，围成的闭合空间面积等工作，都可以通过Turfkjs来实现

​​​​​​Turf.js中文网 几何计算&#xff1a; 1. 前端js就用这个 Turfjs的类库。参考网站&#xff1a; 计算两线段相交点 | Turf.js中文网 2. 后端java语言就可以用 JTS这个类库&#xff0c;参考网站&#xff1a;https://locationtech.github.io/jts/ https://github.com…
阅读更多...
MVCC和undo log

MVCC和undo log

MVCC多版本并发控制 MVCC是多版本并发控制&#xff08;Multi-Version Concurrency Control&#xff0c;简称MVCC&#xff09;&#xff0c;是MySQL中基于乐观锁理论实现隔离级别的方式&#xff0c;用于实现已提交读和可重复读隔离级别的实现&#xff0c;也经常称为多版本数据库…
阅读更多...
面向对象接口

面向对象接口

生活中大家每天都在用 USB 接口&#xff0c;那么 USB 接口与我们今天要学习的接口有什 么相同点呢&#xff1f; 在Java程序设计中的接口 接口就是规范&#xff0c;定义的是一组规则&#xff0c;体现了现实世界中“如果你是/要…则必须 能…”的思想。继承是一个"是不是&…
阅读更多...
几款GB28181流媒体平台的详细介绍和使用整理

几款GB28181流媒体平台的详细介绍和使用整理

随着监控行业国标GB28181的应用范围越来越广泛&#xff0c;成熟的GB28181接入平台越来越多&#xff0c;本文梳理一下目前各大成熟的流媒体服务器平台及实际应用效果供各位参考。 1)NTV GBS NTV GBS是一款成熟、功能完善、产品化程度很高的GB28181服务平台&#xff0c;从2022年…
阅读更多...
原点安全助力金融机构消费者个人信息保护合规

原点安全助力金融机构消费者个人信息保护合规

数字经济的发展进一步加速了金融业务与生活场景之间的融合&#xff0c;数亿民众在享受金融数字化便利服务的同时&#xff0c;也更容易遭受个人信息泄露、权益侵害等事件。在实际业务开展过程中&#xff0c;部分金融机构仍存在各种侵害消费者个人信息权益的乱象。 我国对数据安…
阅读更多...
工作经验--产品季节性分析

工作经验--产品季节性分析

产品季节性分析 1.了解季节性的重要性2.如何发现季节性产品统计方法&#xff1a;季节性指数法&#xff1a;傅里叶分析法&#xff1a;其他&#xff1a; 1.了解季节性的重要性 产品是否存在季节性变化&#xff0c;对于卖家来说相当重要&#xff0c;旺季提前备货、淡季防止库存冗余…
阅读更多...
工业无监督缺陷检测，提升缺陷检测能力，解决缺陷样品少、不平衡等问题（二）

工业无监督缺陷检测，提升缺陷检测能力，解决缺陷样品少、不平衡等问题（二）

1. 工业缺陷检测简介 在工业生产中，质量保证是一个很重要的话题， 因此在生产中细小的缺陷需要被可靠的检出。工业异常检出旨在从正常的样本中检测异常的、有缺陷的情况。工业异常检测主要面临的挑战： 难以获取大量异常样本正常样本和异常样本差异较小异常的类型不能预先得知…
阅读更多...
UNITY3D回合制游戏开发教程案例

UNITY3D回合制游戏开发教程案例

UNITY3D实现回合制游戏 &#xff0c;类似梦幻西游&#xff0c;口袋妖怪&#xff0c;阴阳师。 先上效果 UNITY3D 回合制游戏案例源码开发教程 普通攻击 AOE技能 游戏概述 回合制游戏是一种策略游戏&#xff0c;玩家需要在自己的回合内进行决策&#xff0c;然后等待对手的回合…
阅读更多...
redis学习 -- 常用指令

redis学习 -- 常用指令

应用场景 String &#xff1a;缓存&#xff0c;限流&#xff0c;计数器&#xff0c;分布式锁&#xff0c;分布式session Hash&#xff1a;存储y用户信息&#xff0c;用户主页访问量&#xff0c;组合查询 List&#xff1a;关注人时间轴列 Set&#xff1a;点赞&#xff0c;标签&…
阅读更多...
【在人间】关于网吧的记忆

【在人间】关于网吧的记忆

高考完的暑假当了两个月夜班的网管&#xff0c;挣得一台小米6&#xff0c;也见识了不少社会人。 乡镇网吧&#xff0c;店里有老虎机&#xff0c;挣的钱比网吧一晚上收入多得多&#xff0c;最狠的一次有人一下输了3000个币(一个币一块钱)&#xff0c;半夜喊老板下楼哭爹喊娘的要…
阅读更多...
Docker：启动，停止，删除

Docker：启动，停止，删除

1.启动一个容器： docker run 可选参数 镜像名 [COMMAND] [ARG...] docker run -it ubuntu /bin/bash ，启动一个使用ubuntu的docker，并使用/bin/bash做为dcoker中执行的命令。 其中818d5a1c32ac为容器ID 在宿主机上，可以通过docker ps查看容器的状态： 启动容器时常用的可选…
阅读更多...
程序员疯抢的 Java 面试宝典（PDF 版）限时开源

程序员疯抢的 Java 面试宝典（PDF 版）限时开源

Java 面试 2023 届高校毕业生规模预计 1076 万人&#xff0c;同比增加 367 万人&#xff0c;对于 23 届的同学们来说&#xff0c;今年下半年大规模进行的秋招是获得全职 Offer 的最重要的途径&#xff01;对于程序员来说&#xff0c;大家都知道校招难度相对于社招来说会有所降…
阅读更多...
解析 HashMap 源码：深入探究核心方法的实现与原理

解析 HashMap 源码：深入探究核心方法的实现与原理

前言数据结构类属性构造方法核心方法阈值&#xff1a;tableSizeFor插入元素&#xff1a;put树化&#xff1a;treeifyBin扩容&#xff1a;resize获取元素&#xff1a;get删除元素&#xff1a;remove遍历元素&#xff1a;keySet、entrySet 方法 总结 前言 一切的源头从类注释开始…
阅读更多...
【Java se】集合——迭代器（Iterator接口）的实现原理

【Java se】集合——迭代器（Iterator接口）的实现原理

目录 一、迭代器的应用——遍历集合 步骤1&#xff1a;通过集合获取迭代器 步骤2&#xff1a;使用while循环 案例展示&#xff1a; 二、跟踪源代码 #1. 通过集合获取迭代器 #2. 通过成员方法next( ) 获取每一个集合元素对象 #3. 通过成员方法hasNext( )判断是否进行下一次…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023