前端基础(五)_CSS文本文字属性、背景颜色属性

简介: 本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。

CSS文本文字属性

1、文字属性

1.1、字号 font-size:38px; 浏览器默认16px;
1.2、字体 font-family:
如果字体名称包含空格,字体名称上加引号;
中文字体名称加引号;
多个字体名称作为一个回退系统来保存,如果第一个不被浏览器支持,则尝试下一个,多个字体之间用逗号隔开;
中英文混排的文字,英文字体排在中文字体的前面;

Arial,"Times New Roman","微软雅黑"
AI 代码解读

2、文字加粗

文字加粗 范围100~900
font-weight:normal; 正常 相当于400
font-weight:bold; 加粗 相当于700
font-weight:900;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    * {
    
      padding: 0;
      margin: 0;
    }

    .box1 {
    
      font-weight: 300;
    }

    .box2 {
    
      font-weight: 700;
    }

    .box3 {
    
      font-weight: 900;
    }
  </style>
</head>

<body>
  <div class="box1">1111</div>
  <div class="box2">2222</div>
  <div class="box3">3333</div>
</body>

</html>
AI 代码解读

在这里插入图片描述
box2 是 700
box3 是 900
但是在页面上看着是差不多的,这是因为和使用的字体是有关系的。

3、文字样式

font-style:normal;正常
font-style:italic;倾斜

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    * {
    
      padding: 0;
      margin: 0;
    }

    .box1 {
    
      font-weight: 300;
      font-style: normal;
    }

    .box2 {
    
      font-weight: 700;
      font-style: italic;
    }
  </style>
</head>

<body>
  <div class="box1">1111</div>
  <div class="box2">2222</div>
</body>

</html>
AI 代码解读

在这里插入图片描述

4、文字行高

line-height:50px;

4.1、文字设置了行高后,会在行高的范围内垂直居中,但是行高撑不起盒高。
4.2、当行高没有设置单位 表示字号的倍数;

font-size:20px;
line-height:2;  == 40px
AI 代码解读
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    * {
    
      padding: 0;
      margin: 0;
    }

    .box2 {
    
      font-weight: 700;
      font-style: italic;
      height: 50px;
      line-height: 50px;
    }
  </style>
</head>

<body>
  <div class="box2">2222</div>
</body>

</html>
AI 代码解读

在这里插入图片描述
2222垂直居中在了box2

5、font属性

font:[font-style][font-weight] font-size [/line-height] font-family
AI 代码解读

其实就是上面几个属性的总和。
注意:字号 和 字体一定要有,字号后面跟行高需要加/

font:italic bold 12px/30px Georgia,serif;
AI 代码解读

6、color属性

color:属性值
属性值可以为:transparent、十六进制色值、rgb、rgba
transparent:透明
十六进制色值:由0-9 a-f组成,比如红色 #ff0000 这个可以简写 #f00
rgb:r red ,g green, b blue ,取值范围0-255,比如:color: rgb(50, 50, 50);
rgba:r red ,g green, b blue ,取值范围0-255,a alpha 透明度 取值范围0-1 ,0完全透明,1 完全不透明,比如:color: rgba(50, 50, 50,.5);

7、text-align属性
文本水平对齐方式,设置给块级元素、图片的水平对齐
text-align :left 默认 左对齐
text-align:center 居中对齐
text-align:right 右对齐

使用text-align和line-height配合可以实现文字垂直水平居中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    * {
    
      padding: 0;
      margin: 0;
    }

    .box2 {
    
      height: 50px;
      width: 100px;
      line-height: 50px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="box2">2222</div>
</body>

</html>
AI 代码解读

在这里插入图片描述
7、text-decoration属性

文本装饰线
text-decoration:none 去掉文本装饰线
text-decoration:underline 下划线
text-decoration:overline 上划线
text-decoration:line-through 删除线

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    * {
    
      padding: 0;
      margin: 0;
    }

    div {
    
      margin-bottom: 20px;
      height: 30px;
    }
  </style>
</head>

<body>
  <div style="text-decoration:none">去掉文本装饰线</div>
  <div style="text-decoration:underline">下划线</div>
  <div style="text-decoration:overline">上划线</div>
  <div style="text-decoration:line-through">删除线</div>
</body>

</html>
AI 代码解读

在这里插入图片描述
8、text-indent属性

文本块的首行缩进 正值向右 负值向左
单位 px em(字符宽度的倍数)、百分比(相对于父级元素的宽度百分之多少)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    * {
    
      padding: 0;
      margin: 0;
    }

    div {
    
      width: 200px;
    }

    p {
    
      text-indent: 2em;
    }
  </style>
</head>

<body>
  <div>
    <p>抱怨是这个世界上最无用的东西。与其怨天尤人,不如付出切实的行动,去改变困扰你的糟糕状况。</p>
  </div>
</body>

</html>
AI 代码解读

在这里插入图片描述

背景颜色属性

background-color:属性 背景颜色 默认值 transparent透明
可以为 颜色关键词、十六进制色值、rgb、rgba
背景颜色可以覆盖到内容区、padding区、border区,单纯作为背景、不占位

background-image:属性 背景图片
background-image:url(图片的路径); url里面引号可有可无
background-image:none;表示无背景图片,默认值;

background-repeat:属性 背景图是否重复
background-repeat:repeat 默认值 在水平方向何竖直方向重复
background-repeat:repeat-x; 背景图只有一行 水平方向重复
background-repeat:repeat-y; 背景图只有一列 竖直方向重复
background-repeat:no-repeat; 背景图不重复 只有一张背景图

background-position:属性 背景图的位置
语法:background-position:x(水平) y(竖直);
属性值:
关键词:left | center | right top | center | bottom
保证不能超过两个关键词,一个水平方向,一个垂直方向;
如果只出现一个关键词,另一个关键词默认center
长度值:图像的左上角0px 0px ,负值向盒外,正值向盒内
百分比:图像在左上角 0% 0%,右下角 100% 100%
如果只出现一个百分比数值,这个值作为水平方向的值,竖直默认 center

background属性 简写
background:background-color background-image background-repeat background-position;
颜色 图片 才能有 重复与不重复 背景定位
注意:如果某一个属性不需要可以省略

目录
打赏
0
3
3
0
95
分享
相关文章
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
9天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
27 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
54 1
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
69 6
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
72 2
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
131 1
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
166 1

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    8
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    34
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    1
  • 4
    详解智能编码在前端研发的创新应用
    14
  • 5
    巧用通义灵码,提升前端研发效率
    18
  • 6
    智能编码在前端研发的创新应用
    34
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    7
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    28
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    8
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    19
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等