跳至主要內容

CSS速查

大约 15 分钟约 4387 字

此笔记不包含CSS基础部分。

选择器

选择器说明
通配选择器使用*表示,一般使用此选择器重新设定页面的边距
*{margin:0;padding:0}
元素选择器直接使用元素的标签名称即可
p{}
ID选择器使用“#”号,会选中对应id属性的元素
#id{}
类选择器使用.号,会选择对应class属性的元素
.class{}
群组选择器就是将多个具有相同样式的选择器放在一起,用英文逗号隔开
p,div

层次选择器

选择器说明
包含选择器用空格隔开,效果是选择内部所有子元素和子元素的子元素(一直向下查找)
div p.c1意为选择div下class属性为c1的p标签
子选择器使用大于号,效果是只选择子元素,不会选择孙子元素
兄弟选择器使用“~”号意为选择所有下方子元素
使用“+”号意为选择第一个下方子元素

属性选择器

选择器说明
[attribute]选取带有指定属性的元素
[attribute^=value]选取属性值以指定值开头的元素
[attribute$=value]选取属性值以指定值结尾的元素

结构性伪类选择器

选择器说明
:root匹配文档的根元素
:nth-child(n)匹配其父元素的第n个子元素
:nth-last-child(n)匹配其父元素的倒数第n个子元素
:first-child匹配其父元素的第一个子元素
:last-child匹配其父元素的最后一个子元素

否定伪类选择器

