css概念
cascading style sheets 层叠样式表,又叫级联样式表。文件后缀为.css
css唯一目的就是让网页具有美观一致的页面
css的引用方式
内部样式,在html文件的<head>里面写<style>
示例如下:
<style>
p{ color : red;
}
</style>
外部样式,html的<head>里面添加<link> + 单独的css文件
当样式需要应用到多个页面时,外部样式表将是理想的选择,使用外部样式,可以通过改变一个文件改变整个站点的外观,每个页面使用<link>标签链接到样式表,<link>标签在文档的头部,即head里面加入。
示例如下:Home.html文件的<head>里面添加<link>,如
<link rel="stylesheet" href="./public.css">
然后在html单独写css文件,命名为public.css,写如下句子,之后Home.html文件里面的p元素都会编程红色字体,字体大小变为50px
p{
color: red;
font-size: 50px;
}
css语法
css语法规则由两部分组成:选择器 以及一条或者多条声明(样式,比如字体颜色,字体大小等)
选择器
全局选择器
可以与任何元素匹配,优先级最低,一般做初始化样式,以*{}添加全局选择器,例如:
*{
margin:0;
padding:0;
}
元素选择器
比如p,b,div,img,a,body等标签,示例如下,p标签作为选择器:
<style>
p{
color: red;
font-size: 50px;
}
</style>
类选择器
规定用圆点 . 来定义,. + class的值,class的值可以重复,不能以数字开头
示例如下:.content{color: red; }
附:示例中<p class="content size">我emol了</p>,content size是两个类选择器,不是一个,同一个标签下可以有一个或者多个类选择器,主要记住写法(用空格隔开)
<head>
<style>
.content{
color: red;
}
</style>
</head>
<body>
<p>大家好</p>
<p>我很好</p>
<p class="content size">我emol了</p>
</body>
ID选择器
通过 # 索引,# + id的值,id的值不能重复
<style>
#text{
font-size: 30px;
}
</style>
<body>
<p>大家好</p>
<p>我很好</p>
<p id="text">我emol了</p>
</body>
合并选择器
语法:选择器1,选择器2...{}
<style>
p,.header, .footer{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<p>woshippp</p>
<p class="header">我是p标签</p>
<h3 class="footer">我标题标签</h3>
</body>
内联选择器,<style></style>
示例如下<p style="font-size: 50px;color: blue;">我是内联选择器</style>:
<body>
<p style="font-size: 50px;color: blue;">我是内联选择器</p>
</body>
选择器的优先级
元素选择器的权重1,class选择器的权重10,id选择器权重100,内联选择器权重1000
优先级:行内选择器>id选择器>类选择器>元素选择器
关系选择器
后代选择器 E F{} 选择所有被E包含的F元素,中间用空格隔开
子代选择器 E>F{} 选择所有E元素的直接子元素,用>隔开
相邻兄弟选择器E+F{} 选择紧跟E元素的F元素,用+表示,只能向下选择
通用选择器 E~F{} 选择E元素之后的所有兄弟元素F,作用于多个元素,用~表示,只能向下选择
CSS的盒子模型
在设计和布局时使用
content-内容,显示文本和图像
padding-内边距 内容周围的区域,padding:50px 10px 两个值,上下都是50px,左右都是10px
border-边框 边框
margin-外边距 边框周围的内容,加留白 margin-left/right/top/bottom 分辨是距离左边/右边/上边/下边长度
弹性盒子模型
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成,CSS3的一种新特性,是一种当页面需要适应不同屏幕大小以及设备类型时,确保元素有恰当的行为的布局方式
通过设置display的属性值为flex,定义为弹性容器
弹性容器包含一个或多个弹性子元素
display:flex
容器的属性有以下几种:
flex-direction-摆放方向 : row row-reverse column column-reverse 水平/水平翻转/垂直/垂直翻转 ,默认是横向摆放,示例如下,垂直摆放
<style>
.container{
width: 500px;
height: 500px;
background-color: #555;
display: flex;
flex-direction: column;
}
</style>
justify-content属性
justify-content-垂直方向上摆放方式,内容对齐属性,沿着弹性容器对齐
justify-content: flex-start flex-end center 靠上/靠下/靠中
align-items属性:
align-items:水平方向上摆放方式
align-items:flex-start flex-end center 靠上/靠下/靠中
示例如下:
<style>
.container{
width: 500px;
height: 500px;
background-color: #555;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
子元素属性:
flex :根据弹性盒子所设置的扩展因子作为比率来分配剩余空间,默认为0,权重
格式: flex:3 ,示例如下,总共分成5份,box1占3,box2占1,box3占1
<style>
.box1{
height: 100px;
background-color: aqua;
flex: 3;
}
.box2{
height: 100px;
background-color: red;
flex: 1;
}
.box3{
height: 100px;
background-color: green;
flex: 1;
</style>
字体属性
字体属性用于定义字体,颜色,大小,加粗,文字样式等
color,字体颜色
div{color:red;}
div{color:#fff;} 十六进制
div{color:rgb(255,0,0);}
div{color:rgb(255,0,0,0.5);} 最后一位值透明度,0全透明,0.5半透明,1不透明
font-size,字体大小
h1{font-size:40px;},chrome接受最小字体为12px
font-weight,字体粗细,100~900,默认400,700等同于blod
bold:粗字体
bolder:更粗字体
lighter:更细字体
h1{font-weight:900;}
font-style,字体样式
normal:正常字体
italic:斜体
font-family,字体的类型
指微软雅黑,宋体等,示例:font-family:"微软雅黑"
背景属性
背景属性有以下几个:
background-color:设置背景颜色
background-image:设置背景图片
background-position:设置背景图片显示位置
background-repeat:设置背景图片如何填充
background-size:设置背景图片大小属性
cover:保持图片纵横比并将图片缩放成完全覆盖背景区的最小大小
文本属性
text-align:指定文本的对齐方式,left/right/center 居左/居右/居中, 默认居左
text-decoration:添加文本的修饰,underline/overline/line-through 下划线/上划线/删除线
text-transform:控制文本的大小写,captialize/uppercase/lowercase 单词首字母大写/全部字母大写/全部字母小写
text-indent :控制首行缩进
表格属性
表格边框,border属性 border: 1px solid(实线)red(#f00); 表格线的粗细,边框线的样式实线虚线,边框线的颜色
border-collapse: collapse 折叠边框,单边框
width height 设置表格的宽度和高度
text-align vertical-align 设置表格的文本水平对齐方式(左中右) 表格中文本的垂直对齐方式
padding 表格的填充,单元格中文字和边框的间距中间设置填充,此时不用设置width height
文档流
浮动:float属性 ,脱离文档流
定义元素向哪个方向浮动,任何元素都可以浮动,当容器不足横向摆放时,会下一行摆放
left:元素向左浮动 right:元素向右浮动
用法:float:left
定位
通过position的属性指定元素的定位类型
relative absolute fixed 相对定位/绝对定位(随着页面的滚动而滚动)/固定定位(不随页面的滚动而滚动)
绝对定位/固定定位会有压盖现象,脱离文档流
相对于父级定位,父级有定位的话,相对定位/绝对定位位置是相对于父级容器移动,父级容器有设置定位的话,父级容器移动相对定位/绝对定位也会移动,父级容器没有设置定位的话,相对定位/绝对定位是相对于页面来移动
Z-index
值越大元素越靠上,不会脱离文档流
css3新特性
圆角:border-radius
border-radius:20px ,值越大,圆的越厉害,写100%时,直接画个圆
一个值的时候,四个圆角值相同,border-radius:20px
两个值的时候,第一个值是左上角和右下角 第二个值是右上和左下角
四个值的时候,第一个值左上角,第二个值是右上角,第三个值是右下角,第四个值是左下角
阴影:box-shadow,向一个框添加一个或者多个阴影,有四个值
box-shadow:h-shadow v-shadow blur color 水平阴影位置 垂直阴影位置 模糊距离 阴影的颜色
<style>
.box3{
height: 400px;
width: 400px;
background-color: green;
margin: 0 auto;
top: 100;
box-shadow: 10px 20px 20px rgba(0,0,0,0.5);
}
</style>
动画
动画是使元素从一种样式变换到另外一种样式的效果,
@keyframes创建动画
用百分比规定变化发生的时间,从0%到100%
animation执行动画
animation:name duration timing-function delay iteration-count direction
name 动画的名称
duration 动画的持续时间
timing-function 动画效果的速率 ease(默认)/linear/ease-in/ease-out/ease-in-out 分别代表
逐渐变慢/匀速/加速/减速/先加速后减速
delay 动画的开始时间(延时执行)
iteration-count 动画循环的次数,infinite为无限次循环
direction 动画播放的方向 ,正向执行,反向执行 normal/alternate 正常播放(默认)/偶数次向前播放奇数次反向播放
animation-paly-state 控制动画播放状态 ,running代表播放,pause代表停止播放
示例如下:
<style>
.box{
width: 500px;
height: 400px;
margin: 40px auto;
background-color: #2b92d4;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0, 0, 0.3);
animation: breath 2.7s ease-in-out infinite alternate;
}
@keyframes breath {
0%{
opacity: 0.2;
box-shadow: 0 1px 2px rgba(255,255, 255, 0.1);
}
50%{
opacity: 0.5;
box-shadow: 0 1px 2px rgba(18,190, 184, 0.76);
}
100%{
opacity: 1;
box-shadow: 0 1px 30px rgba(59,255, 255, 1);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
媒体查询
媒体查询可以使页面在不同终端设备下达到不同效果,根据设备大小自动识别加载不同样式
@media screen,用法示例如下:
<style>
.box{
width: 300px;
height: 300px;
}
@media screen and (max-width:768px){
.box{
background-color: green;
}
}
@media screen and (min-width:768px) and (max-width:996px){
.box{
background-color: brown;
}
}
@media screen and (min-width:996px){
.box{
background-color: pink;
}
}
</style>
雪碧图
CSS sprite叫CSS精灵图,或者雪碧图,一种网页处理图片处理方式,允许将一个页面涉及到的所有零星图片都包含到一张大图上去,比如表情包
较少图片字节,减少网页的http请求,大大提高网页性能
原理:
background-image引入一张背景图片
background-position把背景图片移动到自己需要的位置,background-position:10px 20px; 其中10px/20px分别代表X轴向右移动10px Y轴向下移动20px
示例如下,代码中设置display:block是因为,span是内联元素,设置成block块元素,其设置的width和height才生效:
<style>
span{
display: block;
width: 610px;
height: 610px;
background-image: url(./3.webp);
border: 1px solid red;
background-position:0px 0px;
}
</style>
</head>
<body>
<span class="icon"></span>
</body>
字体图标
常用到一些图标,使用图标时经常碰到失真的现象,图片数量很多的话加载速度就会变得很慢,所以我们使用字体图标的方式显示图标
网址下载图标库后,解压粘贴到项目的.html同级目录下,里面会有一个demo_index.html文件,双击打开后,可以查看使用方法