了解了CSS选择器,我们就想要知道更多设置样式的属性了,让我们一起来看看吧,如果你还不了解选择器,也可以看上篇我的博客哈:css选择器详解
CSS字体样式属性
font-size:字号大小
- font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下:
相对长度单位 | 说明 |
---|---|
em | 相对于当前对象内文本的字体尺寸 |
px | 像素,最常用 |
绝对长度单位 | 说明 |
---|---|
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
font-family:字体
- font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:
p{font-family:"微软雅黑";}
- 可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
- 注意点:
- 各种字体之间必须使用英文状态下的逗号隔开。
- 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
- 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。
- 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
- 在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。为此,在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。比如font-family: "\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。可以通过escape()来得到的。
font-weight:字体粗细
- font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。
font-style:字体风格
- font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
- normal:默认值,浏览器会显示标准的字体样式。
- italic:浏览器会显示斜体的字体样式。
- oblique:浏览器会显示倾斜的字体样式。
font:综合设置字体样式
- font属性用于对字体样式进行综合设置,其基本语法格式如下: 选择器{font:font-style font-weight fong-size/line-height font-family;}
- 使用font属性时,必须按上面语法格式中的顺序书写,各个属性以空格隔开。其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
代码举例(直接复制到你的编辑器中查看即可):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 18px;
font-weight: bold;
font-family: "微软雅黑";
font-style: normal;
color: red;
}
p {
font:normal 700 20px/20px "楷体";
}
</style>
</head>
<body>
<div>请看一下我的css样式代码效果哈</div>
<p>这个是字体属性的连写呢</p>
</body>
</html>
CSS文本外观属性
color:文本颜色
- color属性用于定义文本的颜色,其取值方式有如下3种:
- 预定义的颜色值,如red,green,blue等。
- 十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。
- RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
- 需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。
letter-spacing:字间距
- letter-spacing属性用于定义字间距,所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值,允许使用负值,默认为normal。
word-spacing:单词间距
- word-spacing属性用于定义英文单词之间的间距,对中文字符无效。和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。
- word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距,而word-spacing定义的为英文单词之间的间距。
line-height:行间距
- line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px。
text-decoration:文本装饰
- text-decoration属性用于设置文本的下划线,上划线,删除线等装饰效果,其可用属性值如下:
- none:没有装饰(正常文本默认值)。
- underline:下划线。
- overline:上划线。
- line-through:删除线。
- 另外,text-decoration后可以赋多个值,用于给文本添加多种显示效果,例如希望文字同时有下划线和删除线效果,就可以将underline和line-through同时赋给text-decoration。
text-align:水平对齐方式
- text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。其可用属性值如下:
- left:左对齐(默认值)
- right:右对齐
- center:居中对齐
text-indent:首行缩进
- text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。
white-space:空白符处理
- 使用HTML制作网页时,不论源代码中有多少空格,在浏览器中只会显示一个字符的空白。在CSS中,使用white-space属性可设置空白符的处理方式,其属性值如下:
- normal:常规(默认值),文本中的空格、空行无效,满行(到达区域边界)后自动换行。
- pre:预格式化,按文档的书写格式保留空格、空行原样显示。
- nowrap:空格空行无效,强制文本不能换行,除非遇到换行标记<br />。内容超出元素的边界也不换行,若超出浏览器页面则会自动增加滚动条。
word-break:自动换行
- normal 使用浏览器默认的换行规则。
- break-all 允许在单词内换行。
- keep-all 只能在半角空格或连字符处换行。
word-wrap
- word-wrap属性允许长单词或 URL 地址换行到下一行normal
- normal只在允许的断字点换行(浏览器保持默认处理)。
- break-word在长单词或 URL 地址内部进行换行。几乎得到了浏览器的支持。
背景
背景相关的属性:
- background-color:设置背景颜色
- background-image:设置背景图片
- 写法:background-image:url(图片的路径);//默认情况下图片如果比容器要小,它会平铺。
- background-repeat:设置背景是否平铺:
- 取值:
- no-repeat:不平铺
- repeat-x:在水平方向上平铺
- repeat-y:在垂直方向上平铺
- repeat:平铺
- background-position:设置背景图片的位置
- 用法:
- background-postion: x y;
- 注意:x,y可以是具体的数值 x,y又可以是一些英文单词。
- x: left 左 center 中 right 右
- y: top 上 center 中 bottom下
背景的连写方式:
background: background-color background-image background-repeat background-position;
注意点:
- color样式不在font里,直接写color即可。
- textarea中设置不能被拖动大小代码:style=“resize:none;”
- 一个标签里可以设置多个class名称,且用空格隔开:<p class=”p1 p2”>(同时适用于p1和p2的样式)
- 背景设置一般图片多大元素宽高就要多大(注意:不想背景缩放出现问题时候使用min-width;设置min-width:1000px防止页面小于1000px的背景位置不对。)
如果文章有什么错误,欢迎评论指正,把您的意见或建议告诉我,我会继续努力的!谢谢您!