选择器说明
:not用于过滤符合条件的元素 如p:not(#box)就是过滤掉id为box的元素

动态伪类选择器

选择器说明
:before在元素前面增加内容
:after在元素后面增加内容

在CSS样式内使用content属性指定内容。可选的内容类别如下:

与内容相关:

h1:before {
    content: "[h1]";
}

h1:after {
    content: "[h1结束]";
}

插入图片:

h2:before {
    content: url("img.png");
}

和类或id选择器配合使用:

p.part:after {
    content: url("img.png");
}

配合quotes属性执行插入:

p.quotes {
    /*前面的是open-quote,后面的是close-quote*/
    quotes: "[这是前面的]" "[这是后面的]";
}
p.quotes:before {
    content: open-quote;
}
p.quotes:after {
    content: close-quote;
}

使用count-increment实现自动编号:

ul.ul1 li {
    list-style: none;
    counter-increment: count1; /*在这里声明变量*/
}
ul.ul1 li:before {
    content: counter(count1) "."; /*再在这里指定编号的样式*/
}

使用自定义编号:

若我们不喜欢CSS默认的编号样式(数字),我们就可以自己编写编号。

我们通过counter(name,list-style-type)用法实现使用自定义编号,name是计数器的名字,后面的参数指定编号的样式。

它的一部分取值如下:decimal-默认值,阿拉伯数字 disc-实心圆 circle-空心圆 square-实心方块。

lower-roman-小写罗马数字 upper-roman-大写罗马数字 lower-alpha-小写字母 upper-alpha-大写字母。

ul.ul2 li {
    list-style: none;
    counter-increment: count2;
}
ul.ul2 li:before {
    content: counter(count2, lower-alpha) ".";
}

多级编号

h2.ul3 {
    counter-increment: count3;
    counter-reset: count4; /*若想重新设置编号,需要在此编号的上一级添加该条语句,后面的值是要重设的编号*/
}
h3.ul3 {
    counter-increment: count4;
}
h2.ul3:before {
    content: counter(count3) ".";
}
h3.ul3:before {
    content: counter(count3) "." counter(count4);
}

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态伪类选择器</title>
    <style>
        /*与内容相关的属性*/
        h1:before {
            content: "[h1]";
        }

        h1:after {
            content: "[h1结束]";
        }

        /*插入图片*/
        h2:before {
            content: url("img.png");
        }

        /*只插入部分元素*/
        p.part:after {
            content: url("img.png");
        }

        /*配合quotes属性执行插入*/
        p.quotes {
            /*前面的是open-quote,后面的是close-quote*/
            quotes: "[这是前面的]" "[这是后面的]";
        }

        p.quotes:before {
            content: open-quote;
        }

        p.quotes:after {
            content: close-quote;
        }

        /*使用counter-increment实现自动编号*/
        ul.ul1 li {
            list-style: none;
            counter-increment: count1; /*在这里声明变量*/
        }

        ul.ul1 li:before {
            content: counter(count1) "."; /*再在这里指定编号的样式*/
        }

        /*使用自定义编号*/
        /*若我们不喜欢CSS默认的编号样式(数字),我们就可以自己编写编号*/
        /*我们通过counter(name,list-style-type)用法实现使用自定义编号,name是计数器的名字,后面的参数指定编号的样式*/
        /*它的一部分取值如下:decimal-默认值,阿拉伯数字  disc-实心圆  circle-空心圆  square-实心方块*/
        /*lower-roman-小写罗马数字 upper-roman-大写罗马数字 lower-alpha-小写字母 upper-alpha-大写字母*/
        ul.ul2 li {
            list-style: none;
            counter-increment: count2;
        }

        ul.ul2 li:before {
            content: counter(count2, lower-alpha) ".";
        }

        /*多级编号*/
        h2.ul3 {
            counter-increment: count3;
            counter-reset: count4; /*若想重新设置编号,需要在此编号的上一级添加该条语句,后面的值是要重设的编号*/
        }

        h3.ul3 {
            counter-increment: count4;
        }

        h2.ul3:before {
            content: counter(count3) ".";
        }

        h3.ul3:before {
            content: counter(count3) "." counter(count4);
        }
    </style>
</head>
<body>
<!--与内容相关的属性-->
<h1>一级标题</h1>
<hr>
<!--插入图像-->
<h2>二级标题</h2>
<hr>
<!--只选择部分元素-->
<p class="part">第一</p>
<p>第二</p>
<p>第三</p>
<hr>
<!--使用quotes属性-->
<p class="quotes">使用quotes属性</p>
<hr>
<!--配合counter-increment属性添加编号-->
<ul class="ul1">
    <li>第一条</li>
    <li>第二条</li>
    <li>第三条</li>
</ul>
<hr>
<!--自定义编号-->
<ul class="ul2">
    <li>第一条</li>
    <li>第二条</li>
    <li>第三条</li>
</ul>
<hr>
<!--多级编号-->
<h2 class="ul3">标题</h2>
<h3 class="ul3">子标题</h3>
<h3 class="ul3">子标题</h3>
<h2 class="ul3">标题</h2>
<h3 class="ul3">子标题</h3>
<h3 class="ul3">子标题</h3>
<h2 class="ul3">标题</h2>
<h3 class="ul3">子标题</h3>
<h3 class="ul3">子标题</h3>
</body>
</html>

UI元素状态伪类选择器

hover设置鼠标悬停时的样式、:focus设置获得焦点或进行输入时的样式、:active为点按不松开时的样式,它们三个顺序不能颠倒。

input[type="button"].e1:hover {
    background-color: pink;
}

input[type="button"].e1:focus {
    background-color: yellow;
}

input[type="button"].e1:active {
    background-color: red;
}

:checked设置复选框选中时的样式。

input[type="checkbox"].e2:checked {
    outline: red 2px solid; /*绘制于复选框周围的线*/
}

:selection设置文字选中时的样式。

p.e3::selection {
    background-color: #f00;
    color: #0f0;
}

使用CSS美化文字

  • 网页字体颜色用color属性设置。

  • 使用text-align设置文本的水平对齐方式,可选值为left、center、right、justify和inherit。

  • 使用vertical-align设置垂直对齐方式。

  • 首行缩进用text-indent、文本间距用letter-spacing、单词间距用word-spacing。

  • line-height用于设置文本的行间距,它的取值可以是百分比、浮点数或单位标识符,允许为负。

  • 属性值font-weight用于设置字体粗细,其有13个值:bold:定义粗体字体、bolder:定义更粗的字体,相对值、lighter:定义更细的字体,相对值、normal:默认值,标准字体、还有100~900之间的值,分别代表不同的粗细程度。

  • font-size用于设定字体的大小,可以指定像素值、还可设置参数:larger:相对于父元素的字体大小进行增大,使用em单位计算、smaller:相对于父元素的字体大小进行减小,使用em单位计算、length:百分比或浮点数和单位标识符组陈大哥长度值,不能是负数,百分比取值是基于父元素中字体的尺寸。

  • font-style用于设定字体的风格,有四个属性值:normal:默认值、oblique:斜体、italic:斜体、inherit:从父元素继承。

  • font-family用于设定字体,如隶书、宋体等。

  • 可以将字体的粗细、斜体、大小、字体等整合为一个,用font属性表示。排列顺序是font-style、font-variant、font-weight、font-size和font-family。font-family有多个值时,需要用逗号隔开,前三个可以自由调换或不写,后两个不可以调换且必须出现。

  • 使用服务器字体:

    /*首先要定义服务器字体,语法如下*/
    @font-face {
        font-family: blazed;
        src: url("Blazed.ttf") format("OpenType");
    }
    
    /*然后再在选择器中使用字体*/
    p.p1 {
        text-align: center;
        font-size: 50px;
        font-family: blazed;
    }
    
  • 使用客户端字体:

    /*在使用@font-face定义字体时,可以在font-family属性的第一个加上local(name)以优先使用本地字体*/
    @font-face {
        font-family: name;
        src: local("宋体");
    }
    

使用CSS美化列表

  • list-style设为none可以去除自带的项目符号。
  • 使用list-style-image属性可以将项目符号换成任意图片。

使用CSS美化图片

  • border属性用于设置图片边框,语法为“border: width color style”。其中style可选值如下:dotted - 定义点线边框,dashed - 定义虚线边框,solid - 定义实线边框,none - 定义无边框,hidden - 定义隐藏边框。

  • 使用opacity设置图像不透明度。

  • 使用border-radius设置图像的圆角属性。它可以设置4个值,设置一个值时表示4个角圆角相同。

  • box-shadow用于设置阴影图像,代码:“box-shadow:X,Y,blur,color”。X、Y表示阴影在水平方向和垂直方向的位移,blur表示模糊半径,color表示阴影的颜色。

  • vertical-align设置图像和文字的对齐方式。它有如下属性值:baseline:默认值,元素放在父元素的基线上、sub:垂直对齐文本的下标、super:垂直对齐文本的上标、top:把元素的顶端和行中最高元素的顶端对齐、text-top:把元素的顶端和父元素字体的顶端对齐、middle:把此元素放在父元素的中部、bottom:把元素的底端与行中最低元素的底端对齐。

  • background-image用于设置背景图,语法为“background-image: url("src")。

  • background-repeat用于设置背景图是否平铺:repeat:水平、竖直方向都平铺、no-repeat:不平铺、repeat-x:背景图水平方向平铺、repeat-y:背景图竖直方向平铺。

  • 线性渐变:语法为“linear-gradient(方向,颜色1,位置1,颜色2,位置2,...),方向只要设置起始位置,如top表示从上到下,right表示从右到左,top right表示从右上到左下,对于Chrome、Safari、Firebox浏览器,要将linear-gradient换为-webkit-linear-gradient,对于IE9+,要换成-ms-linear-gradient。

  • 使用background-color设置背景颜色。

使用网页动画效果

要创建动画,首先要了解@keyframes规则。创建动画和设置关键帧的语法如下:

@keyframes (动画名) {
   开始帧: 0%或者from{动画开始的样式}
   50%{50%的样式}
   结束帧:100%或者to{结束时的样式}
}

接下来就是设置动画属性,首先通过animation绑定一个选择器,并至少指定animation-name(动画名称)、animation-time(动画时间)。

  • animation-name 指定动画名称
  • animation-duration 指定动画播放一遍的时间,默认是0
  • animation-delay 指定动画开始时的延迟时间,默认是0
  • animation-interation-count 指定动画播放的遍数,取值为数值或者为infinite
  • animation-direction 指定动画的播放方向,默认是normal,reverse有方向
  • animation-timing-function 指定动画的速度曲线,默认ease缓动
  • animation-play-state 指定动画的运行或暂停,默认是running
  • animation-fill-mode 指定当动画不播放时,元素的样式。通过将animation-fill-mode设置为forwards、backwards和both将元素最终状态设置为动画的起始或结束状态

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧</title>
    <style>
        /*要创建动画,首先要了解@keyframes规则。创建动画和设置关键帧的语法如下*/
        /* @keyframes (动画名) {
           开始帧: 0%或者from{动画开始的样式}
           50%{50%的样式}
           结束帧:100%或者to{结束时的样式}
        }  */
        /*接下来就是设置动画属性,首先通过animation绑定一个选择器,并至少指定animation-name(动画名称)、animation-time(动画时间)*/
        /*animation-name	指定动画名称
        animation-duration	指定动画播放一遍的时间,默认是0
        animation-delay	指定动画开始时的延迟时间,默认是0
        animation-interation-count	指定动画播放的遍数,取值为数值或者为infinite
        animation-direction	指定动画的播放方向,默认是normal,reverse有方向
        animation-timing-function	指定动画的速度曲线,默认ease缓动
        animation-play-state	指定动画的运行或暂停,默认是running
        animation-fill-mode	指定当动画不播放时,元素的样式。通过将animation-fill-mode设置为forwards、backwards和both将元素最终状态设置为动画的起始或结束状态
        */
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            color: white;
            border: 1px solid #000;
            position: relative;
            animation: change 5s infinite;
        }

        @keyframes change {
            0% {
                background-color: red;
                left: 0;
                top: 0;
            }
            25% {
                background-color: green;
                left: 100px;
                top: 0;
            }
            50% {
                background-color: blue;
                left: 100px;
                top: 100px;
            }
            75% {
                background-color: pink;
                left: 0;
                top: 100px;
            }
            100% {
                background-color: purple;
                left: 0;
                top: 0;
            }
        }
    </style>
