一、CSS的概念
CSS:层叠样式表
-
作用:用来控制我们HTML标签的展示样式,使得标签的样式展示的更加丰富,就是用来解耦的
我们学习了CSS以后 尽量不使用 HTML标签自带的属性 全部用CSS 去设置
层叠性:多个多个样式控制一个标签,这几个样式对一个标签同时生效 -
CSS 跟HTML 配合使用的方式
(1)内联样式: 将CSS 代码写在标签上 所有的标签都会有一个 style属性
只能控制单个标签,且书写凌乱,不推荐使用.
(2)内部方式:将style属性写在head标签内部 常用
<style type="text/css">
选择器{
属性1:属性值;
属性2:属性值
}
</style>
···
(3)外联样式:将CSS样式写在一个单独的文件中,这种方式最常用
二、常用标签
1.div标签
div标签是一个纯净的块标签,所谓的纯净,就是这个标签,不带有任何的样式(没有宽高,没有背景等)
块标签:这个标签会默认占据一行
2.层浮动
<!-- left right浮动,让块标签可以一字排开 -->
float:left;
<!-- 设置浮动后得清除浮动,这个div就是用来清除浮动的clear -->
<div id="" style="clear: left;">
</div>
3.层溢出
overflow超出内容是否包裹
scroll(强行加滚动条)
visible(默认值溢出还是显示)
hidden(隐藏溢出部分)
auto(自动判断是否加滚动条)
4.span标签
span标签纯净的行标签,所谓的纯净,就是不带有任何样式
行标签:不会占据一行
5.块标签与行标签的区别与转换
- 区别:行标签,不能设置宽高,以及上下间距 ,他的内容有多宽他就有多宽 设置左右间距有效
- 转换:display
block(把行标签变成块标签)
none(隐藏一个块,他隐藏之后占的位置就不在了)
inline(把块标签变为行标签)
inline-block(把块标签,变成行标签,还能设置宽高,以及上下间距)
三、选择器
- 选择器:用来选择一个或多个标签,进行样式的控制,为了提高CSS代码的复用性
- 选择器的优先级:为了解决多个选择器,出现属性控制冲突时,听谁的
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
1.id选择器
id选择器:一次选择一个标签
<style type="text/css">
#div1,#div2{
width: 300px;
height: 300px;
border: 2px black solid;
background-color: pink;
}
</style>
2.类选择器
class 选择器:一次可以选择多个标签
<style type="text/css">
.myClass{
color: #FFC0CB;
font-size: 150px;
font-family: 楷体;
}
</style>
3.标签选择器
标签选择器:一次可以选择多个标签
<style type="text/css">
div,h1{
color:#0000FF;
font-size:19mm;
}
</style>
4.属性选择器
<style type="text/css">
[id]{
color: red;
}
div[id=div1]{
color: aqua;
}
</style>
5.通配符选择器*
<style type="text/css">
*{
font-family:微软雅黑;
background: #FFC0CB;
}
</style>
6.伪类选择器
<style type="text/css">
链接状态
a:link{
color: #FF0000;
}
鼠标悬浮状态
a:hover{
color: palegreen;
}
按下鼠标的状态
a:active{
color: #FFFF00;
}
访问过后的状态
a:visited{
color: plum;
}
</style>
7.子选择器div >p
<style type="text/css">
#div1>h1>b{
color: yellow;
}
#div2>h1,h2,h3{
color: green;
}
</style>
8.后代选择器
<style type="text/css">
#div1{
color: antiquewhite;
}
#div1 div div{
color: fuchsia;
}
</style>
9.相邻选择器
<style type="text/css">
h1 +h2{//相邻一个
color: red;
}
h1 ~h2{//相邻所有
color: green;
}
</style>
四、CSS的常用属性
1.字体属性
font-family | 设置字体 |
---|---|
font-size字体大小 | xx-small(极小),x-small(较小),small(小),mediun(标准),large(大) |
font-style字体的样式 | normal正常显示字体,italic斜体字,oblique歪斜体 |
font-weight字体的加粗 | normal正常显示 bold粗体 bolder加粗 lighter细体 number数字型 |
text-shadow字体的阴影 | (规定水平阴影、垂直阴影、模糊距离、以及阴影的颜色) |
font-variant字体的变体(主要是英文字体) | normal正常字体 small-caps表示英文字母显示为小型的大写字母 |
2.背景属性
background-color | 背景颜色 |
---|---|
background-image | 背景图片 |
background-size | 规定背景图片的尺寸 |
background-attachment | 背景图片是否随着滚动条的移动而移动(scroll滚动,fixed固定不动) |
background-repeat | 是否重复铺平整个网页(no-repeat不重复) |
background-position | 背景图片的开始位置(值1 左右位置,值2 上下位置) |
3.边框的设置
border-style边框的样式 | none没有边框dotted点线dashed虚线solid实线double双实线 |
---|---|
border-width边框的宽度 | thin细边框medium中等边框thick粗边框,长度—数字 |
border-color边框的颜色 | |
border-radius设置边框圆角 | 先把边框设置后在设置圆角 |
box-shadow边框阴影 | x方向的偏移像素、y方向的偏移像素、模糊的像素值、阴影的颜色 |
4.CSS对文字的排版
letter-spacing来控制在浏览器中所显示的字符间的空格距离 | normal正常显示,长度-可以使用负数,单位px像素 |
---|---|
text-decoration为文字添加下划线,删除线等修饰 | underline添加下划线 overline添加上划线 line-through添加删除线 blink添加闪烁效果 none没有任何修饰 |
text-align控制文本的排列和对齐方式 | left左对齐 right右对齐 center居中对齐 justify两端对齐 |
line-height控制文本内容之间的间距 | normal浏览器默认的行高 |
text-indent | 用来控制每个段落的首行缩进的距离 |
5.页面定位:position
绝对定位:元素之间,不存在参照关系,所有 元素只参照起始位置
相对定位:页面元素的默认定位方式,一个元素的位置会参照上一个元素的位置
absolute绝对定位 | 设置间距top left right bottom |
relative相对定位 | 设置间距margin-left margin-top margin-right margin-bottom |
6.过渡动画transition
格式:transition:width 2s;(应用于宽度,时间2秒)
transition-property:width;
transition-duration:5s;过渡时长
transition-delay:2s;延时过渡
transition-timing-function:
linear(匀速的过渡效果)
ease(先慢后快再慢慢结束的过渡效果)
ease-in(以慢速开始的过度效果)
ease-out(以慢速结束的过渡效果)
7.transform动画
位移动画(左右位置,上下位置) | transform:translate(50px,100px); |
旋转动画 | transform:rotate(30deg); |
缩放动画(宽度,高度) | transform:scale(2,4); |
扭曲动画(绕X,Y轴翻转) | transform:skew(30deg,30deg); |
8.自定义动画Animation
1.开启动画animation:myDH 5s;(myDH动画名,5s动画时间)
2.自定义动画
@keyframes myDH{
from{
//初始状态
}
to{
//最终动态
}
}
9.内间距
padding:填充用来设置边框和其内部的元素之间的空白距离
上边距padding-top 下边距padding-bottom
左边距padding-left 右边距padding-right
box-sizing:border-box;我们在设置内间距的时候,默认会撑大外框,加上这个属性,就不会了
10.设置鼠标指针样式
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:pointer;设置鼠标变小手
- 设置鼠标悬浮的效果
div:hover{
}
- 设置鼠标按下的效果
div:active{
}
11.彩色图片变白
filter:grayscale(100%);
filter:gray;
- 浏览器的兼容问题,不同浏览器不同写法
1.IE 9
-ms-filter: grayscale(100%);
-ms-filter: gray;
2.Firefox
-moz-filter:grayscale(100%);
-moz-filter:gray;
3.Safari and Chrome
-webkit-filter:grayscale(100%);
-webkit-filter:gray;
4.Opera
-o-filter:grayscale(100%);
-o-filter:gray;
12.其他属性
- 字母大小写的转换
text-transform:uppercase
- 透明度
rgba a表示透明度
opacity: 0.5;调整背景透明度 0----1
- 当多个块,为绝对定位后,可能重叠现象
z-index可以设置他们的重叠顺序,数值越大就在最上面
- 显示元素与隐藏元素
visibility:visible显示元素
visibility:hidden隐藏元素
display:none; 隐藏之后,占的位置不在
visibility:visible;隐藏之后,占的位置还在
- 轮廓
outline:#00ff00 dotted thick;
五、盒子模型
顺序排列,用于div设置显示方式为盒子模型给父布局设置,其子元素按父元素设置的效果排列。
1.设置盒子模型
display: flex;
2.排列方式横向或竖向
flex-direction: row | row-reverse | column | column-reverse
3.按方向居开始,中间,末尾
justify-content:flex-start | flex-end | center;
4.自动换行 或换列
flex-wrap:wrap;