css的(文字、背景、段落)样式

最新推荐文章于 2024-05-17 16:07:32 发布

Himalaya@hsf

最新推荐文章于 2024-05-17 16:07:32 发布

阅读量4.6k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/stenphencurry/article/details/100080214

版权

css 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

文字样式

属性：
font-style:normal/ italic [设置文本为斜体]
font-weight:normal(100-500)/ bold(600-900)    [设置文本为粗体]
font-family: “文本字体1”,”文本字体2”; [文本类型]
text-align:left/center/right [文本水平对齐方式]
vertical-align:top/middle/bottom[垂直对齐方式]
line-height:数字px;[设置文本在一行内的高度]
设置文本简写方式
font:加粗 倾斜 文本大小/行高  “字体”;
最简方式 font:文本大小  “字体”;
如果没有设置到的视为缺省值还原默认
text-decoration 文本修饰
	none:没有修饰
	underline:添加下划线
	overline:添加上划线
	line-through:添加删除线
text-indent 首行缩进
	例：text-indent:2em;
文本大小写
text-transform:
	uppercase	单词都大写
	lowercase	单字都小写
    capitalize	每个单词首字母大写

知识点1.color 颜色

颜色属性
十六进制值
#f00     #fa0000   red
颜色模式：光色模式
  R      G      B
FF      00     00

字间距{letter-spacing:value;} 控制英文字母和汉字的字距。

词间距{word-spacing:value;} 控制英文单词词距。

  #FF0000
  rgb(255,0,0)
  red;

知识点2.font-family 字体

文本类型
.p1{font-family:"宋体";}
.p2{font-family:"微软雅黑";}
.p3{font-family:"华文彩云";}
.p4{font-family:"华文琥珀";}
.p5{font-family:"华文陆帅";}
.p6{font-family:"华文陆帅","Arial","Angsana New","华文彩云","华文琥珀";}

	指定字体：
		p {font-family: Georgia;}
	如果制定的字体不存在，使用通用字体：
		p {font-family: Georgia, serif;}
	候选字体系列
		p {font-family: Times, Georgia, 'New York', serif;} 
	如果字体中有空格，需要用引号。

知识点3.font-size 字号

font-size:12px;
单位(通常单位为像素)
	px像素 pt点 em倍距
	3pt=4px
	em是根据自身的字体的大小来决定多少像素；
	元素的默认大小是16px；
	1em=16px


文字大小：(设置文字的大小 通常网页的字体为12px或14px)

	标准尺寸
		xx-small  x-small  small  medium  large  x-large  xx-large
	相对父元素尺寸
		smaller  larger  inherit（从父元素直接继承尺寸） 百分比%
	值
		数值
			字体的大小
			.p1{font-size:18px;}
			.p2{font-size:16px;}
			.p3{font-size:14px;}

知识点4.单位em和rem

CSS3 引入了一些新的尺寸单位，这里重点推荐一个：rem 或者成为(根 em)。目前主流 的现代浏览器都很稳定的支持。它和 em、百分比不同的是，它不是与父元素挂钩，而是相 对于根元素<html>的文本大小来计算的，这样能更好的统一整体页面的风格。
//首先，来一段 HTML 
<h1>标题<em>小标题</em></h1> 
<p>我是一个段落，我是一段<code>代码</code></p>
//其次来一段 CSS 
html { font-size: 62.5%; } 
h1 { font-size: 3em; } 
p { font-size: 1.4em; }


这里做几个解释，我们在之前的 Web 设计中大量使用了 px 单位进行布局。因为，早期 的固定布局使用 px 较为方便，逐渐养成了这种习惯。而使用 em 单位其实更加灵活，尤其 是在修改样式时，只需要修改一下挂钩元素的那个大小即可，无须每个元素一个个修改。 
但就算是 em，还是有一定问题。网页默认的字号大小为 16px，然后通过<html>设置 62.5%，将网页基准设置为 10px。而<h1>设置为 3em，就是自身大小的 3 倍；<p>设置为 1.4em，就是 10px 的 1.4 倍，即 14px。 
现在问题来了，<code>里面的文本想设置 11px，怎么办呢？设置 1.1em 吗？不对，因 为它挂钩的父元素不是<html>而是<p>变成了 14px 的 1.1 倍了，而想设置 11px，则需要 设置 0.786 倍才行。但是，这样的计算量太大了。所以，W3C 推出了直接基于根元素单位： rem。

	em 相对父级元素字体大小
			/*首行缩进可以书写负数*/
	p{width:300px;border:1px solid #000;height:200px;margin:0 auto;
	text-indent:2em;font-size:20px;
	}
	rem 相对根元素字体大小