</head>
<body>
<div>帧动画</div>
</body>
</html>

设置2D动画

Transform属性用于定义2D变形动画,通过指定它的变形方法,即可实现对HTML元素的变形。

  • Transform属性中属性值translate(x.y)定义2D移动动画。

  • 使用rotate属性值指定旋转动画。

  • Transform属性中scale(x,y)属性值用于定义2D缩放动画。

  • Transform属性中属性值skew(x,y)用于定义2D倾斜动画。

  • 矩阵动画:矩阵动画可以通过设置Transform属性的值为matrix()实现,语法:matrix(a,b,c,d,x,y)。

    rotate(A) = matrix(cosA,sinA,-sinA,cosA,0,0)
    translate(dx,dy) = matrix(1,0,0,1,dx,dy)
    scale(sx,sy) = matrix(sx,0,0,sy,0,0)
    skew(B) = matrix(1,tan(By),tan(Bx),1,0,0)
    
    .box1 {
        transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
        -ms-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
        /*相当于   transform: rotate(30deg);
                   -ms-transform: rotate(30deg);*/
    }
    .box2 {
        transform: matrix(1, 0, 0, 1, 0, 30);
        -ms-transform: matrix(1, 0, 0, 1, 0, 30);
        /*相当于   transform: translate(0px,30px);
                   -ms-transform: translate(0px,30px);*/
    }
    .box3 {
        transform: matrix(1.2, 0, 0, 1.2, 0, 0);
        -ms-transform: matrix(1.2, 0, 0, 1.2, 0, 0);
        /*相当于  transform: scale(1.2);
                  -ms-transform: scale(1.2);*/
    }
    .box4 {
        transform: matrix(1, 0.577, 1, 1, 0, 0);
        -ms-transform: matrix(1, 0.577, 1, 1, 0, 0);
        /*相当于   transform: skew(30deg,20deg);
                   -ms-transform:skew(30deg,20deg);*/
    }
    

