css 字体属性详细总结

1,font-size属性设置字体的大小

声明:

有能力管理文本的大小在 web 设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。

请始终使用正确的 HTML 标题,比如使用 <h1> - <h6> 来标记标题,使用 <p> 来标记段落。

使用像素来设置字体大小 (px)

通过像素设置文本大小,可以对文本大小进行完全控制:

h1 {font-size:60px;}

使用百分比设置字体大小 (%)

父元素的百分比

body{
font-size: 40px;
}
h1,h2{
font-size: 100%; 表示和父元素body元素定义的字体一样大
}
h1{
font-size:50%;   表示相对于父元素来说,h1属性字体是父元素的1/2;(20px)
}
h2{
font-size: 200%; 表示相对于父元素来说,h2属性字体是父元素的2倍;(80px)
}

smaller比父元素更小

body{
font-size: 40px;
}
h1,h2{
font-size: smaller; 表示比父元素body元素定义的字体更小,
}

larger:比父元素更大:

body{
font-size: 40px;
}
h1,h2{
font-size: larger; 表示比父元素body元素定义的字体更大,
}

inherit:继承父元素的

body{
font-size: 40px;
}
h1,h2{
font-size: larger; 表示继承父元素body元素定义的字体大小,
}

2,font-family定义字体类型

可以使用逗号(,)隔开,以确保字体不存在的时候直接使用下一个字体

p {

font-family: ‘微软雅黑‘,‘宋体’Times, TimesNR, ‘New Century Schoolbook‘,

Georgia, ‘New York‘, serif;

}

3,font-weight字体加粗

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。

如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。

normal(默认值),bold(粗), bolder(更粗) ,lighter(更细)

 
p.normal {
font-weight:normal;
}
p.thick {
font-weight:bold;
}
p.thicker {
font-weight:900
}

4,font-style字体风格

normal :正常标准

italic :斜体

oblique :倾斜

inherit :继承

p.normal {
font-style:normal;
}
p.italic {
font-style:italic;
}
p.oblique {
font-style:oblique;
}

italic 和 oblique 的区别

font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。

通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。

5,font-variant 小型大写字母显示文本

font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

p.small
  {
  font-variant:small-caps;
  }
时间: 2024-10-07 09:51:53

css 字体属性详细总结的相关文章

css 文本属性详细总结

CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 1,text-align 横向排列,也就是水平对齐 它会影响一个元素中的文本行互相之间的对齐方式 属性值有:left(默认),center,right p{ text-align:right } text-align:center 与 <CENTER> 您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相

CSS字体属性(font)

字体名称属性(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

CSS字体属性

CSS字体: 属性 描述 font 简写属性,把所有针对字体的属性设置在一个声明中. font-family 设置字体系列. font-size 设置字体的尺寸. font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放. (CSS2.1 已删除该属性.) font-stretch 对字体进行水平拉伸.(CSS2.1 已删除该属性.) font-style 设置字体风格. font-variant 以小型大写字体或者正常字体显示文本. font-weight 设置字体的粗细.

[2016-01-16][CSS][字体属性]

font属性 font-size 字体大小 font-size = 14px; font-family 定义字体,用,号隔开 font-family:微软雅黑,serif; font-weight 字体加粗 normal默认值,bold粗,bolder更粗,lighter更细 100,200,300-900 normal = 400,bold = 700,只能给整百的数值 font-style 字体样式 normal默认值 italic斜体 oblique倾斜的字体 inherit从父元素继承

css 颜色属性详细总结

color 属性定义文本的颜色: color :green; color:#ff6600; 简写式: color:#f60 红(R),绿(G),蓝(B)每个的取值范围0-255 color:rgb(255,255,255) RGBA 分别代表 red 红色  ,green 绿色,  Blue 蓝色,Alpha的(色彩进空间)透明 color: rgba(255,255,255,1) css颜色对照编码连接: http://www.360doc.com/content/14/0924/20/108

css边框属性详细总结

元素外边距内就是元素的的边框 (border).元素的边框就是围绕元素内容和内边据的一条或多条线. 边框的样式 (border-style) 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框. a,css 边框样式分为10种不同的非inherit样式:如下: 统一风格 1,none 无边框 2,solid 直线边框 3,dashed 虚线边框 4,dotted 点状边框 5,double 双虚线边框 6,groov

css字体属性相关。

出处:CSS 参考手册    http://www.w3school.com.cn/cssref/index.asp text-decoration 属性 说明:这个属性允许对文本设置某种效果,如加下划线.如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中.不要求用户代理支持 blink. 可能的值         描述none             默认.定义标准的文本.underline         定义文本下的一条线.overline         定义文本上的

css 背静属性详细总结

1,背景颜色background-color background-color 不能继承,其默认值是 transparent.transparent 有"透明"之意.也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见. p { background-color: gray;  和普通颜色设置是一样的 } 2.背景的图片background-img background-image: url(图片的路径); background-image: none

css 列表属性详细总结

列表类型(list-style-type) 要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型. 在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点. 在有序列表中,标志可能是字母.数字或另外某种计数体系中的一个符号. 属性值有以下: list-style-type:none无标记 list-style-type:disc默认,标记是实心圆 list-style-type:circle 空心圆 list-style-type:square实心方块 lis