CSS样式
CSS样式
引入方式
内联样式：
<p style="background: orange; font-size: 24px;">CSS<p>内部样式：
<head>
<style>
h1 {
background: red;
}
</style>
</head>外部样式：
<link rel="stylesheet" type="text/css" href="xxx.css">选择器
全局选择器：
*{
margin: 0;
padding: 0;
}元素选择器：HTML文档中的元素，p、b、div、a、img、body等。
p{
font-size:14px;
}类选择器：
<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
width:800px;
}ID选择器：针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义
<h2 id="mytitle">你好</h2>
#mytitle{
border:3px dashed green;
}合并选择器：
.header, .footer{
height:300px;
}选择器的优先级：
CSS中,权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
id选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器
字体属性
color：规定文本的颜色
div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);} #（a）取值 0~1 之间， 代表透明度font-size：设置文本的大小，最小字体是12px
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}font-weight：设置文本的粗细
值 | 描述 |
|---|---|
bold | 定义粗体字符 |
bolder | 定义更粗的字符 |
lighter | 定义更细的字符 |
100~900 | 定义由细到粗 400等同默认，而700等同于bold |
H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}font-style：指定文本的字体样式
值 | 描述 |
|---|---|
normal | 默认值 |
italic | 定义斜体字 |
font-family：属性指定一个元素的字体，每个值用逗号分开
font-family:"Microsoft YaHei","Simsun","SimHei";背景属性：
属性 | 描述 |
|---|---|
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-position | 设置背景图片显示位置 |
background-repeat | 设置背景图片如何填充 |
background-size | 设置背景图片大小属性 |
background-repeat属性：
值 | 说明 |
|---|---|
repeat | 默认值 |
repeat-x | 只向水平方向平铺 |
repeat-y | 只向垂直方向平铺 |
no-repeat | 不平铺 |
background-size属性：
值 | 说明 |
|---|---|
length | 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
percentage | 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
background-position属性：该属性设置背景图像的起始位置，其默认值是：0% 0%
值 | 说明 |
|---|---|
left top | 左上角 |
left center | 左 中 |
left bottom | 左 下 |
right top | 右上角 |
right center | 右 中 |
right bottom | 右 下 |
center top | 中 上 |
center center | 中 中 |
center bottom | 中 下 |
x% y% | 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0% |
xpos ypos | 单位是像素 |
.box{
width: 600px;
height: 600px;
background-color: #fcc;
background-image: url("images/img1.jpg");
background-repeat: no-repeat;
background-position: center;
}文本属性
text-align：指定元素文本的水平对齐方式
值 | 描述 |
|---|---|
left | 文本居左排列，默认值 |
right | 把文本排列到右边 |
center | 把文本排列到中间 |
text-decoration：text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等
值 | 描述 |
|---|---|
underline | 定义下划线 |
overline | 定义上划线 |
line-through | 定义删除线 |
text-transform：text-transform 属性控制文本的大小写
值 | 描述 |
|---|---|
captialize | 定义每个单词开头大写 |
uppercase | 定义全部大写字母 |
lowercase | 定义全部小写字母 |
text-indent：text-indent 属性规定文本块中首行文本的缩进
p{
text-indent:50px;
}如果值是负数，将第一行左缩进
表格属性
表格边框：指定CSS表格边框，使用border属性
table, td {
border: 1px solid black;
} 粗细 样式 颜色折叠边框：border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table { border-collapse:collapse; }
table,td { border: 1px solid black; }表格文字对齐：表格中的文本对齐和垂直对齐属性，text-align属性设置水平对齐方式，向左，右，或中心
td { text-align:right; }
td { height:50px; vertical-align:bottom; }表格填充：如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性
td { padding:15px; }表格颜色：下面的例子指定边框的颜色，和th元素的背景和文本颜色
table, td, th { border:1px solid green; }
td { background-color:green; color:white; }关系选择器
后代选择器：选择所有被E元素包含的F元素，中间用空格隔开
<ul>
<li>宝马</li>
<li>奔驰</li>
</ul>
<ol>
<li>奥迪</li>
</ol>ul li{
color:green;
}子代选择器：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示
<div>
<a href="#">子元素1</a>
<p> <a href="#">孙元素</a> </p>
<a href="#">子元素2</a>
</div>div>a{
color:red
}相邻兄弟选择器：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>h1+p{
color:red;
}通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>h1~p{
color:red;
}盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
外边距（margin），边框（border），内边距（padding），和实际内容（content）
- Margin(外边距) - 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）
- Border(边框) - 围绕在内边距和内容外的边框
- Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右）
- Content(内容) - 盒子的内容，显示文本和图像
弹性盒模型
弹性盒子是 CSS3 的一种新的布局模式
CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
弹性盒子只定义了弹性子元素如何在弹性容器内布局
CSS3弹性盒内容：
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
- 弹性容器通过设置
display属性的值为flex将其定义为弹性容器 - 弹性容器内包含了一个或多个弹性子元素
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>父元素上的属性
display 属性：display:flex;开启弹性盒，属性设置后子元素默认水平排列
flex-direction属性：flex-direction 属性指定了弹性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reverse- row：横向从左到右排列（左对齐），默认的排列方式
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
- column：纵向排列
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
justify-content 属性：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content: flex-start | flex-end | center flex-start弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放flex-end弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放center弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）
align-items 属性：align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-items: flex-start | flex-end | center flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界center弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
子元素上的属性
flex：flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
<div class="flex-container">
<div class="flex-item1">flex item 1</div>
<div class="flex-item2">flex item 2</div>
<div class="flex-item3">flex item 3</div>
</div>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: gold;
}
.flex-item1 {
height: 150px;
background-color: red;
flex: 1;
}
.flex-item2 {
height: 150px;
background-color: green;
flex: 2;
}
.flex-item3 {
height: 150px;
background-color: blue;
flex: 1;
}
</style>
文档流
文档流是文档中可显示对象在排列时所占用的位置/空间；标准流里面的限制非常多，导致很多页面效果无法实现
- 高矮不齐，底边对齐
- 空白折叠现象
- 无论多少个空格、换行、tab，都会折叠为一个空格
- 如果我们想让img标签之间没有空隙，必须紧密连接
使⼀个元素脱离标准文档流有三种方式
- 浮动
- 绝对定位
- 固定定位
浮动
float 属性定义元素在哪个方向浮动，任何元素都可以浮动。
值 | 描述 |
|---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
浮动的原理：
- 浮动以后使元素脱离了文档流
- 浮动只有左右浮动，没有上下浮动
脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象
当所有元素同时浮动的时候，会变成水平摆放，向左或者向右
当容器不足以横向摆放内容时候，会在下一行摆放
清除浮动
浮动副作用：
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动
- 浮动元素会造成父元素高度塌陷
- 后续元素会受到影响
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
.nav{
width: 100px;
height: 100px;
background-color: red;
}当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用
解决方案有很多种：
- 父元素设置高度
- 受影响的元素增加clear属性
- overflow清除浮动
- 伪对象方式
overflow清除浮动
如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动
父级标签的样式里面加: overflow:hidden;clear: both;
.container{
width: 350px;
border: 1px solid red;
overflow: hidden;
clear: both;
}
伪对象方式
如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理
为父标签添加伪类after,设置空的内容，并且使用clear:both;
.container {
width: 350px;
border: 1px solid red;
}
.container::after {
content: "";
display: block;
clear: both;
}定位
position 属性指定了元素的定位类型
值 | 描述 |
|---|---|
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
其中，绝对定位和固定定位会脱离文档流
设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom
相对定位，改变位置的参照物是自己原来的位置，不脱标，占位，原来的位置依旧是它的。
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
固定定位永远都会相对于浏览器窗口进行定位 ，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
CSS3新特性
border-radius 属性，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
阴影：box-shadow 向框添加一个或多个阴影。
box-shadow: h-shadow v-shadow blur color;值 | 描述 |
|---|---|
h-shadow | 必选，水平阴影的位置 |
v-shadow | 必选，垂直阴影的位置 |
blur | 可选，模糊距离 |
color | 可选，阴影的颜色 |
动画
动画是使元素从一种样式逐渐变化为另一种样式的效果
您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%
0% 是动画的开始，100% 是动画的完成。
使用@keyframes规则，你可以创建动画：
@keyframes name {
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}name：动画名称，开发人员自己命名；
percent：为百分比值，可以添加多个百分比值；
animation执行动画：
animation: name duration timing-function delay iteration-count direction;值 | 描述 |
|---|---|
name | 设置动画的名称 |
duration | 设置动画的持续时间 |
timing-function | 设置动画效果的速率（如下） |
delay | 设置动画的开始时间（延时执行） |
iteration-count | 设置动画循环的次数，infinite为无限次数的循环 |
direction | 设置动画播放的方向（如下） |
animation-play-state | 控制动画的播放状态：running代表播放，而paused代表停止播放 |
timing-function值 | 描述 |
|---|---|
ease | 逐渐变慢（默认） |
linear | 匀速 |
ease-in | 加速 |
ease-out | 减速 |
ease-in-out | 先加速后减速 |
direction值 | 描述 |
|---|---|
normal | 默认值为normal表示向前播放 |
alternate | 动画播放在第偶数次向前播放，第奇数次向反方向播放 |
.animation {
width: 300px;
height: 300px;
background-color: red;
animation: anima 5s linear 5s infinite;
}
.animation:hover {
animation-play-state: paused;
}
@keyframes anima {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blueviolet;
}
}
ease-out | 减速 |
| ease-in-out | 先加速后减速 |
| direction值 | 描述 |
| ----------- | ------------------------------------------------ |
| normal | 默认值为normal表示向前播放 |
| alternate | 动画播放在第偶数次向前播放，第奇数次向反方向播放 |
~~~css
.animation {
width: 300px;
height: 300px;
background-color: red;
animation: anima 5s linear 5s infinite;
}
.animation:hover {
animation-play-state: paused;
}
@keyframes anima {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blueviolet;
}
}