陈菊-20201028

CSS(Cascading Style Sheet)层叠样式表
       1. 样式选择器
    id选择器:在选择器名称前面加#
    格式:#id名{属性:属性值;属性:属性值;……}
                          #yyh{color: red;font-size: 56px;……}
             <p id="yyh">文字描述</p>

    标签选择器:选择器名称与HTML标签相同
         格式:选择器名称(标签名){属性:属性值;属性:属性值;……}
                    div{width: 200px;height: 400px;background-color: yellow;……}
        <div></div>
        <div></div>
        <div></div>

     class选择器:选择器名称可以自己去定义,不要以数字开头。
                    在选择器名称前面加.
                    格式:.className{属性:属性值;属性:属性值; …… }
                              .zh{color: greenyellow;font-size: 56px;……}
                              <p class="zh">文字描述</p>

    通用选择器(适用于所有标签)
                     格式:*{属性:属性值;属性:属性值;……}
                               *{color: darkgray;……}
                                 <ul>
            <li>文字描述</li>
            <li>文字描述</li>
            <li>文字描述</li>
        </ul>
        <ol>
            <li>文字描述</li>
            <li>文字描述</li>
            <li>文字描述</li>
        </ol>
        <span>文字描述</span>
        <h1>文字描述</h1>


     伪类选择器
                     a:link{/*未访问状态*/color: red;}
         a:hover{/*鼠标悬停状态*/
         color: {#008000;}
         a:active{/*激活选中状态*/
         color: {black;}
         a:visited{/*访问过后状态*/color: #ADFF2F;}
                    <a href="#">文字描述</a>

      2 .样式的添加方式:3种
    (1) 行内样式
                    <div style="width: 100%;height: 30px;"></div>


                (2) 页面内样式
                     <style type="text/css">
                      .zh{color: greenyellow;font-size: 56px;}
                       #yyh{color: red;font-size: 56px;}
                       </style>
    (3) 外部样式

                     <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/CSSDemo.css" />
        </head>
        <body>
        <div id="qwe">今天被扣分,我很难受</div>
        <ul>
            <li class="zf">1</li>
            <li class="zf">2</li>
            <li class="zf">3</li>
            <li class="zf">4</li>
        </ul>
        </body>

    (4)  3种添加样式的方式的优先级
                     就近原则


      3. 样式的使用
    背景修饰样式
        背景颜色:  background-color: red;                  
        背景图片:  background-image: url(img/favicon.ico);    
        图片不重复:   background-repeat: no-repeat;            
        背景图片大小:  background-size: 100px 100px;            
        背景图片拉伸充满:  background-size:cover;                        
        背景图水平方向移动:  background-position-x: 150px;            
        背景图上下方向位移: background-position-y: 100px;             
        背景图斜向上方向位移:  background-position: 150px 150px ;      
    

    鼠标样式
         cursor: pointer; 箭头改为手
         cursor: url(img/favicon.ico),auto; 图片

    透明度
         opacity: 0.3; /*0,完全透明;1,完全不透明*/
         background-color: rgba(215,215,215,0.3);/*设置div透明,显示内容不透明*/

    文本样式
                    颜色 color: red; /*字体颜色*/
        大小 font-size: 20px; /*字体大小*/
        字体 font-family: "宋体";/*各样式字体*/
        粗体 font-weight: 700; /*字体粗细*/
        间距 letter-spacing: 10px; /*文字间距*/
        首行缩进 text-indent: 40px; /*首行缩进*/
        线text-decoration: line-through; /*删除线*/
        text-decoration: underline;/*下划线*/
        text-decoration:overline;  /*上划线*/
        阴影text-shadow: 5px 5px 2px red;  /*文字阴影*/



                    border: 1px 1000000 solid;
                    color: red;/*修饰字体的颜色*/
                    font-size: 30px:/*修饰字体的大小*/
                    font-family: "宋体";/*字体类型*/
                    font-style: italio;/*字体的样式*/
                    font-weight: bold;/*字体加粗*/
                    letter-3pacing: 5px;/*字体间距*/
                    text-align: center:/*对齐方式*/
                    line-height: 300px:/*行高*/
                    /*text-decoration: overline;*//*文本划线*/
                     text-indent:2em;/*首行缩进*/

                     
                     /*background-color: red;/*背景颜色*/
                     background-image: url(../img/timg. jpg);/*背景图片*/
                     /*background-size: cover;*//*背景图片的大小*/
                     /*background-attachoent: fixed;/*背景图片固定*/
                     /*background-size: 300px 300px;
                      background-repeat: repeat-x:/*背景图片平铺*/

二、心得体会

通过这几天的学习,我深刻的体会到了在编写程序中,真的是细节决定成败,因为不管程序的语向是多是少,但是只要有一条语句或语法不正确,就不能使程序得到所需要的结果。还有学习过程中那些我们应该注意的事项是平时上课时无法学到的,相信通过后面的学习,我们会有更深层次的收获。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1