【网页前端】CSS样式表进阶文本样式

简介: 【网页前端】CSS样式表进阶文本样式

1. 文本对齐

text-align:用于设置文本内容的水平对齐方式,相当于 html 标签属性中的 align

准备代码:

<style> 
    .d1{
        width: 200px; 
        height: 100px; 
        background-color: lightblue; 
   } 
</style> 
    <body>
        <div class="d1">今天天气好晴朗</div> 
    </body>

常见属性值:(在以上代码基础上进行修改)

10.png

注意:

仅 块级元素 才可以完整展示对齐效果。

行级元素无法完整展示对齐效果(行级可以通过 display:block;转块级元素后,使用对齐效果)

2. 文本缩进

text-indent:用于某段文本的首行进行缩进。

image.png

例如:text-indent: 10px; 

image.png

在开发中,不建议在首行缩进处使用 px 单位,这样需要美工人员根据字体大小计算需要缩进的像素,费时费力。

所以在开发中,建议使用 em 单位进行缩进

例如:text-indent: 2em;

image.png

总结:

em 会根据当前字体大小 font-size 自动调整。

用以保证 1em 就是 1 个汉字

3. 文本装饰

text-decoration:文本的装饰效果。(通常用于给超链接修改装饰效果)

常见属性值:

image.png

超链接默认是 underline:

通过设置:text-decoration: none;

image.png

总结:文本装饰,通常用于设置超链接去除下划线。

4. 行高

line-height:用于设置元素内,每行之间的间距。(行高越大,行间距越大)

image.png

注意:行高的设置单位可以为 px,em,百分比 

image.png

小技巧:若元素中仅有一行内容,需要将内容在元素中垂直居中,仅需要 行高=元素高度 即可

image.png

5. 字体样式

在网页样式中,我们可以对字体进行样式调节。

调节字体字号、字体类型、字体粗细、字体样式等

image.png

注意:

1font-family 可以设置的字体,都是本机存在的字体。

image.png

2font-weight 也可以设置数字 100~900(除非精细化调整,否则不用数字)

400 normal700 bold

相关文章
|
3天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
74 4
|
2天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
12 4
|
2天前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
7 4
|
4天前
|
前端开发 JavaScript UED
|
3天前
|
前端开发 JavaScript 搜索推荐
前端小白也能学会的高大上技巧:如何让你的网页支持暗黑模式?
【10月更文挑战第30天】随着现代网页设计的发展,暗黑模式已成为一种流行趋势,提升了用户的阅读体验并增强了网页的适应性。本文介绍了如何通过简单的HTML、CSS和JavaScript实现网页的暗黑模式。首先,定义两种主题的CSS样式;然后,使用JavaScript实现模式切换逻辑,并自动检测系统主题。通过这些步骤,前端小白也能轻松掌握暗黑模式的实现,提升网页的用户体验和个性化水平。
13 4
|
2天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
7 2
|
3天前
|
编解码 前端开发 开发者
前端开发的必修课:如何让你的网页在不同设备上完美呈现?
【10月更文挑战第30天】随着互联网的普及,用户访问网页的设备种类繁多。前端开发者需确保网页在不同设备上完美呈现。本文介绍了一些最佳实践,包括使用响应式设计、相对单位、灵活的图片和视频、测试与优化及考虑交互设计,帮助实现跨设备兼容。
10 2
|
3天前
|
缓存 前端开发 JavaScript
前端小白也能掌握的高级技巧:如何让你的网页支持PWA特性?
【10月更文挑战第30天】随着互联网技术发展,渐进式网页应用(PWA)成为提升用户体验的重要手段。本文通过一个案例,介绍如何为在线问答社区网页应用添加PWA特性。从创建基本结构、添加Service Worker、创建Manifest文件到测试PWA特性,详细展示了每一步的操作方法。适合前端小白学习参考。
6 2
|
8天前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
44 5
|
9天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。