10.css样式属性

最新推荐文章于 2022-11-15 20:31:15 发布

白山茶ι

最新推荐文章于 2022-11-15 20:31:15 发布

阅读量387

点赞数 4

分类专栏： web入门教程文章标签： web css

本文链接：https://blog.csdn.net/Carol_x/article/details/102616519

版权

web入门教程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

css样式属性

css样式属性种类繁多，使用复杂，需要逐步积累,在此不举例，小伙伴们从平时的代码中积累,加粗为常用属性

1.字体属性

功能	属性名	描述
字体类型	font-family	设置文本的字体类别
字体风格	font-style	设置字体样子，取值normal（正常），italic（斜体），oblique（倾斜）
字体变形	font-variant	设定小型大写字母，取值normal（正常），small-caps（小型大写字母）
字体加粗	font-weight	设定字体的粗细，取值可以是border(特粗体)，bold(粗体），normal(正常)，lighter(细体)或100-900之间的9个等级
字体大小	font-size	设置文本大小，值可以是绝对或者相对，其中绝对值从小到大依次是xx-small,x-small,small,medium(默认),large,x-large,xx-large;单位可以是px或pm,也可以采用百分比（%）的形式
字体拉伸	font-stretch	设置或检索对象中的文字是否横向拉伸变形，主流浏览器都不支持
字体 aspect	font-size-adjust	设置或检索小写字母x的高度与对象文字字号的比率，IE，Google不支持
字体简写	font	属性的简写可用于一次设置元素字体的两个或多个方面，书写顺序font-style,font-variant,font-weight,font-size/line-height,font-family

2.文本属性

功能	属性名	描述
文本颜色	color	设置文本颜色
文本方向	direction	设置文本方向，取值ltr(从左到右),rtl(从右到左),inherit(继承父元素)
行高	line-height	设置文本行高，即两行文本基线之间的距离
缩进文本	text-indent	设置行的缩进大小，值可以为正值或者负值，单位可以用em,px或百分比（%）
水平对齐	text-align	设置文本的水平对齐方式，取值left，center，right，justify(两端对齐)
垂直对齐	vertical-align	设置垂直对齐方式，取值bottom,top,middle,baseline
字间距	word-spacing	设置字之间的标准间隔，默认normal或0
字母间隔	letter-spacing	设置字符或字母之间的间隔
字符转换	text-transform	设置文本中字母的大小写，取值none,uppercase,lowercase,capitalize
文本修饰	text-decoration	设置段落中需要强调的文字，取值none,underline,overline,line-through,blink(闪烁)
空白字符	white-space	设置源文档中的多余的空白，取值normal（忽略多余），pre(正常显示),nowrap(文本不换行，除非遇见`<br/>`标签,pre-wrap,pre-line)
文本阴影	text-shadow	设置文本的阴影，书写顺序：h-shadow(水平阴影位置)，v-shadow(垂直阴影位置)，blur(模糊距离)，color(阴影颜色)
文本两端对应时单词间隔	text-justify	设置text-align=justify时所使用的对齐方式
容器数据溢出	overflow	设置当元素的内容溢出其区域时发生的事情，取值visible(默认值,内容不会被修剪，呈现在元素框之外),hidden(内容被修剪，其余内容不可见),scroll(内容被修剪，会显示滚动条查看内容)，inherit(从父元素继承值)
文本溢出	text-overflow	设置文本溢出时的事件，取值clip(修剪)，ellipsis（省略号），string（给定字符串），取ellipsis,string时，overflow需设为hidden
文本换行	word-break	设置非中日韩文本的换行规则，取值normal，break-all（允许在单词内换行），keep-all（只能在半角空格或连字符处换行）
长文本换行	overflow-wrap	设置长度超过一行的单词是否被拆分换行，是word-break的补充，取值normal（只在允许的断字点换行），break-word（在长单词或url地址内部进行换行）

3.背景属性

功能	属性名	描述
背景颜色	background-color	设置元素的背景色
背景图像	background-image	设置背景图像
背景重复	background-repeat	设置背景平铺方式，取值no-repeat(不平铺)，repeat-x（横向平铺），repeat-y（纵向平铺），repeat（x/y双向平铺）
背景定位	background-position	设置图像在背景中的位置，取值top,bottom,left,right,center或具体值，百分比
背景关联	background-attachment	设置背景图像是否随页面内容一起滚动，取值scroll(滚动),fixed(固定)
背景尺寸	background-size	用来设置背景图片的尺寸
填充区域	background-origin	规定background-position属性相对于什么位置来定位
绘制区域	background-clip	规定背景的绘制区域
背景简写	background	在一个声明中设置所有的背景属性

4.列表属性

功能	属性名	描述
列表类型	list-style-type	设置列表的图形符号，取值none,disc,circle,square,decimal,lower-roman,upper-roman,lower-latin,upper-latin等
列表项图像	list-style-image	将图形符号设定为指定的图像，如list-style-image:url()
符号位置	list-style-position	设置列表图形符号的位置，取值inside,outside
列表简写	list-style	一个声明中设置所有列表属性，可以按顺序设置如下属性list-style-type,list-style-position,list-style-image

文字基本属性练习：
效果在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>古诗词欣赏</title>
<style type="text/css">
.aa {
	background: url("D:/download/eclipse_workspace/ch03/images/2.jpg");
	background-size: 77% 100%;
	background-repeat: repeat-y;
}

h1, h3 {
	text-align: center;
	color: #00CACA;
	font-weight: bold;
	font-style: italic;
}

p {
	font-size: 15px;
	text-align: center;
	color: #007979;
	text-height: 3px;
}
</style>
</head>
<body>
	<div class="aa">
		<h1>声声慢</h1>
		<h3>李清照</h3>
		<p>苦苦地寻寻觅觅，却只见冷冷清清，怎不让人凄惨悲戚</p>
		<p>乍暖还寒的时节，最难保养休息。</p>
		<p>喝三杯两杯淡酒，怎么能抵得住傍晚的寒风急袭？</p>
		<p>一行大雁从眼前飞过，更让人伤心，因为都是旧日的相识.</p>
		<p>园中菊花堆积满地，都已经憔悴不堪，如今还有谁来采摘？</p>
		<p>冷清清地守着窗子，独自一个人怎么熬到天黑？</p>
		<p>梧桐叶上细雨淋漓，到黄昏时分，还是点点滴滴。</p>
		<p>这般情景，怎么能用一个“愁”字了结！</p>
	</div>
</body>
</html>

白山茶ι

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
10.css样式属性

css样式属性css样式属性种类繁多，使用复杂，需要逐步积累,在此不举例，小伙伴们从平时的代码中积累1.字体属性功能属性名描述字体类型font-family设置文本的字体类别字体风格font-style设置字体样子，取值normal（正常），italic（斜体），oblique（倾斜）字体变形font-variant设定小型大写字母，取值norm...
复制链接

扫一扫