知识点5. Font-weight 加粗

	normal：默认值
	bold：粗体
	bolder：更粗体
	lighter：更细体
	100，200，300，400，500，600，700，800，900
	inherit：父级继承

知识点6.Font-style 样式

	默认：normal
	italic：斜体
	oblique：倾斜
	inherit：集成父级字体样式

知识点7. Font-variant 小写大写字母

	默认：normal
	小型大写字母：small-caps；
	继承父级：inherit；

知识点8. font 文字样式简写

p {
	  font ：italic bold 12px/20px arial,sans-serif;
  	}
直接描述字体的所有属性。

子主题 1

文本简写方式
p{width:400px;height:200px;border:1px solid black;}
/* font:加粗 倾斜 文字大小/文字行高 文字类型  */
.p1{font:700 italic 40px/200px "华文彩云";}
/* font:至少需要文字大小 和 文字类型 否则font无效化  */
.p2{font:40px "";}
/*简写缺损的值 会还原成默认效果*/
.p3{
	font-weight:700;
	line-height:200px;
	font:italic 40px "";
	/*
	font-size
	font-weight
	font-style
	font-family
	line-height
	*/
	}

9、文本水平对齐的方式

文本水平对齐
div{background:yellow;text-align:center;}
div b{background:green;}
p{text-align:center;background:skyblue;}
span{text-align:center;background:pink;}

10、文本修饰属性

文本修饰属性
.p1{text-decoration:none;}
.p2{text-decoration:overline;}
.p3{text-decoration:line-through;}
.p4{text-decoration:underline;}
a{text-decoration:none;}/*去除下划线*/

11、字词间距

字词间距-不要学
.p1{letter-spacing:40px;}
.p2{word-spacing:40px;}

兼容前缀

兼容前缀

-o-		Presto

-ms-		Trident

-moz-		Gecko

-webkit-	Webkit

	很久以前：浏览器前缀CSS3和正常CSS3都不支持；

不久之前：浏览器只支持前缀CSS3，不支持正常CSS3；

现在：有些浏览器既支持前缀CSS3，又支持正常CSS3；

未来：所有浏览器不支持前缀CSS3，仅支持正常CSS3.

渐进增强

一开始就针对低版本浏览器进行构建页面到高版本的变化

		-webkit-border-radius:5px;

		-moz-border-radius:5px;

		-ms-border-radius:5px;

		-o-border-radius:5px;

		border-radius:5px;

优雅降级

一开始就构建网站针对高版本向低版本进行兼容

		border-radius:5px;

		-o-border-radius:5px;

		-ms-border-radius:5px;

		-moz-border-radius:5px;

		-webkit-border-radius:5px;

段落样式

知识点1.direction 设置文本方向

	ltr：默认从左到右
	rtl：文本方向从右向左
	inherit	继承父元素的方向属性（IE任何版本不支持）

知识点2.text-align 水平对齐

	left：左
	right：右
	center：居中
	justify：两端对齐
	inherit：继承父级（IE不支持）

知识点3.text-indent 文本首行缩进

	length：默认是0；固定缩进
	%，相对父级元素宽度的百分比缩进
	inherit：继承父级的缩进。（IE不支持）

知识点4.line-height 行高

	normal：默认行间距
	数字：高度，此数字会与当前字体尺寸相乘来设置行间距
	length：固定行间距
	%：当前字体尺寸的百分比间距
	inherit：继承父级的行高属性值；（IE不支持）

知识点5.text-transform 文本大小写

	none：默认标准文本
	capitalize：每个单词以大写字母开头
	uppercase：仅大写字母
	lowercase：仅小写字母
	inherit：集成父级元素属性（IE不支持）

知识点6.white-space 空白处理及换行

	normal：默认空白被浏览器忽略
	pre：空白会被浏览器保留。
	nowrap：文本不换行，直到遇到br标签
	pre-wrap：保留空白序列，但是正常的进行换行
	pre-line：合并空白序列，保留换行符
	inherit：继承父级设置。（IE不支持）

知识点7. letter-spacing 字母间距

	normal：默认间距
	length：固定字母间距（允许使用负值）
	inherit：继承父级元素的字间距

