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-sizefont-family 属性,否则font属性将不起作用。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
    p {
        font: italic  20px "微软雅黑";
    }
    </style>
</head>
<body>
    <p>字体连写是有顺序的</p> <!-- 字体分格倾斜 大小20px 微软雅黑 -->
</body>
</html>

二、文本样式属性

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)

原文地址:https://www.cnblogs.com/qdhxhz/p/11770857.html

时间: 2024-10-10 05:55:01

CSS(2)---css字体、文本样式属性的相关文章

HTML和CSS前端教程03-CSS文本样式

目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff0000 } 2.CSS长度的度量单位-建议就用px p{ margin: 0; padding: 0; font-size: 20px; height: 50px; } 3.CSS文本样式 字体的大小,样式以及方位 3.1. 字体属性 属性名 说明 例子 font-size 字体大小 font-s

CSS中如何使用背景样式属性,看这篇文章就够用了

原文:CSS中如何使用背景样式属性,看这篇文章就够用了 css背景样式属性介绍# 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背景颜色. background-image url(背景图片路径) 设置背景图像. background-repeat repeat.repeat-x.repeat-y.no-repeat 设置背景图片是否平铺和平铺方向. backgroun

重温CSS之背景、文本样式

CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background-image属性,设置元素的背景图像,如:div{background-image:url('img.jpg');}--设置div元素的背景图片: 背景重复:background-repeat属性,对元素的背景图像进行平铺设置:默认值:repeat背景图像将在垂直方向和水平方向重复.repeat-x背

使用 jQuery 修改 css 中带有 !important 的样式属性

外部样式为: div.test { width:auto !important; overflow:auto !important } 通过 $("div.test").css("width","100px"); 和 $("div.test").css("width","100px !important"); 是无效的 要想修改 div 的 width,可以通过如下这种方式: 1 $(&

CSS文本样式效果

css,层叠样式表,现如今,我们可以利用css写出很多有趣好看的样式,来直接在网页中显示出来.为我们提供了很多便利之处. 这篇文章中,我总结了几个有趣的用css写出的文本样式. 1.文本阴影有趣的效果——文本的光晕. 2.雕刻的文本 3.三维凹槽边框的设置 4.三维凸槽边框的设置 5.三维凹边的设置 6.三维凸边的设置

DIV CSS优化 CSS压缩技巧教程

DIV CSS优化 DIVCSS5为大家介绍简单的CSS优化.涉及优化内容:CSS代码优化.CSS重用优化.缩短字符.删除换行等处优化 目录 CSS样式单词简写优化 标点符号优化 删除换行 CSS重用优化 CSS代码优化简写总结 一.CSS样式属性单词代码简写优化 - TOP 1.border(CSS边框)简写: 1).4个边边框宽度为1px,颜色为#000 border-color:#000; border-style:solid; border-width:1px 可以简写为:体感音乐放松椅

05使用CSS设置字体和文本样式

使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|serif|sans-serif name表示字体名称,可指定多种字体,用空格隔开.按优先顺序排列.如果字体名称包含空格,则应该使用括号()括起来. font是一个复合属性,所谓复合属性是指该属性能够设置多种字体属性,用法如下: font:font-style||font-variant||font-we

CSS font-size字体文字大小样式属性-字体大小样式篇

一.设置字体大小CSS单词与语法 - TOP基本语法结构: .divcss5{font-size:12px;}设置了文字大小为12px像素Font-size+字体大小数值+单位 单词:font-size语法:font-size : absolute-size | relative-size | length取值:xx-small | x-small | small | medium | large | x-large | xx-largexx-small:最小x-small:较小small:小m

CSS的字体样式属性

css文本样式值:font-size:#px: 文字大小font-family:字体样式,如:微软雅黑font-style:文字状态如 斜体等font-weight:文字粗细text-align:文本对齐font-variant :字体之间的转变,以小型大写字体或者正常字体显示文本.line-height:行高 上下距离会有变化,也可以用于行与行之间的空间(%)text-decoration:文本装饰 underline下划线 none去除下划线text-decoration: overline