【2024】前端学习笔记7-颜色-位置-字体设置

学习笔记

  • 1.定义:css
  • 2.颜色:color
  • 3.字体相关属性:font
    • 3.1.字体大小:font-size
    • 3.2.字体风格:font - style
    • 3.3.字体粗细:font - weight
    • 3.4.字体族:font - family
  • 4.位置:text-align

1.定义:css

CSS(Cascading Style Sheets)即层叠样式表。

CSS 是一种样式表语言,用于描述 HTML(超文本标记语言)或 XML(可扩展标记语言)文档的呈现方式。它通过选择器来定位 HTML 或 XML 元素,并为这些元素定义各种样式属性,如字体、颜色、布局、间距等。

2.颜色:color

通过color可以设置字体颜色。可以直接使用英文单词,也可使用16进制表示。

示例:

<body>
    <h2>行内样式表</h2>
    <p>
        我有一段文字,可以设置不同的颜色:
        <span style="color: red;">我是红色</span>
        <span style="color: green;">我是绿色</span>
        <span style="color: blue;">我是蓝色</span>
    </p>
</body>

展示效果:

在这里插入图片描述

3.字体相关属性:font

3.1.字体大小:font-size

用于设置文本的字体大小,有多种单位选择:

  • px:绝对值,像素
  • %:相对单位,相对于父元素字体大小的百分比
  • rem:相对单位,相对于根元素(元素)的字体大小来计算的

示例:

<body>
    <h2>设置文字大小</h2>
    <p>
        我有一段文字,可以设置不同的文字大小:
        <br/>
        <span style="color: red; font-size: 20px;">我是红色,字体大小为20px</span>
        <br/>
        <span style="color: green; font-size: 150%;">我是绿色,字体大小为150%</span>
        <br/>
        <span style="color: blue; font-size: 2rem;">我是蓝色,字体大小为2rem</span>
    </p>
</body>

展示效果:

在这里插入图片描述

3.2.字体风格:font - style

可以使用font-style设置字体的样式:

  • normal:正常字体,默认
  • italic:斜体

示例:

<body>
    <p>
        <span style="font-style: italic;">我的字体样式为斜体</span>
        <br/>
        <span style="font-style: normal;">我的字体样式为正常</span>
    </p>
</body>

展示效果:

在这里插入图片描述

3.3.字体粗细:font - weight

使用font-weight可以设置字体的粗细,默认为normal(数字为400),还可以设置为粗体bold(数字为700);也可以设置为细体lighter;可用100-700数值表示,数字越大字体越粗。

示例:

<body>
    <p>
        <span style="font-weight: normal;">我的字体样式为正常</span>
        <br/>
        <span style="font-weight: bold;">我的字体样式为粗体</span>
        <br/>
        <span style="font-weight: lighter;">我的字体样式为细体</span>
    </p>
</body>

展示效果:

在这里插入图片描述

3.4.字体族:font - family

使用font-family可以设置字体。

示例:

<body>
    <p>
        <span style="font-family: Verdana, Geneva, Tahoma, sans-serif;">我的字体是这样的</span>
        <br/>
        <span style="font-family: 'Times New Roman', Times, serif;">我的字体是这样的</span>
        <br/>
        <span style="font-family: 'Courier New', Courier, monospace;">我的字体是这样的</span>
    </p>
</body>

展示效果:

在这里插入图片描述

4.位置:text-align

text - align是 CSS 中的一个属性,用于设置文本内容在元素内部的水平对齐方式。它可以应用于块级元素(如<div>、<p>等)或者表格单元格(<td>、<th>)等元素。

默认值为left,从左到右的书写习惯;除此之外还有其他属性:

属性含义
left
right
center居中
justify两端对齐

示例:

<body>
    <div style="background-color: aqua; width: 200px; height: 150px; ;">
        <p style="text-align: left;">我在左边</p>
        <p style="text-align: center;">我在中间</p>
        <p style="text-align: right;">我在右边</p>
    </div>
</body>

展示效果:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

K8s容器运行时,移除Dockershim后存在哪些疑惑?

K8s容器运行时&#xff0c;移除Dockershim后存在哪些疑惑&#xff1f; 大家好&#xff0c;我是秋意零。 K8s版本截止目前&#xff08;24/09&#xff09;已经发布到了1.31.x版本。早在K8s版本从1.24.x起&#xff08;22/05&#xff09;&#xff0c;默认的容器运行时就不再是Doc…

最新Kali Linux超详细安装教程(附镜像包)

一、镜像下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1BfiyAMW6E1u9fhfyv8oH5Q 提取码&#xff1a;tft5 二、配置虚拟机 这里我们以最新的vm17.5为例。进行配置 1.创建新的虚拟机&#xff1a;选择自定义 2.下一步 3.选择稍后安装操作系统 4.选择Debian版本 因…

02_RabbitMQ消息丢失解决方案及死信队列

一、数据丢失 第一种&#xff1a;生产者弄丢了数据。生产者将数据发送到 RabbitMQ 的时候&#xff0c;可能数据就在半路给搞丢了&#xff0c;因为网络问题&#xff0c;都有可能。 第二种&#xff1a;RabbitMQ 弄丢了数据。MQ还没有持久化自己挂了。 第三种&#xff1a;消费端…

Vue3新组件transition(动画过渡)

transition组件&#xff1a;控制V-if与V-show的显示与隐藏动画 1.基本使用 <template><div><button click"falg !falg">切换</button><transition name"fade" :enter-to-class"etc"><div v-if"falg&quo…

为什么git有些commit记录,只有git reflog可以看到,git log看不到?

