Css学习总结

Css学习总结

​   通过两周对css的学习，了解到其实css就是用来让网页更加美观，它的工作原理就是找到html需要美化的标签然后系统地给标签上色。而如何找到标签，其实css提供一个选择器它的作用就是选择你要美化的标签. 选择器有4种基本类型: 标签选择器(tag),通用选择器(*), 类选择器(.class)和ID选择器(#id).4种选择器可混合使用. 当然,除了基本类型, 也存在着不基本类型,其中包括了: 后台选择器,直接子选择器, 兄弟选择器, 属性选择器。那么如何美化，其实美化就是更改属性对应的值，我们可以把HTML元素标签看作一个object(或者盒子), 每个object(或者盒子)都有内置属性(OO思想), 而CSS更改的就是这些属性的值从而达到美化的效果.而属性又可以细分,其中包括了字体属性,文本属性, 边距属性(就是盒子模型啦), 浮动属性, 列表属性, 背景属性, 定位属性, 表哥属性。最后将更改的值应用到html文件，css提供了三种导入html文件方式，分别为：style属性, style标签 和 link标签导入(级别依次降低.)。

其实css的工作原理就是找到标签元素然后修改其属性值导入html文件最后应用到界面。

   总之以上便是这两周内我对css学习总结，我相信在后面的学习过程中我会有进一步的理解与收获

代码：

body{
    background-color: #cccccc;
    font-family: "Microsoft Yahei","SimHei";
    margin: 0 auto;
    max-width: 900px;
    border: solid #FFFFFF;
}
header{
    background: #F47D31;
    display: block;
    color: #FFFFFF;
    text-align: center;
}
header h2{
    margin: 0;
}
h1{
    font-size: 72px;
    margin: 0;
}
h2{
    font-size: 24px;
    margin: 0;
    text-align: center;
    /*color: #F47D31;*/
}
h3{
    font-size: 18px;
    margin: 0;
    text-align: center;
    color: #F47D31;
}
h4{
    color: #F47D31;
    background-color: #FFFFFF;
    -webkit-box-shadow:2px 2px 20px #888;
    -webkit-transform:rotate(-45deg);
    -moz-box-shadow: 2px 2px 20px #888;
    -moz-transform:rotate(-45deg);
    position: absolute;
    padding: 0 150px;
    top: 50px;
    left: -120px;
    text-align: center;
}
nav{
    display: block;
    width:25%;
    float:left;
}
nav a:link, nav a:visited{
    display:block;
    color: #F47D31;
    border-bottom: 3px solid #FFFFFF;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    margin: 5px;
}
nav a:hover{
    color: white;
    background-color: #F47D31;
}
nav h3{
    margin: 15px;
    color: white;
}
#container{
    background-color: #888888;
}
section{
    display: block;
    width: 50%;
    float:left;
}
article{
    background: #eee;
    display: block;
    margin: 10px;
    padding: 10px;
    /*
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    */
    border-radius: 10px;
    /*-webkit-box-shadow:2px 2px 20px #888;*/
    /*-webkit-transform:rotate(-10deg);*/
    /*-moz-box-shadow:2px 2px 20px #888;*/
    /*-moz-transform:rotate(-10deg);*/
    transform:rotate(-10deg);
    box-shadow: 2px 2px 20px #888;
}
article header{
    border-radius: 10px;
    padding: 5px;
}
article footer{
    border-radius: 10px;
    padding: 5px;
}
article h1{
    font-size: 18px;
}
aside {
    display: block;
    width: 25%;
    float: left;
}
aside h3{
    margin: 15px;
    color: white;
}
aside p{
    margin: 15px;
    color: white;
    font-weight: bold;
    font-style: italic;
}
footer{
    clear:both;
    display: block;
    background: #F47D31;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
}
footer h2{
    font-size: 14px;
    color: white;
}

效果：