什么是CSS
css是和html一起使用来构建出一个网页的布局排版,像建模一样,先给一个框架,然后再把这个框架实现出来。比如你在市区买了一套房子,接手的时候还是一个刚用html砌好的毛胚房,这时候就需要装修师傅css来好好装修一下,房内吊个灯开个天窗,买一些家具进去,把家具摆放在你想要的地方,再把墙刷上你喜欢的颜色或者画上你喜欢的画,把整个房子装修成你喜欢的样子,这就是css的功能。
html是怎么链接css的
那要装修这个房子,就要让装修师傅css进到html里面,那么此刻就需要先把html和css链接起来,链接的方法有三种。
- 第一种是内联式,就是直接把样式属性写在html标签的
style
属性里,但是这个只影响到一个元素,而每个元素又都分散在整个html文档中,不方便集中管理,每个元素的样式也不可以太复杂,不然写起来很麻烦,但是也有一个优点,就是不用定义选择器,不过还是不推荐使用这种方式。
这里用容器<figure>
包含子元素来举例
<figure>
<div style="width: 50px; height: 50px; background-color:aqua;border-radius: 50%; margin-bottom: 10px;"></div>
<div style="width:50px;height: 100px;background-color:coral; border-radius: 10px;"></div>
</figure>
复制代码
- 第二种是把网页中所有元素的样式都集中到一个叫做
<style>
的标签里,放在DOM结构前面,因为样式不是写在元素的属性里的,此刻为了区分不同元素的样式,就要分别为每个元素指定一个名字,像桌子啊,碗筷啊,然后在<style>
标签里面按元素的名称逐个书写各样式。但是每写一个html就要在DOM前面加上css样式,一个css就只能对应一个html,相对比较麻烦。
比如:
<style>
.main{
color:yellow;
}
<style>
<body>
<figure class="main"></figure>
</body>
复制代码
- 第三种是外部样式表,也是现在最常用的一种,直接用
<link>
标记链接就可以了,然后把要表达的css内容单独存放在一个扩展名为xx.css的文件中,然后在<head>
里用<link>
导入这个css文件就可以啦,这样就分离了DOM结构和css样式,各自分工最后合作,而且这样的话一个css就可以用在多个html上了,会方便很多
<link rel="stylesheet" href="./xx.css" />
复制代码
常见的CSS选择器有哪些呢
为了灵活的选择将要设置样式的元素,css也有很多选择器可以使用,
-
标签选择器(div)
- 选择标签为
<div>
的所有元素,虽然用起来很方便,但是一个复杂的结构中肯定不止一个同名的标签,一旦你定义了一个标签,那么所有同名的标签都会跟着改变。
- 选择标签为
-
类选择器(.main)
- 为元素指定一个class属性的样式,给每个元素起不同的类名来区分每个元素,可以给有共同属性的元素起相同的类名,还可以为一个元素分配多个类名,多个类名的话类名之间用空格分开就可以了
如下选择类名为main的所有元素
<fiure class="main"></figure>
复制代码
.main{
height: 1300px;
width: 200px;
}
复制代码
-
ID选择器(#box)
- 通过为元素命名唯一的ID名,然后在css中用
#id
的形式引用元素
- 通过为元素命名唯一的ID名,然后在css中用
<div id="box">
复制代码
#box{
height: 300px;
width: 460px;
}
复制代码
-
伪类选择器(p:hover)
- 伪类选择器用选择处于特殊位置或状态的元素,比如选择一堆元素中的第一个或者最后一个元素,或者隔一个选一个元素,鼠标指针悬停状态的元素。
.p:hover{ transition: 0.5s ease-out; background-color: lightcoral; border-radius: 50%; } 复制代码
当然了,选择器也是有分优先级的: id选择器>类选择器>标签选择器>子选择器>后代选择器>伪类选择器>
单位em和rem的区别
css里还有很多常用的单位,例如px、em、rem等。 发现没有,em和rem就差一个字母,却是两个单位,虽然都表示元素字体的高度,但是和em单位相比,rem单位的优势是只要修改<html>
的文字大小,就可以改变整个页面中的元素大小了,是不是很方便
/*em的用法*/
div{
font-size:12px;
}
div>p{
width:10em;
height:10em;
}
复制代码
/*rem的用法*/
html{
font-size:14px;
}
div{
font-size:12px;
}
div>p{
width:10rem;
height:10rem;
}
复制代码
盒模型
在家中你要是想画出一块一块地方专门用于娱乐用的,那么此刻你就需要盒师傅给你画出一个地方,盒模型又分为标准盒子和怪异盒子。
- 标准盒模型下width=content内容的宽度,设定了width和height值的时候,padding和border不被包含在定义的width和height之内,用
box-sizing:content-box
表示;总面积的公式为width/height+padding* 2 + border* 2+margin*2。 - 怪异盒模型下width=content+padding+border,内容宽度会被padding和border挤小,也就是说width已经包含了padding和border的值了,用
box-sizing:border-box
表示怪异盒子;总面积公式为width/height+margin* 2。
伪元素
在房间的装修中少不了要用到伪元素来展现你装修之后的效果。
- 表示伪元素的有 ::before、::after、::first-letter和::first-line;
- 伪元素的语法都是在元素后面跟双冒号然后再跟伪元素的关键词;单冒号是用于伪类的
- 所有的伪元素都要用content属性声明引用内容,::before的引用文本显示在段落之前,::after的引用文本显示在段落之后
边框
border-style、border-width、border-color、border-radius分别表示边框的样式、宽度、颜色、圆角
阴影、剪切和滤镜
- 每一件小物品在光的照射下都会倒映出一个影子,离光源的远近都会影响到影子的大小和清晰度,
box-shadow
属性就是对这些现象的描述。
box-shadow有以下五个不同的参数
h-shadow | 必需的。水平阴影的位置。允许负值 |
---|---|
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离,实际是模糊程度 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。在css颜色值需按照颜色值的完整列表 |
- 在元素内创建一个剪切区域可以用
clip-path
来表示,然后剪切区域之外的那些将会被隐藏
下面用inset()函数来剪切一个矩形
{
width:10em;
height:10em;
clip-path:inset(1em 2em 3em 4em);
}
复制代码
clip-path
后面跟的函数都表示不一样的形状
inset():表示剪切一个矩形
circle():表示剪切一个圆形
ellipse():表示剪切一个椭圆形
polygon():表示剪切一个多边形
复制代码
- 想从多种角度看到多种视觉效果,那么就需要用到我们的滤镜咯
- 表示透明度的滤镜用函数
opacity()
表示,函数接收的参数值是从零到一来表示透明与否的,其中0表示完全透明,1表示不透明; - 表示模糊的滤镜用
blur()
来表示,函数接收的参数是一个长度值,表示模糊半径,对整个元素进行模糊处理 - hue-rotate()函数表示色相滤镜,函数接收一个角度值作为参数,正数表示沿顺时间方向寻找色值,负数表示沿逆时针方向寻找色值
- 还可以在
filter
属性中同时使用多个滤镜,多个函数之间用空格分开就可以了
表示接近透明
div:nth-child(1){filter:opacity(0.2);}
没有模糊效果
div:nth-child(1){filter:blur(0px);}
复制代码
计数器
- 计数器的完整语法包括3个语句:定义计数器
counter-reset
、计数器累加counter-increment
、读取计数器的值content:counter(n)
- counter-reset要定义在父容器中;counter-increment要定义在子元素中;content:counter()用于读出计数器的值,content属性是用于伪元素的,所以要在伪元素中读取计数器的值
.container{
font-size: 10px;
width: 50em;
display: grid;
grid-template-columns: repeat(7,1fr);
grid-gap: 1em;
counter-reset: n 1;
}
.container div{
width: 3em;
height: 3em;
background-color: rosybrown;
border-radius: 50%;
position: relative;
counter-increment: n 2;
}
.container div::before{
content: 'x';
position: absolute;
font-size: 1.5em;
font-family: sans-serif;
width: inherit;
line-height: 2em;
text-align: center;
color: white;
content: counter(n);
}
复制代码
变换、缓动和动画
把房子当作一个数轴,水平平移的时候用函数translateX()表示,垂直平移的时候用函数translateY()表示,X和Y要大写。 rotate()函数用于旋转元素,接收的参数表示元素被旋转的角度,正数顺时针旋转,负数逆时针旋转,单位用deg表示度,也可以用turn表示圈
表示水平平移
div:nth-child(1){transform:translateX(100%);}
表示逆时针旋转45°
div:nth-child(1){transfrom:rotate(-45deg)
复制代码
transition
用于元素从一个状态转换到另一个状态时中间加上过渡的效果,
transition-duration 表示缓动持续的时间,
transition-delay 表示转换时状态延时发生
transition-property 可以去掉我们不想让它参与缓动的元素,会直接变成终止状态,但是很少会单独使用
复制代码
animation-duration``和animation-timing-function
定义了动画时长和时间函数;animation-iteration-count
定义动画执行多少次,属性值infinite
表示无限次;animation-direction
定义动画的方向;animation-delay
定义了动画的延时启动时长,- animation-direction有四个值为
normal
、alternate
、reverse
、alternate-reverse
,分别表示从动画起点向终点运动、从动画起点向终点运动然后再折返到起点、从动画的终点向起点运动、从动画的终点向起点运动,然后再折返到终点。 - from...to...关键帧分别表示动画的起点和终点
@keyframes shift{
from{
transform:translateX(-6em);
}
}
复制代码
也可以用百分比关键帧代替,0%代替from,100%代替to。
- 关键帧也有一些缺点,比如关键帧只关心百分比值,不关心具体的时间,所以要是要调动动画时长的时候,还要修改关键帧的百分比值;不能明确的表明两次动画之间的间隔时长,必须把时间算到一次动画里,以此让动画的持续时间变长