CSS 相关注意点

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、文字的凸起或凹下

效果:

CSS 相关注意点_第1张图片

原理是借助文字阴影。

凸起的效果:
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] { }            //直接引用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::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: 背景颜色   背景图片地址   背景平铺   背景滚动   背景的位置

你可能感兴趣的:(前端)