css字体、文本和背景样式
2017-01-21 00:00
260 查看
了解了CSS选择器,我们就想要知道更多设置样式的属性了,让我们一起来看看吧,如果你还不了解选择器,也可以看上篇我的博客哈:css选择器详解
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
注意点:
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。
尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。为此,在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。比如font-family: "\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。可以通过escape()来得到的。
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。
选择器{font:font-style font-weight fong-size/line-height font-family;}
使用font属性时,必须按上面语法格式中的顺序书写,各个属性以空格隔开。其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
代码举例(直接复制到你的编辑器中查看即可):
预定义的颜色值,如red,green,blue等。
十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。
RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距,而word-spacing定义的为英文单词之间的间距。
none:没有装饰(正常文本默认值)。
underline:下划线。
overline:上划线。
line-through:删除线。
另外,text-decoration后可以赋多个值,用于给文本添加多种显示效果,例如希望文字同时有下划线和删除线效果,就可以将underline和line-through同时赋给text-decoration。
left:左对齐(默认值)
right:右对齐
center:居中对齐
normal:常规(默认值),文本中的空格、空行无效,满行(到达区域边界)后自动换行。
pre:预格式化,按文档的书写格式保留空格、空行原样显示。
nowrap:空格空行无效,强制文本不能换行,除非遇到换行标记<br />。内容超出元素的边界也不换行,若超出浏览器页面则会自动增加滚动条。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
normal只在允许的断字点换行(浏览器保持默认处理)。
break-word在长单词或 URL 地址内部进行换行。几乎得到了浏览器的支持。
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下
textarea中设置不能被拖动大小代码:style=“resize:none;”
一个标签里可以设置多个class名称,且用空格隔开:<p class=”p1 p2”>(同时适用于p1和p2的样式)
背景设置一般图片多大元素宽高就要多大(注意:不想背景缩放出现问题时候使用min-width;设置min-width:1000px防止页面小于1000px的背景位置不对。)
如果文章有什么错误,欢迎评论指正,把您的意见或建议告诉我,我会继续努力的!谢谢您!
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 地址换行到下一行normalnormal只在允许的断字点换行(浏览器保持默认处理)。
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的背景位置不对。)
如果文章有什么错误,欢迎评论指正,把您的意见或建议告诉我,我会继续努力的!谢谢您!
相关文章推荐
- CSS字体文本样式
- css 超链接样式,文本下划线,背景颜色
- textarea无边框文本透明背景文本样式
- Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色
- CSS3(背景样式,文本立体效果,2d3d转换及动画)第八天
- HTML---CSS字体,文本,背景和边框属性
- HTML基础-样式位置、背景、边框、内外边距、盒模型和结构、文本、常见样式
- Bootstrap-全局样式的文本颜色和背景颜色
- Flex Gumbo中如何通过contentBackgroundColor样式,设置TextInput内文本背景颜色
- CSS温故第二天【样式】-背景 文本 字体
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- css去掉select默认样式 文本超出 固定背景图
- textarea无边框文本透明背景文本样式
- 字体、文本、背景、列表样式和超链接(2)
- css 样式设计(一)( 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 )
- CSS边框、背景、文本样式
- 3.CSS基本样式:背景、文本、字体、链接、列表、表格、轮廓
- css 背景定位 文字样式及文本溢出隐藏···
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景