热门标签 | 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



推荐阅读
  • 阿里云 Aliplayer高级功能介绍(八):安全播放
    如何保障视频内容的安全,不被盗链、非法下载和传播,阿里云视频点播已经有一套完善的机 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • 2023年1月28日网络安全热点
    涵盖最新的网络安全动态,包括OpenSSH和WordPress的安全更新、VirtualBox提权漏洞、以及谷歌推出的新证书验证机制等内容。 ... [详细]
  • selenium通过JS语法操作页面元素
    做过web测试的小伙伴们都知道,web元素现在很多是JS写的,那么既然是JS写的,可以通过JS语言去操作页面,来帮助我们操作一些selenium不能覆盖的功能。问题来了我们能否通过 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • JavaScript 跨域解决方案详解
    本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
  • 本文探讨了Node.js后端开发的基础知识,包括模块源码的使用方法、前后端源码的区别以及如何在命令行环境中编译Node.js源代码。 ... [详细]
  • 在使用 Nginx 作为服务器时,发现 Chrome 能正确从缓存中读取 CSS 和 JS 文件,而 Firefox 却无法有效利用缓存,导致加载速度显著变慢。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 本文详细介绍了如何使用 CSS3 的 background-clip 和 background-origin 属性来裁剪和定位背景图片,以及如何通过 background-size 控制背景图片的尺寸。 ... [详细]
  • 开发笔记:前端之前端初识
    开发笔记:前端之前端初识 ... [详细]
  • JavaScript 中引号的多层嵌套使用技巧
    本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题,包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]
  • 解决UIScrollView自动偏移问题的方法
    本文介绍了一种有效的方法来解决在使用UIScrollView时出现的自动向下偏移的问题,通过调整特定的属性设置,可以确保滚动视图正常显示。 ... [详细]
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社区 版权所有