css样式总结

css样式表

• • 样式表分类
  • 样式选择器
  • 背景设置
  • 改变文本的样式
  • 字体样式设置
  • 列表
  • 伪类
  • 结构性伪类
  • 伪元素选择器
  • 其它选择器

样式表分类

1.行间样式表
2.内部样式表

<style type="text/css>

</style>

3.外部样式表
在主文件中添加连接

<link rel="stylesheet" type="text/css" href="index.css">

样式选择器

1. 标签选择器
2. 类选择器
   以点开头进行选择
   用class标记需要更改的段落

<p class="p1"></P>
<style type="text/css>
	.p1{
		
	}
</style>

背景设置

属性	属性值
background-colour	颜色，16进制，rgb
background-image	图片url
background-repeat	图片重复方向:repeat(默认),no-repeat,repeat-x,repeat-y
background-attachment	scroll,fixed
background-position	图片的起始位置:[top,center,bottom,left,right] [x%,y%] [xpos,ypos]
background	图片的综合属性写法

改变文本的样式

属性	属性值
color	文本颜色
direction	文本书写方向：ltr，rtl
letter-spacing	字符间距：npx（n可以是负数）
line-height	行高：npx
text-align	文本对齐方式：left，right，center，justify
text-decoration	文本修饰：none，underline，overline，line-through
text-shadow	文本阴影：h-shadow，v-shadow，blur，color
text-transform	改变字母大小写：none，capitalize，uppercase，lowercase
text-indent	首行缩进：npx，nem

字体样式设置

属性	属性值
font-family	设置字体为隶书，仿宋，楷体等
font-style	规定斜体文本：normal，italic，oblique
font-weight	文本粗细：normal，bold，100-900
font-size	字体大小：npx

列表

属性	属性值
list-style-type	设置列表项目的外观：none，disc，circle，square，decimal
list-style-position	列表符号的位置：inside，outside
list-style-image	将图像设置为列表项目的标记：url，none
list-style	简写属性，含有以上三个

伪类

属性	属性值
link	伪类颜色
visited	已访问的
hover	悬停效果
active	激活状态
focus	获得焦点

注意：

1. 顺序不能变，浏览器如果第二次刷新显示不出来则可能是缓存的问题，清除一下缓存就好了
2. :+{link,visited,hover,active}即伪类，可以用于链接，也可以用于其他类似的结构上边，eg：lable，input等标签都可以

a:link{
	color:red;
	font-size: 40px;
}
a:visited{
	color:green;
	font-size: 40px;
}
a:hover{
	color:yellow;
	font-size: 40px;
}
a:active{
	color: blue;
	font-size: 40px;
}

结构性伪类

属性	属性值
:first-child	选择元素的第一个子元素（当这个元素在父元素中是第一个时候才生效）
:last-child	选择元素的最后一个子元素
:nth-child()	选择某个元素的一个或几个子元素
:nth-last-child()	选择某个元素的一个或几个子元素从这个元素的最后一个子元素开始算
:first-of-type	选择一个上级元素下的第一个同类子元素

伪元素选择器

选择部分

属性	属性值
::selection	选择指定元素中被用户选中的内容
::before	类的前边插入新内容
::after	类的后边插入新内容
::first-line	选择指定选择器的首行
::first-letter	选择文本的第一个字符

其它选择器

属性	属性值
id，*	选择指定元素中被用户选中的内容
逗号选择器	联合选择器
空格选择器	子孙（后代）选择器
>选择器	子选择器
+选择器	相邻兄弟选择器
[]	属性选择器

1. class选择器可以相同，以点开头，id选择器不可以重复，以#开头
2. 标签选择器