css文件
/* 注释内容 */
/* 选择器，其中body就是一个选择器，表示选中个body这个标签
声明块：为选择器设置样式
{
样式名: 样式值;
}
*/
body{
background-color: aquamarine;
}
/* 元素选择器：根据标签来选中指定的元素 ，例如 body{}，p{}，div{}*/
p{
color: blue;
}
/* id选择器，根据元素的id属性值选中一个元素，语法#id属性值{}，例如 #box{} */
#box{
height: 100px;
}
/* class选择器，根据元素的class属性值选中元素，语法 .class属性值{}
一个元素可以使用多个class
<!-- 设置一个不重复id属性 -->
<b id="box">id box</b>
<!-- 一个元素可以设置多个class属性 -->
<del class="blue test">class blue</del>
*/
.blue{
color: blue;
}
/* 伪类选择器 */
.blue::after{
/* 类加载之后 */
color: #9198e5;
}
/* 边框样式 */
div[title=div1]{
/* 线条粗细 */
border: 5px solid;
/* 圆角
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同: 重要
*/
border-radius: 25px;
/* 内边距（内容与div的距离） */
padding: 10px 40px;
/* 集中定义各种背景属性（color，image，origin） */
background: #dddddd;
width: 300px;
/* div阴影效果 */
box-shadow: 10px 10px 5px #888888;
/* 给阴影添加颜色 */
box-shadow: 10px 10px grey;
/* 边界图片 */
border-image: url(./rng.png) 30 30 round;
}
#example1{
background-image: url(./rng.png);
/* 为背景图片设置初始位置*/
background-position: right bottom;
/* 设置背景图片显示样式（居中，拉伸等） */
background-repeat: no-repeat;
/* 设置背景图大小 */
background-size: 100% 100%;
/* 背景图像的位置区域（内边距的位置，div内容的位置，外边距的位置） */
background-origin: content-box;
/* 裁剪背景 */
background-clip: content-box;
padding: 30px 50px;
width: 300px;
height: 500px;
}
#grad1{
height: 200px;
background-color: red;
/* 从上到下由红开始渐变 */
background-image: linear-gradient(#e66465, #9198e5);
/* 从左到又开始渐变 */
background-image: linear-gradient(to right, red, yellow);
/* 从左上角到右下角渐变 */
background-image: linear-gradient(to bottom right, red, yellow);
/* 透明度 */
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
/* 重复的线性渐变 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
/* 径向渐变 */
background-image: radial-gradient(red,yellow,green);
/* 设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。
其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
*/
background-image: radial-gradient(circle, red, yellow, green);
}
/* css3的文本样式 */
h1{
/* 文本阴影 */
text-shadow: 5px 5px 5px #FF0000;
}
p{
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
/* 设置文本溢出的样式 ellipsis 显示...， clip 显示最后能显示全的字符*/
/* text-overflow: ellipsis; */
text-overflow: clip;
/* 换行 */
word-wrap: break-word;
}
/* 字体引用 */
@font-face{
font-family: serif;
src: url();
font-weight: bold;
}
/* 2D转换 */
div{
transform: rotate(30deg);
/* ie 9 */
-ms-transform: rotate(30deg);
/* Safar */
-webkit-transform: rotate(30deg);
}
/* 3D转换 */
#example1{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
/* 过渡 */
div{
width:100px;
height:100px;
background:red;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:300px;
}
/* css动画 */
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* css3 调整尺寸 */
div{
resize:both;
overflow: auto;
}
/* 响应式图片 */
img{
max-width: 100%;
height: auto;
}
/* css框大小 */
div{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
/*
元素上设置了 box-sizing: border-box;
则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:
*/
box-sizing: border-box;
}
/* css3 弹性盒子 flex box（响应式） */
/* https://www.runoob.com/css3/css3-flexbox.html */
/* 多媒体查询 */
/* https://www.runoob.com/css3/css3-mediaqueries.html */
/* 布局grid */
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid */
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内部样式，写在head中，设置标签的值，可同时为所有这个标签设置样式 -->
<style>
h1{
color: red;
}
</style>
<!-- 引入外部样式表 -->
<link rel="stylesheet" href="css01.css">
</head>
<body>
<!-- css内联样式 -->
<p style="color: red; font-size: 100px;">字符</p>
<h1>设置样式</h1>
<!-- 设置一个不重复id属性 -->
<b id="box">id box</b>
<!-- 一个元素可以设置多个class属性 -->
<del class="blue" class="test">class blue</del>
<div title="div1">border-radius 属性允许您为元素添加圆角边框！</div>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<div>This is some long text that will not fit in the box</div>
<p>div 使用 "text-overflow:clip":</p></div>
</body>
</html>