CSS复习

前端学习 评论

CSS选择器

内联样式（style=""）>ID选择器（#content）>类选择器（.content）、属性选择器（[type="radio"]）、伪类（:hover）>类型选择器（p）、伪元素（::before）>通用选择器（*）、子选择器（>）、相邻同胞选择器（+）

分组选择器 使用逗号隔开

1
2
3
4
h1,h2,p
{
    color:green;
}

嵌套选择器

1
2
3
4
5
6
7
8
9
.marked p
{
    /* 为所有 class="marked" 元素内的 p 元素指定一个样式 */
    color:white;
}
p.marked{
    /* 为所有 class="marked" 的 p 元素指定一个样式 */
    text-decoration:underline;
}

CSS背景

background-color: 颜色

background-image: url(‘’)

background-repeat: repeat-x/y/no-repeat

background-position: 位置

background-attachment: fixed 图片不随页面滚动而滚动

简写：body {background: #ffffff url('img_tree.png') no-repeat fixed right top;}

元素样式

文本

文本颜色 color

文本左右对齐 text-align: center/right/justify

文本修饰 text-decoration: none/overline/line-through/underline

文本大小写转换 text-transform: uppercase/lowercase/capitalize

文本缩进 text-indent: *px

行高 line-height

文本阴影 text-shadow: h-shadow v-shadow blur color;

垂直对齐 vertical-align

空白处理 white-space: nowrap/pre/…

字间距 word-spacing

字体

字体系列 font-family

字体样式 font-style: normal/italic

字体大小 font-size

字体粗细 font-weight: normal（400）/bold（700）/border/lighter

链接

设置链接顺序：link/visited/hover/active

列表

列表标记 list-style-type: circle/square /upper-roman/lower-alpha

图像标记 list-style-image: url(‘’)

表格

表格边框（默认双边框） border-collapse:collapse（单边框）

边框

边框样式 border-style: solid/dotted/dashed/double/groove/ridge/inset/outset

边框宽度 border-(left/right/top/bottom)-width

边框颜色 border-(left/right/top/bottom)-color

轮廓

outline-color

outline-style

outline-width

通用样式

尺寸

高度 height

宽度 width

行高 line-height

最大/小高度 max/min-height

最大/小宽度 max/min-width

显示

display: none/block/inline

visibility: hidden（仍占用空间）

定位

position: static（默认）/relative（相对正常位置，原本所占的空间不会改变）/fixed（相对浏览器窗口固定）/absolute（相对于最近的已定位父元素，脱离文档，不占空间）/sticky（粘性定位）

重叠元素

z-index越大，越靠前

溢出隐藏

overflow: visible/hidden/scroll/auto

浮动

float: left/right

清除浮动：元素浮动后，周围元素会重新排列，通过清除浮动，还原周围元素位置 clear: both

CSS3

边框

圆角 border-radius

盒阴影 box-shadow

图像边框 border-image: source slice width outset repeat|initial|inherit;

背景

css3中背景可以设置多个，属性设置使用逗号隔开

设置背景 background-image: url(‘’)

指定图像大小 background-size

背景图像位置 background-origin: content-box/padding-box/border-box

背景裁剪 background-clip: content-box/padding-box/border-box

渐变

线性渐变

1
2
3
4
background-image: linear-gradient(direction/angle, color-stop1, color-stop2, ...);

/* 重复线性渐变 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

颜色支持使用透明度rgba()

径向渐变

1
2
3
4
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

/* 重复径向渐变 */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

文本效果

文本阴影 text-shadow

盒子阴影 box-shadow

溢出隐藏 text-overflow

文本分割换行 word-wrap

2D转换 transform

移动 translate、translateX、translateY

旋转 rotate

缩放 scale、scaleX、scaleY

倾斜 skew、skewX、skewY

综合 matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

设置旋转点 transform-origin

3D转换

移动 translate3d、translateX、translateY、translateZ

旋转 rotate3d、rotateX、rotateY、rotateZ

缩放 scale3d、scaleX、scaleY、scaleZ

综合 matrix3d

过渡

transition: property duration timing-function delay;

获得过渡的属性 transition-property

过渡时间设置 transition-duration

过渡效果 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

延迟开始 transition-delay

动画

1
2
3
4
5
6
7
8
9
10
@keyframes animationName
{
    from {background: red;}
    to {background: yellow;}
}

div 
{
    animation: name duration(持续时间) timing-function(如何完成) delay iteration-count(播放次数) direction(是否反向播放) fill-mode play-state(动画运行/暂停);
}

常用布局

元素水平居中

1
2
3
margin: auto;
width: 50%;
/* 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用 */

文本水平居中

1
text-align: center;

图片居中

1
2
3
4
5
6
img {
    display: block;
    margin: auto;
    width: 40%;
}
/* 将图片放到块元素中*/

解决浮动溢出

当子元素高度大于父元素，且子元素设置了浮动，那么子元素将溢出，可以通过clearfix解决

1
2
3
4
/* 为父元素设置 */
.clearfix {
    overflow: auto;
}

垂直居中

  1. 设置行高=元素高度

  2. 使用position和transform

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .center { 
        height: 200px;
        position: relative;
    }
     
    .center p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

参考链接

CSS 教程 | 菜鸟教程 (runoob.com)

枫与风