赵博-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) 外部样式
                     首先需要在css文件中创建css文件,然后需要在html文件中使用link标签进行外部css文件的引用
                     <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; 
         /*文字阴影*/

二、心得体会
经过今天的学习,我学到了选择器的使用,选择器就像它的名字一样,选择对应的地方对他进行修改,在这次的实习当中我本着积极肯干,虚心好学、工作认真负责的态度,让自己以最快的速度融入学习当中,发挥自己特长,让我受益匪浅。

标签

评论

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