CSS布局基础(字体,文本,背景)

news/2024/10/18 12:33:22/

字体

常见字体设置

body {font-family: font-family: "Microsoft YaHei", Tahoma, Arial, Hiragino Sans GB,sans-serif;
}

浏览器从前到后匹配,找到可用字体结束,都没匹配上,使用浏览器默认字体

常用字号

不同浏览器默认字号可能不一样,建议手动设置通用基础字体大小,需要调整的地方再进行单独设置

font-size: 16px;

字体粗细

字体粗细可以用属性值和数字表示
属性值:

bolder, bold, normal. lighter

数字:

400 = normal ;700 = bold (数字越大,字体越粗)

样式

font-style: normal / italic

文本

颜色

color: 颜色名词 / 16进制 / rgb

对齐方式

设置盒子内,内容对齐方式,设置在父元素,作用在子元素

text-align: left/center/right

文本装饰(给文本画标线)

text-decoration: underline/overline/line-through/none(默认)

最常用于去掉 a 标签默认的下划线

文本缩进

text-indent: 2em;

常用于段落首行缩进,em 为相对单位,其大小相对于当前字体的倍数

行间距

行间距 = 上边距 + 文本高度 + 下边距
单行文本,在盒子垂直居中,可设置 行间距(行高)等于盒子高度即可

line-height: 16px;

背景

背景颜色

background-color: #555555/transparent(默认:透明);

设置透明度使用 rgba(r, g, b, [0, 1]); 最后一位 0-1 表示透明度

背景图片

background-image: none | url(http://xxxx....)

同时设置,背景颜色和背景图片时,图片覆盖颜色,但是超出图片的位置,依然以背景色为准

常用于 小的装饰图片,便于调整其位置 和 大的底层背景图

图片平铺

背景图片默认 x y轴都平铺,占满盒子

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片位置

background-position: position(top|bottom|left|right|center) | length(百分比|具体数值)

可以用方位名词和数值表示
top/bottom 为垂直方向,left/right 为水平方向,center 都可以表示

  • 一个值
    • 方位名词:根据名词语义表示一个方向的对齐方式,另一个方向上居中
    • 数值:数值表示 X 轴,Y轴居中
  • 两个值
    • 方位名词:按实际名词语义对齐
    • 数字:按 X Y 的顺序对齐
    • 名词和数字混合:第一个表示 X轴方向,第二个表示 Y轴方向

背景图片固定

background-attachment: scroll(默认) | fixed

默认,背景图片会随着页面一起滚动


http://www.ppmy.cn/news/58069.html

相关文章

【6. 激光雷达接入ROS】

欢迎大家阅读2345VOR的博客【6. 激光雷达接入ROS】🥳🥳🥳 2345VOR鹏鹏主页: 已获得CSDN《嵌入式领域优质创作者》称号👻👻👻,座右铭:脚踏实地,仰望星空&#…

维度表设计方法

第一步:选择维度或新建维度。作为维度建模的核心,在企业级数 据仓库中必须保证维度的唯一性。以淘宝商品维度为例,有且只允许有 一个维度定义。 第二步:确定主维表。此处的主维表一般是 ODS 表,直接与业务 系统同步。以…

聚观早报|苹果版余额宝四天吸金69亿;​微软拟推出私有版ChatGPT

今日要闻:苹果版余额宝四天吸金69亿元;称微软拟推出私有版ChatGPT;特斯拉上调Model 3、Model Y售价;好莱坞编剧将举行15年来首次罢工;字节跳动要在美国卖书了 苹果版余额宝四天吸金69亿元 早些时候,苹果推…

【python知识】__init__.py的来龙去脉

目录 一、说明 二、包-模块-函数结构 2.1 包、模块、函数的关系 2.2 __init__.py的角色 2.3 识别包 三、__init__.py的功效 3.1 建立一个工程包 3.2 用__init__.py简化工程包 3.3 过滤 3.4 设置顶级全局变量 四、其它更多用法 4.1 高级应用 4.3 Python 3.3 及更高…

【Python】序列类型①-列表

文章目录 1. 前言2. 列表的定义3. 列表的下标访问3.1 嵌套列表的下标 4. 列表的切片操作5. 列表的遍历5.1 使用for循环进行遍历5.2 while循环进行遍历 6.添加列表元素6.1 使用append方法添加元素6.2 使用insert方法添加元素 7. 列表的拼接7.1 使用 进行拼接7.2 使用extend 进行…

语义分割学习笔记(五)U-net网络

推荐课程:U-Net网络结构讲解(语义分割)_哔哩哔哩_bilibili 感谢博主霹雳吧啦Wz 提供视频讲解和源码支持,真乃神人也! 目录 1. U-net网络模型 2. 分割效果 3. U-Net源码解析(Pytorch版) 4. 测试结果 1. U-net网络模型 U-Net网络由两部分…

部署LVS-DR集群

引言 一、LVS-DR工作原理 LVS-DR(Linux Virtual Server Director Server)工作模式,是生产环境中最常用的一 种工作模式。 LVS-DR 模式,Director Server 作为群集的访问入口,不作为网关使用节点 Director Server 与 …

做程序员需要什么基础?自学编程难度有多大?初级程序员的工资?程序员要学

今天呢 我来彻底讲一下学编程做程序员 大家最关心的4个问题 文章比较长 耐心看完 如果你打算做程序员 这篇文章一定会建立你的信心 并且给你一个正确的学习方向 第一程序员的学历要求 如果你想去百度腾讯华为 字节这种一线大厂做程序员 那你至少要二本以上学历 最好呢还是计算机…