1、伪类选择器(单个冒号)
eg p : first-child/last-child/nth-child(n)(n表示第几个,可以用2n表示偶数(even),也可以2n+1表示奇数(odd))
特别的:nth-last-child:表示顺序从最后一个算起的。
2、target 目标伪类
target{
color:blue; //表示调到该目标的时候,会变成蓝色。
}
3、text-indent:首行缩进
text-indent:2em; //表示首行空出两个字的空格。
4、颜色半透明:rgba(r,g,b,a) a的取值在(0~1之间)
5、文字阴影
text-shadow:1px(水平距离),2px(垂直距离),3px(模糊距离),rgba(R,G,B,A)(颜色)
6、文字的凸起或凹下
效果:
原理是借助文字阴影。
凸起的效果:
text-shadow: 2px 2px 1px black,-2px -2px 1px white; //凸起的原理是上移(Y轴的负半轴是上)的部分是白色,下移(Y轴的正半轴是下)的部分是黑色
凹下的效果和凸起效果反过来即可。
7、display转换
block(块)元素的特点:
①总是在新行上开始;
②高度,行高以及外边距和内边距都可控制;
③宽度缺省是它的容器的100%,除非设定一个宽度。
④它可以容纳内联元素和其他块元素
inline元素的特点(内联标签):
①和其他元素都在一行上;
②高,行高及外边距和内边距不可改变;
③宽度就是它的文字或图片的宽度,不可改变
④内联元素只能容纳文本或者其他内联元素
display:inline;(块转行标签)
display:block(行标签转换块标签)
display:inline-block(行内块元素)有行和块元素的特点。
8、属性选择器
用“[ ] ”来表示
<a title = "a">
a[title] { } //直接引用title这个属性
a[title = a]{ } //表示title = a这个属性
a[title^ = a]{ } //表示title = 的内容中a在开头位置即可 eg abc、afg
a[title$ = a]{ } //表示“a”应该在结尾位置
a[title* = a]{ } //表示“a”有包含在里面都可以
9、元素选择器
p::first-letter{ } 表示p里面的一个字/单词
p::first-line{} 表示p中的第一行
p::selection{} 表示被左键选中的内容
10、块内元素的选择器
<div>今年</div>
div::before{
content:"你"; //表示在今年这个块内元素里面的前面部分添加内容“你”,div块里面变成“你今年”
}
div::after //这个功能也和上面一样只是换成后面。
11、有关background的属性
background-position:10px 10px/right bottom / center
background-image:url(1.jpg)引入背景图片引入多张直接加,然后继续写url()引入
background-size: cover(图片进行等比例缩放,溢出部分隐藏,应该同时满足盒子的长宽)/content(保证图片的完整)
background-attachment:fixed(固定的)/scroll(滚动的)
简写:
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景的位置