CSS字体属性

最新推荐文章于 2021-06-18 15:44:01 发布
最新推荐文章于 2021-06-18 15:44:01 发布
阅读量677 收藏
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hraceo/article/details/8843022
版权

字体名称属性(font-family)

这个属性设定字体名称，如Arial, Tahoma, Courier等。例句如下：

.s1 {font-family:Arial}

演示示例

字体大小属性(font-size)

这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px(pixel)。例句如下：

.s2 {font-size:16pt}

演示示例

字体风格属性(font-style)

这个属性有三个值可选：normal, italic, oblique。normal是缺省值，italic, oblique都是斜体显示。例句如下：

.s1 {font-sytle:italic}

演示示例

字体浓淡属性(font-weight)

这个属性常用值是normal和bold，normal是缺省值。例句如下：

<p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。<p>

演示示例

字体变量属性(font-variant)

这个属性有两个值，normal和small-caps，normal是缺省值。small-caps表示小的大写字体。例句如下：

 .s1 {font-variant:small-caps}

演示示例

字体属性(font)

这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。例句如下：

.s1 {font:italic normal bold 11pt arial}

演示示例

字体颜色(color)

字体颜色用CSS中的color属性来表示。

文本对齐属性(text-align)

这个属性用来设定文本的对齐方式。有以下值：

  • left (居左，缺省值)
  • right (居右)
  • center (居中)
  • justify (两端对齐)

示例代码如下：

.p2 {text-align:right}

演示示例

文本修饰属性(text-decoration)

这个属性主要设定文本划线的属性。有以下值：

  • none (无，缺省值)
  • underline (下划线)
  • overline (上划线)
  • line-through (当中划线)

示例代码如下：

.p2 {text-decoration: underline}

演示示例

文本缩进属性(text-indent)

这个属性设定文本首行缩进。其值有以下设定方法：

  • length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
  • percentage (百分比，相当于父对象宽度的百分比)

示例代码如下：

.p1 {text-indent: 8mm}

演示示例

行高属性(line-height)

这个属性设定每行之间的距离。其值有以下设定方法：

  • normal (缺省值)
  • length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))
  • percentage (百分比，相当于父对象高度的百分比)

示例代码如下：

.p1 {line-height:1cm}

演示示例

字间距属性(letter-spacing)

这个属性用来设定字符之间的距离。

  • normal (缺省值)
  • length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))

示例代码如下：

.p1 {letter-spacing: 3mm}

演示示例

颜色属性(color)

用颜色属性(color)可以改变文本的字体颜色。字体颜色代码。示例代码如下：

.p1{color:gray}

演示示例

