HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体、文本样式属性
这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性。
一、字体样式属性
CSS 字体属性主要包括:字体设置(font-family)、字号大小(font-size)、字体粗细(font-weight)、字体风格(font-style)、字体颜色(color)。
1、字体设置(font-family)
网页中常用的字体有 宋体、微软雅黑、黑体 等,例如将网页中 所有p标签的字体设置为微软雅黑,可以使用如下CSS样式代码:
p { font-family:"微软雅黑";}
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
p {font-family:"微软雅黑",“宋体”,arial;}
注意
1、英文字体不需要加双引号,如:选择器{font-family:arial;}
2、如字体中包含特殊符号必须用双引号括起来,如:选择器{font-family:"Microsoft yahei";}
3、尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
2、字号大小(font-size)
p {font-size:15px;}
该属性的值可以使用相对长度单位,也可以使用绝对长度单位。较常用,推荐使用相对长度像素单位px。
建议
1、网页一般使用14px以上的字体大小字体大小
2、尽量使用双数,因为单数情况下ie6等老式浏览器可能会出bug
3、字体粗细(font-weight)
p {font-weight:bold;}
字体加粗除了用 b 和 strong 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。
属性值
bold:字体加粗 ( 700:等于bold,如果还想更粗就加大数值)
normal:字体正常 ( 400:等于normal,如果还想更细就减小数值)
4、字体风格(font-style)
p {font-style:normal;}
字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。
属性值
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。
5、文本颜色(color)
color属性用于定义文本的颜色,其取值方式有如下3种:
1.预定义的颜色值: 如red,green,blue等。
2.十六进制: 如#FF0000,#FF6600,#29D794等。(常用)。
3.RGB代码: 如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
6、综合设置字体样式(fort)
学过了上面的几个属性之后我们发现如果一个标签这些样式都要设置的话写起来会很繁琐,代码冗余性太强,下面我们来学习一下简单的设置方式。
基本语法
选择器{font: font-style font-weight font-size/line-height font-family;}
注意
1、使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
2、其中不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则font属性将不起作用。
示例
Document
p {
font: italic 20px "微软雅黑";
}
字体连写是有顺序的
二、文本样式属性
CSS外观属性包含:行间距(line-height)、水平对齐方式(text-align)、首行缩进(text-indent)、文本的装饰(text-decoration)
1、行间距(line-height)
p {line-height: 15px;}
line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。一般情况下,行距比字号大7.8像素左右就可以了。
2、text-align:水平对齐方式
p {text-align: center;}
text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。
属性值
left:左对齐(默认值)
right:右对齐
center:居中对齐
提示:这个标签只会对块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
3、text-indent:首行缩进
p {text-indent: 2em;}
text-indent属性用于设置首行文本的缩进,1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度
4、text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
5、总结
这里针对这里所讲的做一个总结
参考
更多的可以看w3school官方文档: w3school-CSS 教程
```
你如果愿意有所作为,就必须有始有终。(4)
```
CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
HTML和CSS前端教程03-CSS文本样式
目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...
使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下:
如何利用 jQuery 修改 css 中带有 !important 的样式属性?
使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...
重温CSS之背景、文本样式
CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background- ...
CSS font-size字体大小样式属性
设置字体大小CSS单词与语法 基本语法结构: .divcss5{font-size:12px;}设置了文字大小为12px像素Font-size+字体大小数值+单位 单词:font-size语法:fon ...
CSS 选择器、字体/文本、背景
CSS的基本使用 直接写在标签内
段落
写在 style 标签内 & ...
css中 font常用的样式属性
今天我总结一下文本常用的字体样式 1.font常用样式 1)字体类型 语法:font-family: +字体类型: 如: font-family:宋体; 2)字体大小 语法:font-size: ...
CSS中如何使用背景样式属性,看这篇文章就够用了
css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...
随机推荐
机器学习笔记----四大降维方法之PCA(内带python及matlab实现)
大家看了之后,可以点一波关注或者推荐一下,以后我也会尽心尽力地写出好的文章和大家分享. 本文先导:在我们平时看NBA的时候,可能我们只关心球员是否能把球打进,而不太关心这个球的颜色,品牌,只要有3D效 ...
谈谈springMVC和Strut2的理解
关于struts2框架原理 执行流程 struts2框架的核心是一个过滤器,我们编写的action类都继承ActionSupport的接口(顶层是一个过滤器filter),用户发送请求,经过核心过滤器 ...
Socket编程基础知识
端口号常识: 端口号被从1 开始分配. 通常端口号超出255 的部分被本地主机保留为私有用途. 1到255 之间的号码被用于远程应用程序所请求的进程和网络服务. 每个网络通信循环地 ...
深入理解js——prototype原型
之前(深入理解js--一切皆是对象)中说道,函数也是一种对象.它也是属性的集合,你也可以对函数进行自定义属性.而JavaScript默认的给了函数一个属性--prototype(原型).每个函数都有一 ...
【扩展欧几里得】Bzoj 1477:青蛙的约会
Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事 ...
GDB-Dashboard-GDB可视化界面
项目地址 https://github.com/cyrus-and/gdb-dashboard 项目介绍 gdb-dashboard是一个gdb的可视化界面,可以通过web或者终端来现实可视化信息,支 ...
Struts2注解学习1
这是开博的第一篇,我希望每天把我学到的东西记录下来,成为一个知识库,方便以后的学习和分享 在项目中看到用struts2注解来做,很方便,做了一个用户登录的例子 1.加载所需jar包 commons-f ...
用myeclipse 创建maven项目时,生成的项目名中总是包含Maven Webapp
解决办法:新建Maven项目时,展开Advanced-Name template中选择[artifactId]即可
对象作为 map 的 key 时,需要重写 equals 方法和 hashCode 方法
对象作为 map 的 key 时,需要重写 hashCode 和 equals方法 如果没有重写 hashCode 方法,那么下面的代码示例会输出 null 我们首先定义一个对象:BmapPoint, ...
SQLServer之PRIMARY KEY约束
PRIMARY KEY约束添加规则 1.在表中常有一列或多列的组合,其值能唯一标识表中的每一行,这样的一列或多列成为表的主键(PrimaryKey). 2.一个表只能有一个主键,而且主键约束中的列不能 ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性相关推荐
- CSS之【字体/文本样式】
为什么要美化网页? 有效的传递页面信息 美化网页,页面漂亮,才能吸引用户 凸显页面的主题 提高用户的体验 span标签: 重点要突出的字,使用span套起来. 字体样式: front-family: ...
- css禁止鼠标复制文本的属性:user-select
禁用用户选中 user-select禁止复制页面的文本: 使用JavaScript的方式,代码如下: document.documentElement.style.webkitUserSelect=& ...
- CSS中常用的10个文本样式属性——让文本设置再无难点
一个页面中,文本样式,是必不可少的,当然css也给我们准备了很多很多很多的文本样式,以下列举了10个常用的文本样式属性及常用的属性值,掌握了,也基本满足使用了 1: text-transform 可以 ...
- 如何使用jquery修改css中带有!important的样式属性
<div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...
- CSS中border的所有样式属性
CSS中border的所有样式属性 1.solid:实线 使用方法:border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px ...
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
- CSS 字体文本样式
文章目录 CSS字体文本样式 字体样式 color 字体颜色 font-size 字体大小 font-family 字体类型 font-weight 字体粗细 font-style 字体风格 综合简写 ...
- 学习CSS的background属性及其取值(实践)
CSS的背景属性 属性 描述 可用值 background 设置背景的所有控制选项 其他背景属性可用值的集合 background-color 设置背景颜色 命名颜色.十六进制颜色等 backgrou ...
- Android自定义控件增加xml标签属性、取值等
Android中常常用到写自己的控件来满足自己的开发需求,自定义控件在布局中使用的时候,如何增加标签属性来配置控件属性,又如何在控件中使用自己添加的属性 一.在资源文件中配置标签属性 在资源文件res ...
最新文章
- arduino nano 蓝牙_探索 Golang 云原生游戏服务器开发,5 分钟上手 Nano 游戏服务器框架...
- win10 便签无法联网_便签 | win10无法搜索到wifi的解决方案
- 内网之工作组、域 分析
- 【EXCEL】VLOOKUP函数反向应用
- Flowable工作流入门
- android手机用户收入,苹果与安卓用户特征对比 iPhone用户高收入占多
- 陷阱:在 WebApp 中谨防 Singleton 错误
- 语义Web的一些概念和资源
- 一张图看懂OSPF邻接关系建立及报文类型
- windows下载和安装gcc编译器(MinGW)及其环境配置(C语言编译环境配置)
- javaweb项目的文件结构
- 多视图几何三维重建实战系列之COLMAP
- Excel表格中如何换行
- iOS @available 和 #available 的用法
- Linux找回删除文件
- SCSI——小型计算机系统接口
- Xshell7免费学生、家庭版分享
- 计算机组成原理基础知识总结
- simpread-机器人智能抓取 AI+Grasp
- 产品设计与计算机的关系,全面解读工业设计、产品设计和机械设计三者的关联和区别...
热门文章
- 【java基础】运动员和教练
- 饮水思源--浅析深度学习框架设计中的关键技术
- Kotlin Native - 原生平台 Hollo World!
- v-show和v-if有什么区别?使用场景分别是什么?
- static应用知识:代码块
- C语言十个数中求出平均值
- 浙大计算机学院博士毕业论文要求,浙大在读博士需要3篇SCI 论文才能毕业,清华博士却不作要求!...
- b5对战平台服务器位置,csgob5对战平台
- 文本中每行的部分文本格式由CamelWord的形式替换为CAMEL_WORD的形式
- LeetCode 887. 三维形体投影面积