文章目录 原因分析1. git log 只能显示 **可达的** 提交2. git reflog 记录所有引用的变更 常见导致 git log 看不到提交的原因1. git reset 操作2. git rebase 操作3. 分支删除4. git commit --amend5. 垃圾回收&#xff08;GC&#xff09;* 如何恢复 git log 看不到的提交&am…

数据库系统基础概述

文章目录 前言一、数据库基础概念 1.数据库系统的组成2.数据模型3.数据库的体系结构二、MySQL数据库 1.了解MySQL2.MySQL的特性3.MySQL的应用场景总结 前言 MySQL数据库是一款完全免费的产品&#xff0c;用户可以直接从网上下载使用&#xff0c;不用花费任何费用。这点对于初学…

多语言长文本 AI 关键字提取 API 数据接口

多语言长文本 AI 关键字提取 API 数据接口 AI / 文本 专有模型极速提取 多语言长文本 / 实时语料库。 1. 产品功能 支持长文本关键词提取&#xff1b;多语言关键词识别&#xff1b;基于 AI 模型&#xff0c;提取精准关键词&#xff1b;全接口支持 HTTPS&#xff08;TLS v1.0 …

CentOS7更换阿里云yum更新源

目前CentOS内置的更新安装源经常报错无法更新&#xff0c;或者速度不够理想&#xff0c;这个时候更换国内的镜像源就是一个不错的选择。 备份内置更新源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 下载阿里云repo源&#xff08;需要系统…

后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus(0916)

接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835 接口根路径&#xff1a; http://big-event-vue-api-t.itheima.net 本项目的技术栈 本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus http:/…

LeetCode 每周算法 6(图论、回溯)

LeetCode 每周算法 6&#xff08;图论、回溯&#xff09; 图论算法&#xff1a; class Solution: def dfs(self, grid: List[List[str]], r: int, c: int) -> None: """ 深度优先搜索函数&#xff0c;用于遍历并标记与当前位置(r, c)相连的所有陆地&…

HTML讲解(二)head部分

目录 1. 2.的使用 2.1 charset 2.2 name 2.2.1 describe关键字 2.2.2 keywords关键字 2.2.3 author关键字 2.2.4 http-equiv 小心&#xff01;VS2022不可直接接触&#xff0c;否则&#xff01;没这个必要&#xff0c;方源面色淡然一把抓住&#xff01;顷刻炼化&#x…

暴力枚举算法

《啊哈&#xff01;算法》学习笔记 本博客的题目仅用暴力枚举&#xff0c;并不一定是最好的解法&#xff0c;主要是了解枚举算法 例题一&#xff1a;两方框奥数 在两个方框内填入相同的数字使得等式成立&#xff1a; 代码如下&#xff1a; for(i1;i<9;i) {if((i*103)*652…

yolov8模型在Xray图像中关键点检测识别中的应用【代码+数据集+python环境+GUI系统】

yolov8模型在X yolov8模型在Xray图像中关键点检测识别中的应用【代码数据集python环境GUI系统】 1.背景意义 X射线是一种波长极短、穿透能力极强的电磁波。当X射线穿透物体时&#xff0c;不同密度和厚度的物质会吸收不同程度的X射线&#xff0c;从而在接收端产生不同强度的信号…

Python办公自动化教程(003):PDF的加密

【1】代码 from PyPDF2 import PdfReader, PdfWriter# 读取PDF文件 pdf_reader PdfReader(./file/Python教程_1.pdf) pdf_writer PdfWriter()# 对第1页进行加密 page pdf_reader.pages[0]pdf_writer.add_page(page) # 设置密码 pdf_writer.encrypt(3535)with open(./file/P…

Google 扩展 Chrome 安全和隐私功能

过去一周&#xff0c;谷歌一直在推出新特性和功能&#xff0c;旨在让用户在 Chrome 上的桌面体验更加安全&#xff0c;最新的举措是扩展在多个设备上保存密钥的功能。 到目前为止&#xff0c;Chrome 网络用户只能将密钥保存到 Android 上的 Google 密码管理器&#xff0c;然后…

240912-设置WSL中的Ollama可在局域网访问

A. 最终效果 B. 设置Ollama&#xff08;前提&#xff09; sudo vim /etc/systemd/system/ollama.service[Unit] DescriptionOllama Service Afternetwork-online.target[Service] ExecStart/usr/bin/ollama serve Userollama Groupollama Restartalways RestartSec3 Environme…

基于SpringBoot+Vue的时尚美妆电商网站系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目源码、Python精…

STM32 单片机最小系统全解析

STM32 单片机最小系统全解析 本文详细介绍了 STM32 单片机最小系统&#xff0c;包括其各个组成部分及设计要点与注意事项。STM32 最小系统在嵌入式开发中至关重要&#xff0c;由电源、时钟、复位、调试接口和启动电路等组成。 在电源电路方面&#xff0c;采用 3.3V 直流电源供…

(已解决)vscode如何传入argparse参数来调试/运行python程序

文章目录 前言调试传入参数运行传入参数延申 前言 以前&#xff0c;我都是用Pycharm专业版的&#xff0c;由于其好像在外网的时候&#xff0c;不能够通过VPN来连接内网服务器&#xff0c;我就改用了vscode。改用了之后&#xff0c;遇到一个问题&#xff0c;调试或者运行python…

解密.bixi、.baxia勒索病毒:如何安全恢复被加密数据

导言 在数字化时代&#xff0c;数据安全已成为个人和企业面临的重大挑战之一。随着网络攻击手段的不断演进&#xff0c;勒索病毒的出现尤为引人关注。其中&#xff0c;.bixi、.baxia勒索病毒是一种新型的恶意软件&#xff0c;它通过加密用户的重要文件&#xff0c;迫使受害者支…