CSS部分样式知识

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 使用 &quot;text-overflow:clip&quot;:</p></div>
</body>
</html>