CSS 语法二

文本修饰类型CSS

.class_test {
    /* 对齐方式 */
	text-align: left;
	/* 行高 */
	line-height: 20px;
	/* 字母间距 */
	letter-spacing: 5px;
	/* 单词间距 对中文无效*/
	word-spacing: 30px;
	/* 文本修饰 如加下划线等 */
	text-decoration: underline;
	/* 首行缩进 */
	text-indent: 2em;
	/* 文本大小写转换 capitalize是首字母自动大写 */
	text-transform: capitalize;
	/* 字体样式 */
	font-family: 微软雅黑;
	/* 字体大小 */
	font-size: 5px;
	/* 字体粗细 */
	font-weight: 100px;
	/* 字体阴影 */
	/* 按照顺序是水平方向的偏移，竖直方向的便宜，模糊程度（与值成正比）阴影颜色 */
	text-shadow: 5px 100px 5px blueviolet;
}

CSS动画

<style type="text/css">
    p {
        width: 100px;
        height: 100px;
        color: blueviolet;
        background-color: black;
    }
    /* 鼠标经过的时候 */
    p:hover{
        width: 200px;
        height: 200px;
        color: blueviolet;
        background-color: brown;
        /* 触发动画延迟时间 */
        transition-delay: 200ms;
        /* 完成一次动画所需时间 */
        transition-duration: 500ms;
        /* 虽然说上面的是一个通用的写法，但是以防万一还是尽可能多地覆盖各种内核 */
        -webkit-transition-duration: 500ms;
        /* 选择要过渡的属性，默认是all */
        transition-property: height,background;
    }
</style>

如果想要更加复杂的动画，就要配合@keyframes来使用

<style type="text/css">
    p {
        width: 100px;
        height: 100px;
        background-color: black;
    }

    p:hover {
        animation-name: test_animation;
        animation-duration: 500ms;
        /* 循环动画的次数 */
        animation-iteration-count: 5;
        /* 轮流反向播放动画 */
        animation-direction: alternate;
    }

    @keyframes test_animation {

        /* from相当于0% */
        from {
            width: 100px;
            height: 100px;
        }

        /* 在这里输入0%到100%的有效值 */
        50% {
            background-color: blue;
        }

        /* to相当于100% */
        to {
            width: 300px;
            height: 300px;
        }
    }
</style>

盒子模型

• 网页设计中常听的属性名：margin(外边距)、 border(边框)、 padding(内边距)、content(内容) ，CSS盒子模式都具备这些属性。
• 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

下面给出图解

{%asset_img box-model.png %}

<style type="text/css">
    .class_test{
        /* 依次定义边框的粗细、样式、颜色 */
        border: 1px solid black;
        /* 边框距离周围元素的上边距 */
        margin-top: 100px;
        /* 内容到边框的上边距 */
        padding-top: 20px;
    }
</style>