css样式那些事

最近学校开了前端 希望通过自己的努力打开web前端的大门

最令人头疼的就是css的各种属性 真心事记住不 所以 写篇文章总结一下

文字样式

常用单位

首先看一下css样式的常用单位

以 px像素为单位的

em 对于文本类型的属性经常使用到

1em指一个字符 2em指两个字符(比如我们设置行高 两个字符的行高 就把这个属性的值设置成2em)

还有一个%为单位 这个不用多说了把

文本样式

color 		文本的颜色 	(red  #f00  rgd(255,0,0)  ) 
letter-spacing 字符间距 	(2px -3px)

line-height	      行高   (14px 1.5em 120%)

很多时候我们用这个来做垂直居中

line-height =height   的时候 就会做到垂直居中

text-align  对齐	(center居中 left左 right右 justify两端对齐不会让两端出现空白的部分）

text-decoration 装饰线

(none无装饰线 默认情况下超链接下面都带有竖线 貌似很影响美观把 这时候none可将其取消，overline装饰线在文本的上方 underline装饰线在文本的下方 line-through 装饰线作为删除线贯穿文本之中)

text-indent	首行缩进   (2em)

字体font

老规矩还是一张图 节省时间学习新知识去 O(∩_∩)O

背景超链接样式

背景类型的样式

我们用background

background-color: 背景颜色

background-image:url("logo,jpg") 背景图片

注意如果同时设置背景颜色和背景图片的话 背景图片会覆盖掉背景颜色

background-repeat: repeat	背景图片的填充方式

				    repeat-x 

				    repeat-y

				    no-repeat

​

可能显得太麻烦 太多 太难记 其实也可以用

background: 颜色 图片 repeat 来统一设置

连接的四种形态

超链接的样式是用a开头

a:link --普通的未被访问的链接
a:visited -用户已访问的链接
a:hover -鼠标指针位于链接的上方悬停
a:active - 链接被点击的时刻

这种超链接或这种选择器的类型称为伪类选择器

这种位置分先后顺序的 l v h a

四种状态下设置超链接样式时候的设置方式和设置顺序

a:hover也能做出简单的动画效果

根据前面的学习不难看出 ，鼠标顶留在a标签文字上 字体放大 120% 这种简单的动画效果貌似还很常用的吧😁

列表 表格样式

列表的样式吧 主要是list开头

列表的样式这里指无序列表(ul)和有序列表(ol) 共用样式有一下几种

list-style			所有列表属性设置在这个声明中

list-style-image	为列表项设置图像

list-style-position	标志的位置

list-style-type	标志的类型

list-style-type 属性

type属性对于有序和无序列表可以取得以下这些值

前四种针对无序列表 后面针对有序列表

list-style-position

list-style-position:inside

list-style-position:outside

两者区别在哪 用文字说可能比较抽象 我们用一张图表示更加明确

inside 标号是向右缩进到这个列表区域之内

outside 是在列表的左侧

list-style-image

image属性可以规定列表的标号是一个图片：list-style-image:url(“1.jpg”);

可以起到美化页面的作用

表格样式

表格样式主要是设置表格的高和宽 这个大家应该都知道

还有一个经常是用的就是border 边框属性

还有一个非常重要的border-collapse属性 合并默认表格样式

table{
	width:100px;
	height:100px;
	border:1px solid #eee ; //一个像素宽 实线显示 灰色 每个属性之间用空格隔开
	border-collapse:collapse;
}