前端-css

css样式

1.css字体

    font-size     字体大小

    font-family    字体系列

    font-style      字体风格 

    font-weight     字体粗细   

自定义字体类型：

@font-face {
font-family:myfont;
src: url();
}

2.css链接

（1）四种状态：

   a：link 普通的，未被访问的链接

   a：visited  用户已访问的链接

   a：hover   鼠标指针位于链接的上方

   a：active   链接被点击时刻

（2）链接状态：

    text-decoration：none     链接中的下划线

    background-color     背景颜色

 3.css列表

   list-style   简写列表项

  list-style-image   列表项图像

  list-style-position  列表标志位置

  list-style-type  列表类型

 4.css轮廓     突出元素的作用

   outline  轮廓属性

   outline-color    轮廓颜色

   outline-style   轮廓样式

   outline -width  轮廓宽度

 5.css盒子模型

   盒子模型内容：

         (1)margin：外边距

             margin 设置所有边距     margin：0px auto；  //上下0px，左右自适应

             margin-top  上边距

          (2) border：边框

              边框的样式：border-style：定义了10个不同的非继承样式，包括none

              单边框样式：border-top-style

              边框宽度：border-width

             单边框宽度：border-top-width

              边框颜色：border-color

             单边框颜色：border-top-color

               css3边框：

                              border-radius    圆角边框    

                              border  边框宽度

                              box-shadow   边框阴影   四个属性：向右移动，向下移动，透明度，颜色

                              boder-image    边框图片

        (3) padding：内边距

              属性：padding   设置所有边距

                        padding-bottom  设置底边距（left：左，right：右，top：上）

          (4)content：内容

注意：width和 high设置的是内容的宽和高

从内到外顺序为：内容，内边距，边框，外边距

          (5)外边距合并：20和20还是20

                                    20和10是10

        （6）盒子模型应用

         例：

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="MyCss.css">
</head>
<body>
   <div class="top">
       <div class="top_content"></div>
   </div>
   <div class="body">
       <div class="body_image"></div>
       <div class="body_content">
           <div class="body_no"></div>
       </div>
   </div>
   <div class="footing">
       <div class="footing_content"></div>
       <div class="footing_subnav"></div>
   </div>
</body>
</html>
.css
*{
    margin: 0px;
    padding: 0px;
}
.top{
    width: 100%;
    height: 50px;
    background-color: black;
}
.top_content{
    width: 75%;
    height: 50px;
    margin: 0px auto;
    background-color: blue;
}
.body{
    margin: 20px auto;
    width: 75%;
    height: 800px;
    background-color: aquamarine;
}
.body_image{
    width: 100%;
    height: 200px;
    background-color: gray;
}
.body_content{
    width: 100%;
    height: 600px;
    background-color: chartreuse;
}
.body_no{
    width: 100%;
    height: 50px;
    background-color: crimson;
}
.footing{
    width: 75%;
    height: 200px;
    background-color: red;
    margin: 0px auto;
}

                

 

 

     

 

 

posted @ 2019-11-13 20:36  华儿E  阅读(99)  评论(0)    收藏  举报