知识点8. text-decoration 文本修饰

	none ：默认，标准文本
	underline：下划线
	overline：上划线
	line-through：穿过文本的线条
	blink：闪烁文本--------以前的Firefox支持，现在什么浏览器都不支持了
	inherit：继承父级的装饰（IE不支持）

知识点9.word-spacing 词间距

	normal：默认字间距
	length：固定字间距
	inherit：继承父级间距（IE不支持）

背景样式

背景颜色
background-color:#f00;
背景图片
background-image:url(图片路径);
背景图片平铺属性
background-repeat:
	repeat 		默认平铺
	repeat-x 	横向平铺
	repeat-y	纵向平铺
	no-repeat 	不平铺

背景图位置
background-position:值1(水平)   值2(垂直)
	left/center/right/数值     
	top/center/bottom/数值
	数值可以设置负值

背景简写：
background:颜色   图片路径    是否平铺     位置;
位置如果不写的话；就会在左上角，如果只写水平距离的上的值不写垂直上面的值的话，垂直上面的值默认为center；

小扩展常用图片格式
jpg  	(图片有损质量 但肉眼难分辨 来减小图片大小  图片非搂空使用);
png	(图片有损质量 但肉眼分辨不出 来减小图片大小  搂空图片使用的格式)
gif 		(图片有损严重 肉眼容易分别 常用与做动图)

知识点1.background-size 背景尺寸

	       20px  20px
	       50%  50%
	       contain--使原始图像的宽度或高度完全等于元素的宽度或高度
	       cover--使原始图像在维持纵横比的前提下将背景图像自动缩放到填满元素内部

知识点2.background-color 背景颜色

	颜色名字：例如red
	颜色16进制数值：例如#FF0000；
	rgb色值：rgb（255，0，0）
	rgba色值：rgba(255,255,255,0.4)
	transparent：默认背景透明
	inherit：继承父级的背景色（不支持IE）；

知识点3.background-image 背景图片

	url（）：指向背景图片
	none：无背景图像，默认
	inherit：继承父级的背景图像
		一个元素中显示多个背景：
		
		background--image:url(),url(),url();
		background-repeat:no-repeat,repeat-x,repeat-y;
		banckground-position:3% 98%,center,top;

知识点4.background-repeat 背景图像重复

	repeat：默认，垂直水平重复
	repeat-x：水平方向重复
	repeat-y：垂直方向重复
	no-repeat：不重复
	inherit：继承父级设置（IE不支持）

知识点5.background-position 背景图像位置

英文位置标识

如果只规定第一个，第二个必然是center

		top left
		top center
		top right
		center left
		center center
		center right
		bottom left
		bottom center
		bottom right

百分比

百分比 x%，y% 如果只规定第一个，另一个必然是50%

值

xpose，ypose：x，y的值，如果只规定第一个，另一个必然是50%
注意正负值

知识点6.background-attachment 背景附件（固定，滚动）

	scroll：默认值，背景图像会随着页面其余部分滚动而滚动
	fixed:背景固定，不随滚动条滚动
	inherit：继承父级元素

知识点7. background 背景样式简写

		background: #00FF00 url(bgimage.gif) no-repeat fixed top;
		background:url(anli/CSS3Fullbackground/sbg3.jpg) left center/40px 200px;图片的路径、图像的定位、背景图像的大小（一般与背景框的大小一致）

知识点8.透明 opacity

opacity:0.5;
注意，如果设置容器的透明度，是指容器和里面所有的东西都会透明，不是容器背景透明

代码

背景图
.box{width:500px;height:500px;border:1px solid #000;
background-image:url(images/a.jpg);
background-repeat:no-repeat;/*平铺属性*/
/*背景图位置只写一个 带二个会自动识别为居中*/
background-position:-30px -50px;

background-color:#0f0;

background:#f9f;
/*
background-color:#f9f;
background-image:none;
background-repeat:repeat;
background-position:auto auto;
*/

background:#f9f url(images/a.png) no-repeat right bottom;

}

背景颜色
div{width:300px;height:100px;}
.bg{     background:#f99;}
.bgcolor{background-color:#99f;}

Himalaya@hsf

关注

1
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
css的(文字、背景、段落)样式

文字样式属性：font-style:normal/ italic [设置文本为斜体]font-weight:normal(100-500)/ bold(600-900) [设置文本为粗体]font-family: “文本字体1”,”文本字体2”; [文本类型]text-align:left/center/right [文本水平对齐方式]vertical-align:top/mid...
复制链接

扫一扫