html字体加粗字号为2,【css】文字基本样式(颜色、倾斜、加粗、字号、行高、字体)...
一、字体基本样式
首先我们先放置一些文字,基本所有的标签都可以设置字体样式的,这里就使用标签
和
来做示范啦。
O泡时间到!
给我O泡给我O泡,O泡果奶OOO!
图1 基本文字效果
注意,文字属性都是可以继承的,也就是在父元素设置后,其中的子元素都会生效。当在父元素和子元素中都有属性时,遵循就近原则。
1. 字号
字号使用font-size属性:
font-size: 10px; /*设置字号为10px*/
大家在图1可以看到,h1标签有自动放大字体的功能,那么我们不想让字体变得那么大,就可以在css中调整h1的字号大小,我们先设一个20px看一看。
Document
h1{
font-size: 20px;
}
预览后发现h1的字号果然变小了。
图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;
}
图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;
}
图3-1 倾斜效果
4. 字体
字号使用font-family属性:
font-family: '楷体';
/*设置文字为楷体,这里单引号和双引号都是可以的,字体名称一个字都不能差哦!*/
为了方便看出字体,我删掉了之前设置的一些属性,我们把
设为楷体,
设为微软雅黑:
h1{
font-family: '楷体';
font-weight: normal;
}
p{
font-family: "微软雅黑";
}
图4-1 字体设置
注意:不是每台电脑都有全部字体,如果电脑上没有安装你写的字体,就只能显示成默认的啦。有几种字体是安全的,基本所有电脑都能显示:
宋体、楷体、黑体、微软雅黑
(苹果电脑可能没有微软雅黑哦)
其实也有可以让网页在任何电脑上都能显示字体的方法,但是可以的话尽量使用安全字体就好啦。如何避免电脑上没有我们选择的字体呢,我们可以进行多种字体设置,中间用逗号分隔,如下所示:
h1{
font-family: '未知字体','楷体';
font-weight: normal;
}
p{
font-family: "微软雅黑",'楷体';
}
如果我们写的第一个字体电脑上安装了,那就使用此种字体,如果没有安装,可以选择下一种字体,比如上面的代码,
会选择楷体,而
会选择前面的微软雅黑。
图4-2 多种字体
5. 行高
行高使用line-height属性:
line-height: 30px; /*设置行高为30px*/
拿
来说,我们打开Chrome浏览器,右键点击检查,在右侧找到h1标签,中间蓝色加上上下红色的部分就是行高,可以看到目前是40px。
图5-1 40px的行高
我们把它修改成80px:
h1{
line-height: 80px;
font-family: '楷体';
font-weight: normal;
}
图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);
}
图6-1 变色文字
二、复合文字属性
使用font属性(注意顺序,空格分离,加粗和倾斜可以省略,省略后采用默认不倾斜不加粗,颜色只能单独设置):
font:italic bold 20px/3 '楷体'; /*倾斜 加粗 字号/行高 字体*/
设置一下试试看:
h1{
font:italic bold 20px/3 '楷体';
}
p{
font:20px/3 '楷体';
}
html字体加粗字号为2,【css】文字基本样式(颜色、倾斜、加粗、字号、行高、字体)...相关推荐
- CSS文字文本样式(font字体、css外观属性)
1. font字体 1.1. font-size:大小 作用:font-size属性用于设置字号. p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位. ...
- 0基础快速入门CSS技术栈(3)—图解详细阐述CSS文字文本样式及综合案例、样式调试工具、快速开发html的emment语法(附详细案例源码解析过程)
文章目录 1. CSS字体样式属性调试工具 2. font字体 2.1 font-size:大小 2.2 font-family:字体 2.2.1 CSS Unicode字体 2.3 font-wei ...
- 前端笔记(4)css,复合选择器,标签的显示模式,行高,css背景,css三大特性
css样式表/层叠样式表(2) (1)css复合选择器 后代选择器 子元素选择器 交集选择器(不常用) 并集选择器 链接伪类选择器 (2)标签的显示模式 块级元素block-level 行内元素inl ...
- CSS文本样式(中划线下划线行高之类的还有color也是)
1.颜色 2.对齐方式 3.首行缩进 4.行高 5.下划线(装饰) 6.文字跟图片对齐 1.颜色 颜色可以用 单词 表示也可以用 #RGB 表示 RGB代表的就是红绿蓝三种颜色 ...
- 百度富文本编辑器设置默认参数 行高 字体 字号 字体颜色
var ue = UE.getEditor('editor1'); ue.ready(function(){ue.execCommand('fontfamily','微软雅黑'); //字体ue.ex ...
- Css 文字省略样式(单行/多行)
版权声明:本文为 wintersmilesb101 -(个人独立博客– http://wintersmilesb101.online 欢迎访问)博主转载文章,原文地址. 效果图 上面的效果实现代码如下 ...
- 《精彩绝伦的CSS》——提示(二)无单位的行高值
二.无单位的行高值 行高值即可接受无单位的数值,也可使用带单位的行高值--尽管一般情况下不推荐这么做 那么怎么区别这两者的关系呢? 当一个元素定义了有单位的行高值,例如1em或者100%时,就会将计算 ...
- (前端)html与css,css 5、颜色、字体、字号量取方式、行高
1.颜色:color 色值:十六进制.RGB.rgba.颜色名. 十六进制写法↓ color:#ff0000; color:#ff0000;红色 实际中用工具吸取(fw,ps等) 颜色使用:背景色.边 ...
- 字体、图标字体、行高、文本样式(css)
字体.图标字体.行高.文本样式(css) 字体相关的样式 color 用来设置字体颜色 font-size (字体大小) 相关单位 em 相当于当前元素的一个font-size rem 相当于根元素的 ...
最新文章
- php将关联数组输出到前台,如何使用foreach从PHP中的关联数组输出特定数据
- VS 2010测试解读2-给测试用例做标签
- openssh rpm包_100台CentOS7要升级OpenSSH怎么办?
- netflow流量分析工具 linux,Centos5/Linux安装Nfdump和Nfsen图形界面分析netflow数据
- LeetCode62 Unique Paths
- SQL Server中Rowcount与@@Rowcount的用法 和set nocount on 也会更新@@Rowcount
- rbw设计_华为5G最新突破!我国每周增加1万个5G基站!频谱分析仪中RBW和VBW的区别...
- It's a beautiful world!
- samba部署和优化
- linux天气软件,桌面天气插件 Gis Weather 0.7.9
- UVa OJ 10361 自动作诗机
- python3读取pdf文档;pdfminer3k
- 如何把小米和计算机共享,小米随身Wifi如何让手机共享电脑文件 小米wifi共享电脑文件教程...
- 小程序账号注册完整流程
- 使用eclipse实现阿里云物联网平台数字签名(Signature)(附源代码)
- 【Python 字符视频】Python 实现将抖音视频转换成字符视频
- (个人记录向)75寸电视选购
- Verification和Validation
- RGB24 To Yuv420 C语言 +汇编实现(windows平台)
- Java 报错 restartedMain] o.s.boot.SpringApplication : Application run failed
热门文章
- 宇枫资本投资理财前应做好哪些准备
- 可执行文件的格式(ELF格式)详解
- 计算机技术与应用的知识5000字,计算机本科论文范文5000字
- 【长文+图片】HP FC MSA2000服务器瘫痪数据恢复过程
- epub怎么转txt?快来看看这篇文章
- 国开电大 传感器与测试技术 形考任务
- C++隐藏任务栏和桌面
- 函数计算机求立方根,(在excel中如何求立方根值)excel中立方根公式
- 【转】一张图学会python编程
- Springboot毕设项目基于SpringBoot+Vue的冷冻货物仓单质押系统9y3d6java+VUE+Mybatis+Maven+Mysql+sprnig)