热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html字体加粗字号为2,【css】文字基本样式(颜色、倾斜、加粗、字号、行高、字体)...

一、字体基本样式首先我们先放置一些文字,基本所有的标签都可以设置字体样式的,这里就使用标签和来做示范啦。O泡时间到!给我O泡给我O泡&#x

一、字体基本样式

首先我们先放置一些文字,基本所有的标签都可以设置字体样式的,这里就使用标签

来做示范啦。

O泡时间到!

给我O泡给我O泡,O泡果奶OOO!

34745b5c94a9

图1 基本文字效果

注意,文字属性都是可以继承的,也就是在父元素设置后,其中的子元素都会生效。当在父元素和子元素中都有属性时,遵循就近原则。

1. 字号

字号使用font-size属性:

font-size: 10px; /*设置字号为10px*/

大家在图1可以看到,h1标签有自动放大字体的功能,那么我们不想让字体变得那么大,就可以在css中调整h1的字号大小,我们先设一个20px看一看。

Document

h1{

font-size: 20px;

}

预览后发现h1的字号果然变小了。

34745b5c94a9

图1-1 改变字号后的h1

其它标签的修改字号方式也是一样的,在Chrome浏览器中,可以显示的最小字号是12px,如果设置得更小,依然只会显示12px,其它浏览器会有所不同,在实际开发中一般都使用双数大小的字号。

2. 文字加粗

文字加粗属性使用font-weight属性:

font-weight: normal; /*设置文字不加粗*/

font-weight: bold; /*设置文字加粗*/

在图1可以看到,有的标签默认是加粗字体的,比如

,有的默认是不加粗的,比如

,现在我们修改h1为不加粗,p为加粗。

h1{

font-size: 20px;

font-weight: normal;

}

p{

font-weight: bold;

}

34745b5c94a9

图2-1 修改加粗效果

3. 文字倾斜

文字倾斜属性使用font-style属性:

font-style: italic; /*倾斜*/

font-style: normal; /*不倾斜*/

默认都是不倾斜的,我们加上倾斜属性。

h1{

font-size: 20px;

font-weight: normal;

font-style: italic;

}

p{

font-weight: bold;

font-style: italic;

}

34745b5c94a9

图3-1 倾斜效果

4. 字体

字号使用font-family属性:

font-family: '楷体';

/*设置文字为楷体,这里单引号和双引号都是可以的,字体名称一个字都不能差哦!*/

为了方便看出字体,我删掉了之前设置的一些属性,我们把

设为楷体,

设为微软雅黑:

h1{

font-family: '楷体';

font-weight: normal;

}

p{

font-family: "微软雅黑";

}

34745b5c94a9

图4-1 字体设置

注意:不是每台电脑都有全部字体,如果电脑上没有安装你写的字体,就只能显示成默认的啦。有几种字体是安全的,基本所有电脑都能显示:

宋体、楷体、黑体、微软雅黑

(苹果电脑可能没有微软雅黑哦)

其实也有可以让网页在任何电脑上都能显示字体的方法,但是可以的话尽量使用安全字体就好啦。如何避免电脑上没有我们选择的字体呢,我们可以进行多种字体设置,中间用逗号分隔,如下所示:

h1{

font-family: '未知字体','楷体';

font-weight: normal;

}

p{

font-family: "微软雅黑",'楷体';

}

如果我们写的第一个字体电脑上安装了,那就使用此种字体,如果没有安装,可以选择下一种字体,比如上面的代码,

会选择楷体,而

会选择前面的微软雅黑。

34745b5c94a9

图4-2 多种字体

5. 行高

行高使用line-height属性:

line-height: 30px; /*设置行高为30px*/

来说,我们打开Chrome浏览器,右键点击检查,在右侧找到h1标签,中间蓝色加上上下红色的部分就是行高,可以看到目前是40px。

34745b5c94a9

图5-1 40px的行高

我们把它修改成80px:

h1{

line-height: 80px;

font-family: '楷体';

font-weight: normal;

}

34745b5c94a9

图5-2 80px的行高

6. 文字颜色

文字颜色使用color属性(注意是color!没有font的哦!):

这三种表示方式都是表示红色,之后会详细写三种表示方式的含义和联系。

color:red

color: rgb(255, 0, 0);

color: #ff0000

/*设置文字为红色*/

我们简单修改一下颜色:

h1{

color:red

}

p{

color: rgb(255, 176, 176);

}

34745b5c94a9

图6-1 变色文字

二、复合文字属性

使用font属性(注意顺序,空格分离,加粗和倾斜可以省略,省略后采用默认不倾斜不加粗,颜色只能单独设置):

