css学习

这次咱们来说css网页样式.当然不光css可能还会涉及到css3.

1.css & css3 属性:

id,class,标签,包含,关联。

2.结构伪类:

p.left 类选择器

:root 根部元素

:not 非指定元素

:empty 元素内容为空

:target 当超链接在某个网页中时,才会起作用.

:first-child 第一个元素

:last-child 最后一个元素

:nth-child 正数第几个

:nth-last-child 倒数第几个

dt:nth-child(odd)奇数  

dt:nth-child(even)偶数

dt:nth-of-type(odd)奇数行

dt:nth-of-type(even)偶数行

3.状态伪类:

a:link 当打开页面时,默认是什么颜色.

a:visited 点击过后的。

a:hover 鼠标悬停

a:active 正在点击

a:focus 光标获取

:enabled 可用

: disabled 不可用

:read-only 只读

:read-write 可读可写

:default 默认 未选中;

:checked 已经被选中

:indeterminate 从未选中

::selection 元素处于指定状态

~兄弟元素

4.border-radius 带圆角的边框

阴影:

text-shadow 文字阴影

box-shadow 盒阴影

变形处理:Transform 

Transform:rotate() 旋转

Transform:scale() 缩放

Transform:skew()倾斜

Transform:translate()移动

动画设置:Transitions

Transitions:property 动画设置

Transitions:duration 多长时间

Transitons: timing-function 执行什么种类的动画

Transition-delay 延迟

过渡类型:timing-function 属性

linear: 线性过渡

ease:平滑过渡

ease-in 由慢到快

ease-out 由快到慢

ease-in-out 由慢到快再到慢

cubic-bezier()自定义类型

插入文字:

p:after{content"";}

p:before{content"";}

插入图片:

li:after{content;url();}

5.样式表类型:(优先级由高到低)

行内,内嵌, 链入,导入。

由于有点事,这次就先到了,不好意思了。

原文地址:https://www.cnblogs.com/peace-ful/p/6738930.html