css基础样式

CSS基础样式

01字体文本样式

            /* 字体族名 */
            font-family:Georgia, 'Times New Roman', Times, serif;
            /* 字体大小 */
            font-size:23px;
            /* 字体粗细 */
            font-weight:bold;
            /* 字体样式 */
            font-style:italic;
            /* 字体颜色 */
            color:red;
            
            /* 文本对齐 */
            text-align:center;
            /* 文本缩进 */
            text-indent:2em;
            /*文本修饰线*/
            text-decoration: wavy underline rgb(255, 0, 0);
            /* 行高 */
            line-height:20px;

02盒子模型

 		    width: 200px;
            height: 200px;
            background:burlywood;
            border-width: 3px;
            border-style: solid;
            border-color: chartreuse;
            border-radius: 31px;
            margin: auto;
            padding: 2px;
            box-sizing: content-box;
            box-shadow: 1px 1px 3px khaki;
            text-shadow: 2px 3px 2px darkblue;

03浮动

			/*设置浮动*/
			{float：right}
			/*清除浮动 1*/
	   .chlidclear{
            clear:both;
        }
			/*清除浮动 2*/
        .fatherclear:after{
            content: '';
            display: block;
            height: 0;
            visibility:hidden ;
            clear: both;
        }
        .fatherclear{
        *zoom:1;
        }

			/*清除浮动 3*/
        .fatherclear:before,
        .fatherclear:after{
            content: '';
            display: table;
        }
        .fatherclear:after{
            clear: both;
        }
        .fatherclear{
            *zoom:1;
        }

04定位

  		    width: 200px;
            height: 200px;
            background:burlywood;
            position: absolute;/*子绝父相*/
            right: 20px;
            z-index: 1;

05伪类

                /*未访问过链接的状态 正常状态*/
                a:link {
                    color: #333;
                    /*取消下划线*/
                    text-decoration: none;
                }
                /*已经访问的链接  我们点击过*/
                a:visited {
                    color: orange;
                }
                /*鼠标经过链接时候的状态*/
                a:hover {
                    color: red;
                }
                /*当我们点击的时候（按下鼠标，别松开的时候）*/
                a:active {
                    color: green;
                }