在HTML里，颜色有两种表示方式。一种是用颜色名称表示，比如blue表示蓝色。另外一种是用16进制的数值表示RGB的颜色值。RGB是Red，Green，Blue意思，RGB每个原色的最小值是0，最大值是255，如果换算成16进制表示，就是(#00)，(#FF)。比如白色的RGB(255,255,255)，就用#FFFFFF表示；还有黑色的RGB(0,0,0)，就用#000000表示。

注：在W3C制定的HTML 4.0标准中，只有16种颜色可以用颜色名称表示(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)，其它的颜色都要用16进制RGB颜色值表示。

当然，现在的浏览器支持更多的颜色名称。不过为保险起见，建议你还是采用16进制RGB颜色值来表示颜色。并且在值前加上#这个符号。

为了方便大家找到合适的颜色，我们在这里列了一些颜色说明，以供大家参考，不妨作为一种速查工具。

Web安全颜色

以前，很多电脑显示器最多支持256色，因此出现了216种Web安全颜色，以保证网页的颜色能够正确显示。

那为什么不是256种Web安全颜色呢？因为Microsoft和Mac操作系统有40种不同的系统保留颜色。

以下就是216种Web安全颜色：

#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900#009933#009966#009999#0099CC#0099FF
#00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF
#00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900#339933 #339966 #339999 #3399CC #3399FF
#33CC00#33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00#33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

微软支持的颜色名称

下面是微软IE4.0以上都支持的颜色名称：

aliceblue
(#F0F8FF)		antiquewhite
(#FAEBD7)		aqua
(#00FFFF)		aquamarine
(#7FFFD4)
azure
(#F0FFFF)		beige
(#F5F5DC)		bisque
(#FFE4C4)		 black
(#000000)
blanchedalmond
(#FFEBCD)		blue
(#0000FF)		blueviolet
(#8A2BE2)		brown
(#A52A2A)
burlywood
(#DEB887)		cadetblue
(#5F9EA0)		chartreuse
(#7FFF00)		chocolate
(#D2691E)
coral
(#FF7F50)		cornflowerblue
(#6495ED)		cornsilk
(#FFF8DC)		crimson
(#DC143C)
cyan
(#00FFFF)		darkblue
(#00008B)		darkcyan
(#008B8B)		darkgoldenrod
(#B8860B)
darkgray
(#A9A9A9)		darkgreen
(#006400)		darkkhaki
(#BDB76B)		darkmagenta
(#8B008B)
darkolivegreen
(#556B2F)		darkorange
(#FF8C00)		darkorchid
(#9932CC)		darkred
(#8B0000)
darksalmon
(#E9967A)		darkseagreen
(#8FBC8B)		darkslateblue
(#483D8B)		darkslategray
(#2F4F4F)
darkturquoise
(#00CED1)		darkviolet
(#9400D3)		deeppink
(#FF1493)		deepskyblue
(#00BFFF)
dimgray
(#696969)		dodgerblue
(#1E90FF)		firebrick
(#B22222)		floralwhite
(#FFFAF0)
forestgreen
(#228B22)		fuchsia
(#FF00FF)		gainsboro
(#DCDCDC)		ghostwhite
(#F8F8FF)
gold
(#FFD700)		goldenrod
(#DAA520)		gray
(#808080)		green
(#008000)
greenyellow
(#ADFF2F)		honeydew
(#F0FFF0)		hotpink
(#FF69B4)		indianred
(#CD5C5C)
indigo
(#4B0082)		ivory
(#FFFFF0)		khaki
(#F0E68C)		lavender
(#E6E6FA)
lavenderblush
(#FFF0F5)		lawngreen
(#7CFC00)		lemonchiffon
(#FFFACD)		lightblue
(#ADD8E6)
lightcoral
(#F08080)		lightcyan
(#E0FFFF)		lightgoldenrodyellow
(#FAFAD2)		lightgreen
(#90EE90)
lightgrey
(#D3D3D3)		lightpink
(#FFB6C1)		lightsalmon
(#FFA07A)		lightseagreen
(#20B2AA)
lightskyblue
(#87CEFA)		lightslategray
(#778899)		lightsteelblue
(#B0C4DE)		lightyellow
(#FFFFE0)
lime
(#00FF00)		limegreen
(#32CD32)		linen
(#FAF0E6)		magenta
(#FF00FF)
maroon
(#800000)		mediumaquamarine
(#66CDAA)		mediumblue
(#0000CD)		mediumorchid
(#BA55D3)
mediumpurple
(#9370DB)		mediumseagreen
(#3CB371)		mediumslateblue
(#7B68EE)		mediumspringgreen
(#00FA9A)
mediumturquoise
(#48D1CC)		mediumvioletred
(#C71585)		midnightblue
(#191970)		mintcream
(#F5FFFA)
mistyrose
(#FFE4E1)		moccasin
(#FFE4B5)		navajowhite
(#FFDEAD)		navy
(#000080)
oldlace
(#FDF5E6)		olive
(#808000)		olivedrab
(#6B8E23)		orange
(#FFA500)
orangered
(#FF4500)		orchid
(#DA70D6)		palegoldenrod
(#EEE8AA)		palegreen
(#98FB98)
paleturquoise
(#AFEEEE)		palevioletred
(#DB7093)		papayawhip
(#FFEFD5)		peachpuff
(#FFDAB9)
peru
(#CD853F)		pink
(#FFC0CB)		plum
(#DDA0DD)		powderblue
(#B0E0E6)
purple
(#800080)		red
(#FF0000)		rosybrown
(#BC8F8F)		royalblue
(#4169E1)
saddlebrown
(#8B4513)		salmon
(#FA8072)		sandybrown
(#F4A460)		seagreen
(#2E8B57)
seashell
(#FFF5EE)		sienna
(#A0522D)		silver
(#C0C0C0)		skyblue
(#87CEEB)
slateblue
(#6A5ACD)		slategray
(#708090)		snow
(#FFFAFA)		springgreen
(#00FF7F)
steelblue
(#4682B4)		tan
(#D2B48C)		teal
(#008080)		thistle
(#D8BFD8)
tomato
(#FF6347)		turquoise
(#40E0D0)		violet
(#EE82EE)		wheat
(#F5DEB3)
white
(#FFFFFF)		whitesmoke
(#F5F5F5)		yellow
(#FFFF00)		yellowgreen
(#9ACD32)

 



飞哥SS
关注
专栏目录
CSS基础之CSS字体属性
m0_67402096的博客
03-08 1774
文章目录 前言 1.font-family 2.font-size 3.font-size 4.font-style 5.字体属性复合写法 6.字体属性总结 前言 CSS 字体属性用于定义字体系列、大小、粗细和文字样式(如斜体) 1.font-family CSS 使用 font-family属性设置文本的字体系列 <style> div { font-family: Arial, "Microsoft Yahe", "微软雅黑";
CSS中的字体属性及其作用详解
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-08 1360
CSS提供了多种属性来设置文本的样式，其中包括但不限于字体家族()、字体大小(font-size)、字体粗细()、字体样式(font-style)等。正确地组合这些属性，可以使文本更具吸引力，同时也便于阅读。
css字体属性
yethyeth的专栏
02-28 3362
Author: Jorux/Bluecssr Posted on: September 11, 2006 Filed under: Web Design Comments: 18 Responses keywords: css, tutorial FontSize: + Increase - Decreaseedit 上次主要说明了css对于颜色和文本属性的控制, 这次介绍css对于字体, 背景等
CSS字体属性全解析
12-13
话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant： 使用CSS，可以对字体进行设置，字体属性包括五种常见属性：字体系列font-family、字体样式/字体风格font-style、字体大小font-...
CSS 字体属性详解及其应用技巧
最新发布
10-09
本文档详述了 CSS 中与字体相关的多种关键样式属性。其中包括 'font' 的组合用法和各独立属性如'font-size','font-family', 'font-weight','font-style','font-variant',和 'line-height' 的解释。同时，它提供了...
Web前端与移动开发之css字体属性.txt
07-30
5.字体的复合属性（简写方式 节约代码） body { font: font-style font-weight font-size/line-height font-family; } 不能更换顺序 属性间以空格隔开 不需设置的属性可以省略（取默认值） font-size font-...
CSS 字体属性font相关的用法
09-25
CSS字体属性是网页设计中不可或缺的一部分，它允许我们精确控制文本的外观，包括字体类型、大小、样式、粗细以及颜色。下面我们将详细探讨这些属性的用法。 首先，`font-family`属性用于设置文本的字体类型。它可以...
【网站前端】第08章 CSS字体属性
Seven Yang
12-13 174
本文为黑马程序员pink老师前端视频整理所得的学习笔记。
CSS 字体属性
weixin_41909678的博客
06-18 377
## 字体系列 **CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）。** ### 字体类型 #### font - family ```css body { font-family: 'Times New Roman','Microsoft YaHei',tahoma, arial,'微软雅黑'; } ``` 1. font-family 可以同时设置多种字体，每种字体之间用 "," 逗号分隔 2. 如果用到多个单词组成的字体，如 '...
CSS 字体属性（Font）
o_jj_o的博客
01-03 438
文字 （1）font-size 大小 单位 px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化； em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值 （2）font-weight 粗细 bold 加粗 normal 正常 （3）font-style 文字...
全面解析CSS字体属性与样式设置
本文主要介绍了CSS中的各种属性，包括字体属性、颜色及背景属性、文本属性、方框属性和分类属性。重点讲述了字体属性的详细使用，如字体族科、字体风格、字体变形等，并提供了相应的语法和示例。 1. 字体属性 - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值