设置3D动画

transform-style属性是3D空间的一个重要属性,指定嵌套元素在3D空间如何实现,语法如下:

transform-style:flat|preserve-3d。

其中,flat为默认值,表示所有子元素在2D中呈现,preserve-3d表示所有子元素都在3D空间中呈现。

perspective属性是设置查看者的位置,它也是3D空间的一个重要属性之一。

  • Transform属性值设为scale3d(x,y,z)定义3D缩放动画。
  • Transform属性值中使用translate3d(x,y,z)来定义3D位移动画。
  • 将Transform属性值设为rotate3d(x,y,z,angle)定义3D旋转动画,其中x表示旋转轴1x坐标旋转的矢量,可以是0~1的数值。y,z类似,angle表示旋转的角度,正值表示顺时针旋转,负值表示逆时针旋转。

设置过渡动画

transition属性是网页上的过渡动画,是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,需要规定两项内容:指定要添加效果的CSS属性和指定过渡时间。

  • transition-timing-function属性用来设置过渡效果的过渡类型,它有如下取值:linear:速度始终相同、ease:慢速开始,快速过渡,慢速结束、ease-in:慢速开始、ease-out:慢速结束、ease-in-out:慢速开始和结束。

  • Transition-duration设置过渡效果的持续时间。

  • Transition-property属性用来规定过渡效果的CSS属性的名称。

  • Transition-delay属性用于规定过渡效果的延迟时间。

CSS Grid布局

CSSGrid布局可以提供类似于表格的样式。

基本使用:

  • display属性设为grid。

  • grid-template-columns用于设置每一列的宽度。如:

.container {
    grid-template-columns: 100px 100px 100px;  /* 设置三列,每一列的宽度为100px */
    grid-template-columns: repeat(12, 100px); /* 设置12列,每一列的宽度为100px */
    grid-template-columns: 1fr 2fr 1fr; /* 设置三列,平均占一份、两份、一份 */
    grid-template-columns: repeat(3, 1fr); /* 设置3列,每列平分 */
}
  • grid-template-rows用于设置每一行的高度,用法和上一个基本相同。
  • 上面的两个属性可以和minmax函数和auto-fill一起使用。
    • auto-fill表示若上一行还有空间则将下面的前面的元素填充上方的空间。

CSS Grid使用线布局

CSS Grid使用线布局
CSS Grid使用线布局

在使用线布局前,首先先参照上图和下方的代码了解一下线布局。

.container {
    grid-row-start: 1;
    grid-row-end: 3;
}

上方的代码代表container元素要占据一行两列,grid-column相关属性也是这样使用。除此之外,上面的语法可以简写为grid-row: 1/3,若这两个线相同,则可以合并为一个数字。但这样写会降低可读性。

CSS Grid使用区域名称指定布局

区域名称使用grid-template-areas属性来指定。

示例:

.container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar ."
        "footer footer";
}
.header {
    grid-area: header;
}
...

它相当于:

.container {
    display: grid;
}

.header {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
}

.sidebar {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
}
上次编辑于:
贡献者: 棋.