Web前端开发笔记——第三章 CSS语言 第八节 CSS3文本文字设置

简介: Web前端开发笔记——第三章 CSS语言 第八节 CSS3文本文字设置

前言


本节中的仅支持CSS3中的新语法,比如文字的阴影、长文本的换行等等。


一、文本阴影


通过定义text-shadow来对文本进行阴影设置,其属性依次是水平阴影距离、垂直阴影距离、阴影的大小、阴影颜色。

如下代码,css代码:

p {
    font: italic bold 20px/2em '幼圆';
    text-shadow: 2px 2px 2px red;
}

html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
    <p>
        HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。
    </p>
</body>
</html>

运行结果如下:

1667095529071.jpg


二、强制换行


可以通过使用word-wrap来对长文本或URL进行强制的换行,其属性默认为normal,以及break-word。

如下代码,css代码:

p {
    height: 150px;
    width: 100px;
    border: 1px solid blue;
    font: italic bold 20px/2em '幼圆';
    text-shadow: 2px 2px 2px red;
    word-wrap: break-word;
}

html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
    <p>
        Hyper Text Markup Language
    </p>
</body>
</html>

运行结果如下:

1667095558309.jpg


三、字体设置


可以通过@font-face来使用引入自己想使用的字体,该字体在计算机上是没有的,即该字体是在@font-face中定义的。

首先在html文件的head标签内定义<style></style>标签,以@font-face开头,其中包括font-family属性和src属性,font-family定义字体的名称,src:url()中包括该字体的来源,如下:

1667095571374.jpg

而当我们要引用我们设置的字体文件时,即在标签中通过font-family后接该其字体名称即可,如下:

1667095579918.jpg



相关文章
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
43 6
|
2月前
|
中间件 Go API
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
111 1
|
2月前
|
缓存 前端开发 中间件
go语言中Web框架
【10月更文挑战第22天】
50 4
|
2月前
|
前端开发 Ruby
CSS 预编语言的区别
【10月更文挑战第24天】Sass、Less 和 Stylus 等 CSS 预编语言在语法特点、功能特性、性能表现、社区和生态系统等方面存在着不同之处。在选择使用哪种预编语言时,需要综合考虑项目需求、团队技术偏好、个人习惯等因素。你可以根据具体情况进行评估和选择,以充分发挥这些语言的优势,提高前端开发的效率和质量。
|
2月前
|
存储 前端开发 编译器
对 CSS 预编语言的理解
【10月更文挑战第24天】在前端开发领域,CSS 预编语言是一种重要的工具和技术,它们为我们提供了更强大、更灵活和更高效的方式来编写和管理 CSS 代码。以下是对 CSS 预编语言的深入理解。
|
2月前
|
前端开发 开发者
如何快速掌握 CSS 预编语言
【10月更文挑战第24天】快速掌握 CSS 预编语言需要时间和耐心,不要急于求成。通过系统的学习、实践和不断积累经验,你将逐渐熟练掌握 CSS 预编语言,并能够在实际开发中灵活运用,提高开发效率和代码质量。
|
3月前
|
人工智能 搜索推荐 API
用于企业AI搜索的Bocha Web Search API,给LLM提供联网搜索能力和长文本上下文
博查Web Search API是由博查提供的企业级互联网网页搜索API接口,允许开发者通过编程访问博查搜索引擎的搜索结果和相关信息,实现在应用程序或网站中集成搜索功能。该API支持近亿级网页内容搜索,适用于各类AI应用、RAG应用和AI Agent智能体的开发,解决数据安全、价格高昂和内容合规等问题。通过注册博查开发者账户、获取API KEY并调用API,开发者可以轻松集成搜索功能。
|
3月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
303 1
|
4月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
77 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
84 2