CSS基础知识
程序员文章站
2022-06-26 08:39:14
css基础知识
css基础
css基础新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格...
CSS概述:
CSS指层叠样式表
CSS样式表极大地提高了工作效率
使用css
mycss.css文件
@charset "utf-8";
/* CSS Document */
p{
color:blue;
font-size:50px;
}
test.html文件
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title>css测试</title>
<link href="mycss.css" type = "text/css" rel = "stylesheet">
</head>
<body>
<p>测试一下css</p>
</body>
</htmb>
测试结果
派生选择器
通过依据元素在其位置的上下文关系来定义样式
html
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title>css测试</title>
<link href="mycss.css" type = "text/css" rel = "stylesheet">
</head>
<body>
<p><a>P</a></p>
<ul>
<li><a>LI</a></li>
</ul>
</body>
</htmb>
@charset "utf-8";
/* CSS Document */
p a{
color:blue;
font-size:50px;
}
结果
id选择器
id选择器可以为标有id的HTML元素指定特定的样式
id选择器以“#”来定义
2、id选择器和派生选择器:
目前比较常用的方式是id选择器常常用于建立派生选择器
HTML
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title>css测试</title>
<link href="mycss.css" type = "text/css" rel = "stylesheet">
</head>
<body>
<p><a id = "SCY">P</a></p>
<ul>
<li id = "KCY"><a>LI</a></li>
</ul>
</body>
</htmb>
css
@charset "utf-8";
/* CSS Document */
#SCY{
color:blue;
font-size:36px;
}
#KCY{
color: red;
font-size:36px;
}
结果
类选择器:
类选择器以一个点显示
class也可以用作派生选择器
html
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title>css测试</title>
<link href="mycss.css" type = "text/css" rel = "stylesheet">
</head>
<body>
<p><a class = "SCY">class</a></p>
<a class = "SCY">And</a>
<ul>
<li class = "KCY"><a>测试</a></li>
</ul>
</body>
</htmb>
css
@charset "utf-8";
/* CSS Document */
.SCY{
color:blue;
font-size:36px;
}
.KCY{
color: red;
font-size:36px;
}
测试
属性选择器:
对带有指定属性的HTML元素设置样式
属性和值选择器
<!DOCTYPE html>
<html>
<head Lang-"en">
<meta charset="UTF-8">
<title>
</title>
<style type="text/css">
[title]{
font-size: 50px;
}
[title=t1]{
color: #F39;
}
</style>
</head>
<body>
<p title="t1">属性选择器</p>
<p title="t2">属性选择器</p>
</body>
</html>
背景
CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
background-attachment
背景图像是否固定或者随着页面的其余部分滚动
background-color
设置元素的背景颜色
background-image
把图片设置为背景
background-position
设置背景图片的起始位置
background-repeat
设置背景图片是否及如何重复
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
默认情况下，图片会重复拼接
<!DOCTYPE html>
<html>
<head Lang-"en">
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
body{
background-image:url("https://www.baidu.com/img/bd_logo1.png");
}
p{
height:100px;
background-image:url("https://img-home.csdnimg.cn/images/20201124032511.png");
}
</style>
</head>
<body>
<p title="t1">属性选择器</p>
<p title="t2">属性选择器</p>
</body>
</html>
结果
background-repeat:no-repeat; 可以设置图片不重复
background-position:right top 从右边顶部显示
background-position:100px 100px;
CSS文本
属性
color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-transform 元素中的字母
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
word-spacing 字间距
测试
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>瀑布流效果</title>
<style>
#{
margin:0px;
padding:0px;
}
li{
list-style:none;
}
#div1{
width:950px;
height:auto;
margin:20px auto;
}
ul{
width:200px;
float:left;
}
img{
width:200px;
}
</style>
</head>
<body>
<div i="div1">
<ul>
<li><img alt = "1" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg"></li>
<li><img alt = "2" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607683622520&di=1e52d2693d3805a8be8a4b0e5bf933fa&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F42%2F31%2F01300001320894132989315766618.jpg"></Li>
<li><img alt = "3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607683622519&di=aa1d9ef14332bca974d1ce9532c1fc69&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F45%2F36%2F14300000491308128107360639165.jpg"></li>
</ul>
<ul>
<li><img alt = "4" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607683622518&di=84b0892c7a9527b0d4329cc54d6651b7&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F55%2F22%2F20300000929429130630222900050.jpg"></li>
<li><img alt = "5" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607683622516&di=b5668f93812d0a82e77432e934f64f58&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F26%2F50%2F20300001209310130588505647875.jpg"></li>
<li><img alt = "6" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607683622515&di=11e145e443b13b2626e822b043ced79d&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F24%2F78%2F20300000291746133783784887147.jpg"></li>
</ul>
<ul>
<li><img alt = "7" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607683621705&di=2dc28516728f3cf5f4ed9769e54979e4&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F73%2F63%2F01300000291092130348631206160.jpg"></li>
<li><img alt = "8" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607683621700&di=6a6c908ab485528fe5360cefdae9895d&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F42166d224f4a20a4b44741a690529822720ed072.jpg"></li>
<li><img alt = "9" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607683621699&di=74ef36831b5e24624e4dc74752896347&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F57%2F48%2F01300000164151121967488746888.jpg"></li>
</ul>
</div>
</body>
</html>
结果，每一列是一个给列表，一共3列。
CSS盒子模型
padding可以设置所有边距
padding-left padding-right padding-top padding-botton设置其他的边距。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>瀑布流效果</title>
<style>
td{
color: red;
padding:100px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>内边距</td>
</tr>
</table>
</body>
</html>
CSS边框
我们可以创建出效果出色的边框，并且可以应用于任何元素
边框的样式:
border-style:定义了10个不同的非继承样式，包括none
边框的单边样式:
border-top-style
border-left-style
border-right-style
border-bottom-style
边框的宽度:
border-width
CSS3边框:
border-radius:圆角边框
box- shadow:边框阴影
border-image:边框图片
对齐
使用margin属性进行水平对齐
水平居中的写法
margin-Left: auto:
margin- right: auto:
水平居中写法2：
margin: 0px auto; 上下为0，左右居中。
使用position属性进行左右对齐
position: absolute;
Left: 0px;
向左对齐。
使用float属性进行左右对齐
float:left; 向左对齐
float:right; 向右对齐
外边距合并
盒子模型应用
<!DOCTYPE html>
<html>
<head Langu"en"s
<meta charset="UTF-8">
<title>盒子模型的应用</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.top{
width: 100%;
height: 50px;
background-color: black;
}
.top_content{
width: 75%;
height: 50px;
margin: 0px auto;
background-color: blue;
}
.body{
margin: 20px auto;
width: 75%;
height: 1500px;
background-color:#FCC;
}
.body_img{
width: 100%;
height: 400px;
background-color: #93F;
}
.body_content{
width:100%;
height:1100px;
background-color:#F06;
}
.body_no{
width:100%;
height:50px;
background-color:#FF6;
}
.footing{
width:75%;
height:330px;
background-color:#0F9;
margin:0px auto;
}
.footing_content{
height:280px;
width:100%;
background-color:#6F0;
}
.footing_subnav{
height:50px;
width:100%;
background-color:#CF6;
}
</style>
</head>
<body>
<div class="top">
<div class="top_content">
</div>
<div class="body">
<div class="body_img"></div>
<div class="body_content">
<div class="body_no"></div>
</div>
</div>
<div class="footing">
<div class="footing_content"></div>
<div class="footing_subnav"></div>
</div>
</body>
</html>
结果
尺寸操作
height 设置元素高度
line-height 设置行高
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-width 设置元素最小宽度
min-height 设置元素最小高度
width 设置元素宽度
设置行高
<!DOCTYPE html>
<html>
<head Langu"en"s
<meta charset="UTF-8">
<title>盒子模型的应用</title>
<style>
.p1{
line-height: normal;
}
.p2{
line-height: 50%;
}
.p3{
line-height: 200%;
}
</style>
</head>
<body>
<p class = "p1">SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY
SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY
SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY
SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY
</p>
<p class = "p2">SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY
SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY
SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY
SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY</p>
<p class = "p3">SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY
SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY
SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY
SCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCYSCYKCY</p>
</body>
</html>
结果
分类操作
clear 设置一个元素的侧面是否允许其他的浮动元素
cursor 规定当指向某元素之上时显示的指针类型
display 设置是否及如何显示元素
float 定义元素在那个方向浮动
position 把元素放置到一个静态的、相对的、绝对的、固定的位置
visibility 设置元素是否可见或不可见
<!DOCTYPE html>
<html>
<head Langu"en"s
<meta charset="UTF-8">
<title>分类</title>
<style>
li{
display:inline;
border:double;
cursor:cell;
}
</style>
</head>
<body>
<ul>
<ul>
<li>SCY</li>
<li>And</li>
<li>KCY</li>
</ul>
</ul>
</body>
</html>
导航栏
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
## 图片
```html
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title>对齐</title>
<style>
body{
margin: 10px auto；
width: 70%;
height: auto;
}
.image{
border: 1px solid darkgray;
width: auto;
height: auto;
float: Left;
text-align: center;
margin: 5px;
}
img{
margin: 5px;
opacity: 0.8;
}
.text{
font-size: 12px;
margin-bottom: 5px;
}
a:hover{
background-color:#0F6;
}
</style>
</head>
<body>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=973383934,1562510559&fm=26&gp=0.jpg" alt="风景" width="200px" height= "200px">
</a>
<div class="text">8 月份的维多利亚</div>
</div>
</body>
</html>
注：opacity设置透明度
结果
选择器
元素选择器
选择器分组
类选择器详解
ID选择器详解
属性选择器详解
后代选择器
子元素选择器
相邻兄弟选择器
元素选择器：
比如用p{ color:red;} 对
添加格式。
选择器分组：
h1,h2{color:red;} 对h1，h2更改颜色。
*{ color:red;} 给所有表填加格式（如果初始没有格式）。
类选择器：
.class{} 对该类名加格式。
结合元素选择器：比如 a.class{}
多类选择器：
.class.class{}
测试
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title>网页</title>
<style>
.p1{
font-size:32px
}
.p2{
color:#0F0;
}
.p1.p2{
font-family:Tahoma, Geneva, sans-serif;
}
</style>
</head>
<body>
<p class="p1">this is my web page</ p>
<p class="p2">this is my web page</ p>
<p class="p1 p2">this is my web page</p>
</body>
</html>
结果
id选择器：
#id{}
类选择器和ID选择器区别: ID只能在文档中使用一次，而类可以多次使用ID选择器不能结合使用，当使用js时候，需要用到id
属性选择器：
简单属性选择:
例如: [title]{}
根据具体属性值选择:除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title></title>
<style>
[title]{
color:#F36;
}
[href="http://www.jikexueyuan.com"]{
font-size: 30px;
}
[title~="title"]{
font-size: 50px;
}
p strong{
color:#FC0;
}
</style>
</head>
<body>
<p title="tit">hello</p>
<p title="title">hello</p>
<p title="t">hello</p>
<p title="title hello">hello</p>
<a href="http://www.jikexueyuan.com">SCY</a>
<p>this is my<strong> web</strong> page</p>
</body>
</html>
后代选择器
a p{}
可以选择作为该元素后代的元素。
子元素选择器
a>p{}
只能选择作为某元素子元素的元素。隔代就不可以了，比如下例中，P>stong就没有作用。
相邻兄弟选择器:
a+p{}
可选择紧接在另一个元素后的元素，且二者有相同父元素。
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p strong{
font-size:50px;
}
p,p>strong{
color:green;
font-size:30px;
}
i>strong{
color:blue;
}
li+li{
color:#C0F;
}
</style>
</head>
<body>
<p>this is <i>my<strong> web</strong> </i>page</p>
<ol>
<li>SCY</li>
<li>SCY</li>
<li>SCY</li>
</ol>
</body>
</html>
运行结果
css动画-2D,3D
通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果，可以使用2D、3D来转换元素。
2D转换方法:
translate()
rotate()
scale()
skew()
matrix()
3D转换方法:
rotateX()
rotateY()
2D，3D转换测试
<!DOCTYPE html>
<html>
<head Langu"en">
<meta charset="UTF-8">
<title>动基</title>
<style>
div{
width:100px;
height:100px;
background-color:#F6F;
font-size:30px;
float:left;
}
.div2{/*移动*/
background-color:#09F;
transform:translate(200px,200px); /*不同浏览器要设置不同的语句*/
-webkit-transform: translate(200px, 200px); /*safari chrome*/
-ms-transform: translate(200px, 200px); /*IE*/
-o-transform: translate(200px, 200px) ; /*opera*/
-moz-transform: translate(200px, 200px);/*Firefox*/
}
.div3{/*旋转*/
background-color:#FC6;
transform:rotate(200deg); /*不同浏览器要设置不同的语句*/
-webkit-transform: rotate(200deg); /*safari chrome*/
-ms-transform: rotate(200deg); /*IE*/
-o-transform: rotate(200deg) ; /*opera*/
-moz-transform: rotate(200deg);/*Firefox*/
}
.div4{/*缩放,宽度不变，高度变成二倍*/
background-color:#CFF;
transform:scale(1,2); /*不同浏览器要设置不同的语句*/
-webkit-transform: scale(1,2); /*safari chrome*/
-ms-transform: scale(1,2); /*IE*/
-o-transform: scale(1,2); /*opera*/
-moz-transform: scale(1,2);/*Firefox*/
}
.div5{/*倾斜*/
background-color:#99F;
transform:skew(20deg,20deg); /*不同浏览器要设置不同的语句*/
-webkit-transform: skew(20deg,20deg); /*safari chrome*/
-ms-transform: skew(20deg,20deg); /*IE*/
-o-transform:skew(20deg,20deg); /*opera*/
-moz-transform: skew(20deg,20deg);/*Firefox*/
}
.div6{/*3D旋转*/
background-color:#6FC;
transform:rotateX(60deg); /*不同浏览器要设置不同的语句*/
-webkit-transform: rotateX(60deg); /*safari chrome*/
-ms-transform: rotateX(60deg); /*IE*/
-o-transform: rotateX(60deg); /*opera*/
-moz-transform: rotateX(60deg);/*Firefox*/
}
.div7{/*3D旋转*/
background-color:#FF0s;
transform:rotateY(60deg); /*不同浏览器要设置不同的语句*/
-webkit-transform: rotateY(60deg); /*safari chrome*/
-ms-transform: rotateY(60deg); /*IE*/
-o-transform: rotateY(60deg); /*opera*/
-moz-transform: rotateY(60deg);/*Firefox*/
}
</style>
</head>
<body>
<div class="div1">初始效果</div>
<br/>
<div class="div2">移动</div>
<br/>
<div class="div3">旋转</div>
<br/>
<div class="div4">缩放</div>
<br/>
<div class="div5">倾斜</div>
<br/>
<div class="div6">3D旋转x</div>
<br/>
<div class="div7">3D旋转y</div>
</body>
</html>
CSS过渡
通过使用CSS3，可以给元素添加一些效果
CSS3过渡是元素从一种样式转换成另一种样式
transition 设置四个过渡属性
transition-property 过渡的名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果开始时间
鼠标滑到上方之后，div方块旋转一定角度，移开就恢复。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width:100px;
height:100px;
background-color: blue;
transition:width 2s,height 2s,transform 2s;
transition-delay: 2s;
-webkit-transition-delay: 2s;
-webkit-transition:width 2s,height 2s,-webkit-transform 2s; s
}
div:hover{
color:#0CF;
width:200px;
height:200px;
font-size:39px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
</style>
</head>
<body>
<div>效果展示</div>
</body>
</html>
CSS动画
通过CSS3,也可以进行创建动画了
CSS3的动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
anination:myanimation 5s;
-webkit-animation:myanimation 5s;
}
@keyframes myanimation{
0% {background: red;left: 0px;top: 0px}
25%{background: blue;left: 200px;top: 0px}
50%{background: #ccffcc;left: 200px;top: 200px}
75%{background: #00ffff;left: 0px;top: 200px}
100%{background: red;left: 0px;top: 0px}
}
@-webkit-keyframes myanimation{
0% {background: red;left: 0px;top: 0px}
25%{background: blue;left: 200;top: 0px}
50%{background: #ccffcc;Left: 200px;top: 200px}
75%{background: #00ffff;left: 0px;top: 200px}
100%{background: red;left: 0px;top: 0px}
}
</style>
</head>
<body>
<div>动画效果</div>
</body>
</html>
渐变循环下面三个状态。
CSS多列
在CSS3中，可以创建多列来对文本或者区域进行布局 属性:
column-count
column-gap
column-rule
<!DOCTYPE html>
<html>
<head Lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.div1{
column-count:3;
-webkit-column-count: 3;
column-gap: 50px;
-webkit-column-gap: 50px;
column-rule:5px outset #FF0000 ;
-webkit-column-rule:5px outset #FF000;
}
</style>
</head>
<body>
<div class="div1">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>
</body>
</htmL>
结果
CSS综合实验
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>SCY</title>
<link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="heading">
<div class="heading_nav">
<div class="heading_title">
孙创昱的空间
</div>
<div class="heading_navbar">
<ul>
<li><a href="#">说说</a></li>
<li><a href="#">日记</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">其他</a></li>
</ul>
</div>
<div class = "heading_img">
<img src = "https://profile.csdnimg.cn/B/8/C/2_weixin_44532671">
</div>
<div class = "heading_spotlight">
<form>
<input type = "text">
</form>
</div>
</div>
</div>
<div class="body">
<div class = "body_title">
<h1>文章标题</h1>
<p>文章内容</p>
</div>
<hr/>
<hr/>
</div>
</div>
<div class="footing">其他信息</div>
</div>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;
}
body{
background-color: snow;
}
.wrapper{
width: 80%;
height: 1000px;
background-color:antiquewhite;
margin: 0px auto;
}
.heading{
width: 100%;
height: 90px;
background-color: snow;
margin: 0px auto;
}
.heading_nav{
padding-bottom: 30px;
padding-top: 30px;
width: 100%;
height: 30px;
position: relative;
}
.heading_title{
float: Left;
font-size:30px;
color:#C33;
font-family: Arial, Helvetica, sans-serif;
}
.heading_img img{
border-radius:30px;
display:inline;
with:55px;
height:55px;
float:right;
box-shadow:0 1px 1px rgba(0,0,0,0.2);//添加颜色
}
.heading_spotlight form{
float:right;
position:relative;
margin-right:20px;
margin-top:10px;
}
form input{
height:40px;
width:200px;
border-radius:30px;
}
li{
padding-left:10px;
display:inline;
}
ul{
margin-left: 40px;
float: left;
list-style-type: none;
padding-top: 6px;
padding-bottom: 6px;
}
a:link, a:visited{
font-weight: bold;
color: darkgray;
text-align: center;
padding: 6px;
text-decoration: none;
}
a:hover, a:active{
color:#F39;
}
.body{
padding:30px;
height:auto;
width:auto;
}
.body_title h1{
font-size:30px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#3FF;
}
.body_title p{
margin:20px;
}
.footing{
padding-top: 20px;
text-align: center;
font-size: 20px;
color: darkgray;
}
本文地址：https://blog.csdn.net/weixin_44532671/article/details/110943456