1.介绍css
css是层叠样式表
W3C : 结构层:HTML
表现层: css
行为层:JavaScript (js)
2.css 引入方式
2.1 行内样式 (标签样式)
在标签内加上 style 属性
<body>
<h2 style="color:red;text-align:center">这是一个标题</h2>
</body>
2.2 内嵌样式
写在 style 标签内 ，style标签写在head标签内
<!DOCTYPE html>
<html>
<head>
<title>内嵌样式</title>
<style type="text/css">
h2{
color:red;
text-aling:center;
}
</style>
</head>
<body>
<h2>这是一个标题</h2>
</body>
</html>2.3 外链样式
1. 在head标签里写link标签
2.新建一个.css文件，专门写css样式
3.link标签内herf属性将css文件导入
<!DOCTYPE html>
<html>
<head>
<title>外链样式</title>
<link rel="stylesheet" type="text/css" href="1.css">
</style>
</head>
<body>
<h2>这是一个标题</h2>
</body>
</html>css文件内容:
h2{
color:green;
text-align:center;
}2.4 导入样式
通过 @import ur（""）导入 .css文件
<head>
<title>导入样式</title>
<style type="text/css">
@import url("1.css");
</style>
</head>3.选择器
3.1 基本选择器
- 标签选择器 (标签名)
- id选择器 （# id属性名 )
- 类选择器 （. class 属性名 )
- 通用选择器 （* 通配符)
- 优先级: id>类>标签>通用
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
h2{
color:red;
}
#one{
color:blue;
}
.two{
color:green;
}
*{
color:yellow;
}
</style>
</head>
<body>
<h2>这是一个标题</h2>
<p id="one">这是一个段落</p>
<div class="two">这是一个div</div>
<div>这是第二个div</div>
<p>这是第二个段落</p>
</body>
</html>3.2 包含选择器
- 子代选择器 ------ 获取某个标签的第一级子标签
- 后代选择器------ 获取某个标签内所有的子标签
- 分组选择器 (逗号选择器)-------给多个标签加上样式，通过逗号隔开
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*子代选择器*/
.list>ul{
color:blue;
}
/*后代选择器*/
.list li{
color:yellow;
}
/*分组选择器*/
h2,#list,.list{
color:red;
}
</style>
</head>
<body>
<h2>这是一个标题</h2>
<p id="list">这是一个段落</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
</ul>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
</div>
</body>
</html> 3.3 属性选择器
<!DOCTYPE html>
<html>
<head>
<title>属性选择器</title>
<style type="text/css">
/*选中某个标签的某个值*/
div[title]{
color:red;
}
/*确切的等于某个值*/
input[type="text"]{
background:pink;
}
/*某个属性含有某个值*/
input[type *="e"]{
background:red;
}
/*某个属性以什么开头*/
input[type ^="e"]{
background:green;
}
/*某个属性以什么结尾*/
input[type $="r"]{
background:blue;
}
/*下一个标签*/
.two+p{
color:pink;
}
/*属性名称等于某个值的时候*/
[title="标题"]{
color:yellow;
}
</style>
</head>
<body>
<div title="one">这是一个div</div>
<p class="content">这是一个段落</p>
<input type="text" id="" class="" value="张三">
<input type="for" id="" class="" value="李四">
<input type="email" id="" class="" value="王五">
<div class="two">这是第二个div</div>
<p id="con2">这是第二个段落</p>
<div title="标题">这是第三个div</div>
</body>
</html>运行结果:
3.4 伪类选择器
伪类: 同一个标签，根据不同状态，有不同的样式 . 链接的不同状态都可以以不同的方式显示
- a:link {color:#FF0000;} ------ 未访问的链接
- a:visited {color:#00FF00;} ------- 已访问的链接
- a:hover {color:#FF00FF;} -------- 鼠标划过链接
- a:active {color:#0000FF;} ------ 已选中的链接
- 顺序 :link :visited :hover :active 这四种超链接伪类选择器的顺序是一定的，不可以改变
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<style type="text/css">
a:link{
color:red;
}
a:visited{
color:blue;
}
a:hover{
color:green;
}
a:active{
color:pink;
}
</style>
</head>
<body>
<a href="D:\HTML\demo.03.html">超链接</a>
</body>
</html>3.5 伪元素选择器
:before / ::before 选择器向选定的元素前插入内容
:after / ::after 选择器向选定的元素后插入内容
使用content 属性来指定要插入的内容
<!DOCTYPE html>
<html>
<head>
<title>伪元素选择器</title>
<style type="text/css">
p::before{
content:"zhangsan";
color:red;
}
p::after{
content:"lisi";
color:blue;
}
</style>
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>运行结果:
4. css常见样式
4.1 样式的基本语法
选择器{
属性：属性值；
属性：属性值；
}
4.2 常见样式
4.2.1 样式的特点
1、继承性--------子元素继承父元素的样式
2、层叠性 ------如果子元素与父元素是相同的样式，则子元素的样式会覆盖掉父元素的样式（后面定义的样式会覆盖前面定义的样式）
4.2.2 控制字体
- 字号 : font-size : 20px;
- 颜色 ：color : blue;
- 字体 ：font-family : "宋体";
- 行高 : line-height : 150% 1.5em; （em 指字符宽度的倍数）
- 字体粗细 ：font-weight : blod; (normal 是默认值）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
font-size:30px;
color:green;
font-family:"楷体";
line-height:200%;
font-weight:blod;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>运行结果：
4.2.3 控制文本
- 文本缩进 ：text-indent : 2em; (可取负值）
- 文本对齐方式 ：text-align ：left; （center / right )
- 文本大小写转换 : text-transform : none; (none正常大小 / capitalize每个单词第一个字母转换为大写 / uppercase变为大写 / lowercase变为小写 ）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
text-indent:3em;
text-align:center;
text-transform:uppercase;
}
</style>
</head>
<body>
<p>apple</p>
</body>
</html>运行结果：
5. 布 局
5.1 盒子模型
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
border ---边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<style type="text/css">
div{
width:200px;
height:200px;
margin:100px;
border:3px double blue;
padding:20px;
}
</style>
</head>
<body>
<div>这是一个div</div>
</body>
</html>运行结果：
5.2 浮动布局
浮动 - 使用float
float 会使元素向左或向右移动，其周围的元素也会重新排列。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边。
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
<!DOCTYPE html>
<html>
<head>
<title>浮动布局</title>
<style type="text/css">
.box1{
width:200px;
height:100px;
border:1px solid black;
background-color: blue;
float:left;
}
.box2{
width:200px;
height:100px;
border:1px solid black;
background-color: pink;
/*float:right;*/
clear:left;
}
.box3{
width:200px;
height:100px;
border:1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
</html>
运行结果1：（未使用clear）
运行结果2：（使用clear）
5.3 定位布局
属性：position ----- 设置对象的定位方式
值：
- static -----静态定位（没有定位）默认值
- relative -------相对定位 (对象不从文档流中分离出来，通过设置left、right、top、bottom四个属性相对于自身位置进行相对定位)
- fixed ------ 生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left、right、top、bottom四个属性进行规定
- absolute ------绝对定位（将对象从文档流中分离出来，通过设置left、right、top、bottom四个属性 相对于父级对象进行绝对定位，如果绝对定位的元素没有父级，它将使用文档主体（body），并随页面滚动一起移动）
<!DOCTYPE html>
<html>
<head>
<title>定位布局</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.main{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 200px;
}
.box1{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: blue;
position: absolute; /*绝对定位，分离*/
top: 100px;
left: 200px;
}
.box2{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
position: relative; /*相对定位，不分离*/
left: 200px;
}
.box3{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</div>
</body>
</html>运行结果：
5.4 css3 弹性盒子
- 弹性盒子组成 ：弹性容器 （Flex container) 和 弹性子元素 （Flex item)
- 弹性盒子通过设置 display 属性来实现 ：display:flex 或 display:inline-flex
- 一个弹性容器可以包含一个或者多个弹性元素
<!DOCTYPE html>
<html>
<head>
<title>css3弹性盒子</title>
<style type="text/css">
.flex-contaniner{
width:400px;
height:200px;
background-color:blue;
display:inline-flex;
}
.flex-item{
width:100px;
height:100px;
background-color:yellow;
border:1px solid black;
}
</style>
</head>
<body>
<div class="flex-contaniner">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
</html>运行结果：
5.4.1 常见属性
5.4.1.1 flex-direction
flex-direction 属性指定弹性子元素在父容器中的排列方式。
flex-direction的值：row：横向从左到右排列（左对齐），默认值
row-reverse：反转横向排列（右对齐，从后往前排，第一项排在父容器最右边）
column：纵向从上往下排列
column-reverse：反转纵向排列 （从下往上排，第一项排在父容器最下边）
<style type="text/css">
.flex-contaniner{
width:400px;
height:300px;
background-color:blue;
display:inline-flex;
flex-direction:column-reverse;
}
.flex-item{
width:100px;
height:100px;
background-color:yellow;
border:1px solid black;
}
</style>运行结果：
5.4.1.2 flex-wrap
- nowrap : 规定弹性项目不换行 ，默认值
- wrap : 规定弹性项目会在需要时换行
- wrap-reverse ：规定弹性项目会在需要时以反方向换行
<!DOCTYPE html>
<html>
<head>
<title>css3弹性盒子</title>
<style type="text/css">
.flex-contaniner{
width:400px;
height:300px;
background-color:blue;
display:flex;
flex-wrap:nowrap;
/*flex-wrap:wrap;
flex-wrap:wrap-reverse;*/
}
.flex-item{
width:100px;
height:100px;
background-color:yellow;
border:1px solid black;
}
</style>
</head>
<body>
<div class="flex-contaniner">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
<div class="flex-item">flex item4</div>
<div class="flex-item">flex item5</div>
<div class="flex-item">flex item6</div>
<div class="flex-item">flex item7</div>
<div class="flex-item">flex item8</div>
<div class="flex-item">flex item9</div>
</div>
</body>
</html>
运行结果：
flex-wrap:nowrap flex-wrap:wrap flex-wrap:wrap-reverse
5.4.1.3 justify-content
- flex-start：
弹性项目向行头紧挨着填充 , 默认值
- flex-end：
弹性项目向行尾紧挨着填充
- center：
弹性项目居中紧挨着填充（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）
- space-between：
弹性项目平均分布在该行上，相邻项目的间隔相等
- space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间 , 首尾两边和弹性容器之间留有一半的间隔
<!DOCTYPE html>
<html>
<head>
<title>css3弹性盒子</title>
<style type="text/css">
.flex-contaniner1{
width:400px;
height:50px;
background-color:blue;
border:1px solid black;
display:flex;
justify-content:flex-start;
}
.flex-contaniner2{
width:400px;
height:50px;
background-color:blue;
border:1px solid black;
display:flex;
justify-content:center;
}
.flex-contaniner3{
width:400px;
height:50px;
background-color:blue;
border:1px solid black;
display:flex;
justify-content:space-around;
}
.flex-item{
width:50px;
height:50px;
background-color:yellow;
border:1px solid black;
}
</style>
</head>
<body>
<div class="flex-contaniner1">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
<div class="flex-contaniner2">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
<div class="flex-contaniner3">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
</html>
运行结果:
6. css 中特殊样式
6.1 css中变换效果
- 2D 转换
- 3D 转换
6.1.1 2D 转换
通过transform属性进行设置
transform 的值 ：
- translate(x,y）：沿着 x轴 和 y轴 移动元素
transform:translate(50px,150px);
- translateX(n) ：沿着 x轴 移动元素
transform:translateX(90px);
- translateY(n) ：沿着 y轴 移动元素
transform:translateY(90px);
- rotate(angle) : 使元素顺时针（angle是正数）或逆时针（angle是负数）旋转
transform:rotate(-30deg);
- scale(x,y) : 改变元素的宽度和高度
transform:scale(0.5,0.5);
- scaleX(n) : 改变元素的宽度
transform:scaleX(2);
- scaleY(n) : 改变元素的高度
transform:scaleY(2);
- skew(x-angle,y-angle) : 沿着 x轴 和 y轴 倾斜
transform:skew(20deg,20deg);
- skewX(angle) : 沿着 x轴 倾斜
transform:skewX(10deg);
- skewY(angle) : 沿着 y轴 倾斜
transform:skewY(10deg);
- matrix(n,n,n,n,n,n) : 整合所有2D转换的方法
参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
6.1.2 3D 转换
transform 的值 ：
- translate3d(x,y,z) : x、y、z轴的 3D转换
- translateX(x) : x轴 3D 转换
- translateY(y) : y轴 3D 转换
- translateZ(z) : z轴 3D 转换
- scale3d(x,y,z) : x、y、z轴的 3D缩放转换
- scaleX(x) : x轴 3D 缩放转换
- scaleY(y) : y轴 3D 缩放转换
- scaleZ(z) : z轴 3D 缩放转换
- rotate3d(x,y,z,angle) : x、y、z轴的 3D旋转
- rotateX(angle) : x轴上的 3D旋转
- rotateY(angle) : y轴上的 3D旋转
- rotateZ(angle) : z轴上的 3D旋转
- perspective(n) : 定义3D转换元素的透视视图
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) : 整合3D转
6.2 css过渡效果
1. 通过以下属性进行设置：
- transition-property : 规定过渡效果所针对的 css属性 的名称
- transition-duration : 规定过渡效果所持续的时间
- transition-delay : 规定过渡效果何时开始（单位秒）
- transition-timing-function : 规定过渡效果的速度曲线
- transition : 简写属性，用于将四个过渡属性设置为单一属性
2. transition-timing-function 的值 ：
- ease ：规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
- linear ：规定过渡效果从开始到结束具有相同速度
- ease-in ：规定过渡效果缓慢开始
- ease-out ： 规定过渡效果缓慢结束
- ease-in-out ： 规定过渡效果缓慢开始和结束
- cubic-bezier(n,n,n,n) ：自己定义值（0-1）
3. 触发过渡效果用 （：hover)
<!DOCTYPE html>
<html>
<head>
<title>css过渡效果</title>
<style type="text/css">
.box{
width:100px;
height:100px;
background-color:yellow;
border:1px solid black;
}
div{
transition:width 10s,height 10s,transform 10s;
transition-timing-function:ease-out;
}
div:hover{
width:300px;
height:300px;
transform:rotate(90deg);
background-color:black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>6.3 动画效果
@keyframes规则创建动画，实现的是将一个元素从一个css样式变换到另一个css样式，使用的是from和to两个关键字
属性：
- @keyframes : 规定动画
- animation-name : 规定动画名称
- animation-duration : 规定动画完成一个周期所花费的时间
- animation-delay : 规定动画何时开始 （默认为0秒）i
- animation-iteration-count : 规定动画被播放的次数 (默认为1次 ; 持续播放用infinite）
- animation-fill-mode : 规定元素在不播放动画时的样式（开始前、结束后）
- animation-timing-function : 规定动画的速度曲线（默认ease）
- animation-direction : 规定动画向前播放（默认，normal) 还是向后播放(reverse)还是交替播放(先向前再向后alternate ， 先向后再向前alternate-reverse)
- animation-play-state : 规定动画是运行还是暂停（默认running)
- animation : 所有动画属性的简写属性
<!DOCTYPE html>
<html>
<head>
<title>css动画效果</title>
<style type="text/css">
@keyframes first{
/*from{background:black;}
to{background:pink;}*/
0%{
background:black;
}
50%{
background:blue;
transform:rotate(60deg);
}
100%{
background:pink;
transform:rotate(90deg);
}
}
div{
width:100px;
height:100px;
border:1px solid black;
animation-name:first;
animation-duration:10s;
/*animation-timing-function: linear;*/
animation-delay: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
6.4 渐变效果
6.4.1 线性渐变
语法： background-image:linear-gradient(direction,color1,color2,...)
从上到下渐变：background-image: linear-gradient(to bottom,red,yellow,green,blue)
从下到上 ： to top
从左到右 : to right
从右到左 : to left
对角线 ： to bottom right 或 to top left
!DOCTYPE html>
<html>
<head>
<title>css渐变效果</title>
<style type="text/css">
.box{
width:100px;
height:100px;
background-image:linear-gradient(to left top,blue,red,green);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行结果：
6.4.2 径向渐变
1. 语法： background-image:radial-gradient(shape size at position,start-color,...,last-color);
2. 渐变形状：circle 或 ellipse(默认）
3. size 参数（定义渐变的大小）：
- closest-side : 规定径向渐变的半径长度为从圆心到离圆心最近的边
- farthest-side : 规定径向渐变的半径长度为从圆心到离圆心最远的边
- closest-corner : 规定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-corner : 规定径向渐变的半径长度为从圆心到离圆心最远的角（默认）
<style type="text/css">
.box{
width:100px;
height:100px;
background-image:radial-gradient(closest-side at 60% 55%,blue,yellow,green);
}
</style>运行结果：
6.5 圆角
1. 通过border-radius属性实现圆角的样式
2. border-radius 属性的值 ：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
<!DOCTYPE html>
<html>
<head>
<title>css动画效果</title>
<style type="text/css">
.box1{
width:100px;
height:100px;
background-color:black;
border-radius:20px 50px 50px 70px;
}
.box2{
width:100px;
height:100px;
background-color:green;
border-radius:30px 50px 30px;
}
.box3{
width:100px;
height:100px;
background-color:black;
border-radius:20px 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
运行结果：
6.6 多列
- column-count ：规定元素被划分成的列数
- column-gap ：指定列与列之间的间隙
- column-ill ：规定如何填充列
- column-rule ：所有column-rule-*属性的简写属性
- column-rule-color ：规定列之间边框的颜色
- column-rule-style ：规定列之间边框的样式
- column-rule-width ：规定列之间边框的宽度
- column-span ：规定一个元素跨多少列
- column-width ：指定列的宽度
- columns ：column-width和column-count的简写属性
<!DOCTYPE html>
<html>
<head>
<title>多列</title>
<style type="text/css">
.box{
column-count:4;
column-gap:20px;
column-rule-color:brown;
column-rule-style:solid;
column-rule-width:2px;
}
</style>
</head>
<body>
<h1>国内动态</h1>
<div class="box">
①"中国复眼”开建。从北京理工大学重庆创新中心获悉，北京理工大学将牵头在重庆研制深空探测雷达“中国复眼”，项目预期作用距离达到1.5亿公里。该项目是“超大分布孔径雷达高分辨率深空域主动观测设施”二期项目。
②香港财政司司长:已成立两个工作组专责推动土地及房屋供应加快造地建屋。香港财政司司长陈茂波在香港特区政府网站发表司长随笔称，为了能持续增强香港的发展动能、切实排解民生忧难，土地房屋是重要而迫切须处理的课题。按照行政长官的指示，我们已成立了两个工作组;专责全方位推动土地及房屋供应，务求精简程序，加强统筹协调跨部门工作，进一步提速、提效、提量，加快造地建屋，力促多元发展。
③对阿里腾讯等行政处罚决定书公布。近日，市场监管总局根据《中华人民共和国反垄断法》对二十八起未依法申报违法实施经营者集中案件作出行政处罚决定。其中与阿里巴巴相关的案件有5起，与腾讯控股相关的案件有12起。
④“白泥蚂”大举入侵青岛海域。青岛胶州营海码头渔民胡大山在自家养殖区里捕捞出 1200多斤海星、“ 白泥蚂”等敌害生物。他家5000多亩蛤蜊苗被这些敌害生物吞噬掉三分之二，这意味着数百万元的损失。
</div>
</body>
</html>运行结果：
8876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