font:italic bold 20px/3 '楷体'; /*倾斜 加粗 字号/行高 字体*/

设置一下试试看:

h1{

font:italic bold 20px/3 '楷体';

}

p{

font:20px/3 '楷体';

}

34745b5c94a9



推荐阅读
  • C++ 开发实战:实用技巧与经验分享
    C++ 开发实战:实用技巧与经验分享 ... [详细]
  • 本文深入解析了Java面向对象编程的核心概念及其应用,重点探讨了面向对象的三大特性:封装、继承和多态。封装确保了数据的安全性和代码的可维护性;继承支持代码的重用和扩展;多态则增强了程序的灵活性和可扩展性。通过具体示例,文章详细阐述了这些特性在实际开发中的应用和优势。 ... [详细]
  • 在探讨Hibernate框架的高级特性时,缓存机制和懒加载策略是提升数据操作效率的关键要素。缓存策略能够显著减少数据库访问次数,从而提高应用性能,特别是在处理频繁访问的数据时。Hibernate提供了多层次的缓存支持,包括一级缓存和二级缓存,以满足不同场景下的需求。懒加载策略则通过按需加载关联对象,进一步优化了资源利用和响应时间。本文将深入分析这些机制的实现原理及其最佳实践。 ... [详细]
  • 技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
  • 初探性能优化:入门指南与实践技巧
    在编程领域,常有“尚未精通编码便急于优化”的声音。为了从性能优化的角度提升代码质量,本文将带领读者初步探索性能优化的基本概念与实践技巧。即使程序看似运行良好,数据处理效率仍有待提高,通过系统学习性能优化,能够帮助开发者编写更加高效、稳定的代码。文章不仅介绍了性能优化的基础知识,还提供了实用的调优方法和工具,帮助读者在实际项目中应用这些技术。 ... [详细]
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • POJ3669题目解析:基于广度优先搜索的详细解答
    POJ3669(http://poj.org/problem?id=3669)是一道典型的广度优先搜索(BFS)问题。由于陨石的降落具有时间属性,导致地图状态会随时间动态变化。因此,可以利用结构体来记录每个陨石的降落时间和位置,从而有效地进行状态更新和路径搜索。 ... [详细]
  • Java环境中Selenium Chrome驱动在大规模Web应用扩展时的性能限制分析 ... [详细]
  • C# .NET 4.1 版本大型信息化系统集成平台中的主从表事务处理标准示例
    在C# .NET 4.1版本的大型信息化系统集成平台中,本文详细介绍了主从表事务处理的标准示例。通过确保所有操作要么全部成功,要么全部失败,实现主表和关联子表的同步插入。主表插入时会返回当前生成的主键,该主键随后用于子表插入时的关联。以下是一个示例代码片段,展示了如何在一个数据库事务中同时添加角色和相关用户。 ... [详细]
  • 如何高效利用Hackbar插件提升网页调试效率
    通过合理利用Hackbar插件,可以显著提升网页调试的效率。本文介绍了如何获取并使用未包含收费功能的2.1.3版本,以确保在不升级到最新2.2.2版本的情况下,依然能够高效进行网页调试。此外,文章还提供了详细的使用技巧和常见问题解决方案,帮助开发者更好地掌握这一工具。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 七款高效编辑器与笔记工具推荐:KindEditor自动换行功能解析
    本文推荐了七款高效的编辑器与笔记工具,并详细解析了KindEditor的自动换行功能。其中,轻笔记QingBiJi是一款完全免费的记事本软件,用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外,该软件还支持多平台同步,确保用户在不同设备间无缝切换。 ... [详细]
  • 在第10天的夜灵HTML日志中,我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性,但在旧版浏览器中的支持情况并不理想。然而,目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器,我们提供了多种解决方案,以确保网站在不同环境下的兼容性和用户体验。此外,我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。 ... [详细]
  • 为了实现跨浏览器兼容的禁用文本选择功能,可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类,并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外,还可以结合JavaScript进一步增强用户体验,例如在某些交互场景下动态启用或禁用文本选择功能。 ... [详细]
  • DRF框架中Serializer反序列化验证机制详解:深入探讨Validators的应用与优化
    在DRF框架的反序列化验证机制中,除了基本的字段类型和长度校验外,还常常需要进行更为复杂的条件限制校验。通过引入`validators`模块,可以实现自定义校验逻辑,如唯一字段校验等。本文将详细探讨`validators`的使用方法及其优化策略,帮助开发者更好地理解和应用这一重要功能。 ... [详细]
author-avatar
下页楠哥_768
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有