张建军-20201028

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    CSS(Cascading Style Sheet)层叠样式表
样式选择器
    (1) 标签选择器:选择器名称与HTML标签相同
         格式:选择器名称(标签名){属性:属性值;
                            属性:属性值;}
                    div{width: 250px;
                height: 350px;
                background-color: black; }
        <div></div>
        <div></div>
        <div></div>
 id选择器:在选择器名称前面加#
         格式:#id名{ 属性:属性值;
             属性:属性值;}
                                         #yyh{color: royalblue;
                font-size: 56px;}
       <p id="yyh">吼吼哈哈嘿</p>
class选择器:选择器名称dont use number
                    在选择器名称前面加.
                    格式:.className{属性:属性值;
                            属性:属性值;  }
                                           .zh{color: greenyellow;
                font-size: 56px;}
        <p class="zh">金刚葫芦娃</p>
通用选择器(适用于所有标签)
                     格式:*{属性:属性值;属性:属性值;  }
                                             *{color: darkgray;}
                                 <ul>
            <li>discribe</li>
            <li>discribe</li>
            <li>discribe</li>
        </ul>
        <ol>
            <li>discribe</li>
            <li>discribe</li>
            <li>discribe</li>
        </ol>
        <span>discribe</span>
        <h1>discribe</h1>
后代选择器:在后代选择器中,空格代表后代
                     格式:父标签 子标签{属性:属性值;
                            属性:属性值; }
                                          ul li{color: red;
                font-size: 28px;}
                                         <ul>
            <li>discribe</li>
            <li>discribe</li>
            <li>discribe</li>
                                        </ul>
子选择器
                     格式:父级标签>子标签{属性:属性值;
                            属性:属性值; }
                                       ol>li{color: green;
                font-size: 35px;}
                                      <ol>
            <li>discribe</li>
            <li>discribe</li>
            <li>discribe</li>
                                     </ol>
组合选择器;选择器之间必须用逗号分隔
                     #cd,.fd,div>p{color:#00800;
                font-size: 20px;}
        <p id="cd">discribe</p>
                    <p class="fd">discribe</p>
                    <div><p>discribe</p></div>

 选择器的优先级
                    在相同属性下:后代选择器(子选择器)> id选择器 > class选择器 > 标签选择器<br />

伪类选择器
                     a:link{/*未访问状态*/color: royalblue;}<br />
            a:hover{/*鼠标悬停状态*/
                color: #008000;}<br />
            a:active{/*激活选中状态*/
                color: black;}<br />
            a:visited{/*访问过后状态*/
                color: #ADFF2F;}<br />
                    <a href="#">文字描述</a>
样式的添加方式:3种
    (1) 行内样式
                    <div style="width: 100%;height: 30px;"></div>
                (2) 页面内样式
                     <style type="text/css">
                      .zh{color: greenyellow;
                font-size: 45px;}
                       #yyh{color: royalblue;
                font-size: 45px;}
                       </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">nothing
                      <!--
                        im late this day,and feel so sad
                      --></div>
        <ul>
            <li class="zf">1<a datasrc="50">金</a></li>
            <li class="zf">2刚</li>
            <li class="zf">3葫</li>
            <li class="zf">4芦</li>
            <li class="zf">4娃</li>
        </ul>
        </body>
    (4)  3种添加样式的方式的优先级<br />
                     就近原则<br />
3. 样式的使用<br />
<1>背景修饰样式
        background-color: royalblue;  <br />                
        设置背景颜色
        background-image: url(img/favicon.ico); <br />   
        设置背景图片
        background-repeat: no-repeat;            <br />
        设置背景图片不重复
        background-size: 100px 100px;            <br />
        设置背景图片大小
        background-size:cover;       <br />                 
        设置背景图片拉伸充满
        background-position-x: 150px;   <br />         
        背景图水平方向移动
        background-position-y: 100px;      <br />       
        背景图上下方向位移
        background-position: 150px 150px ;    <br />  
        背景图斜向上方向位移
<2>文本样式
                    颜色 color: blue;  
         /*字体颜色*/<br />
        大小 font-size: 20px;  
        /*字体大小*/<br />
        字体 font-family: "宋体";
        /*各样式字体*/<br />
        粗体 font-weight: 700;   
         /*字体粗细*/<br />
        间距 letter-spacing: 10px;  
         /*文字间距*/<br />
        首行缩进 text-indent: 40px;   
         /*首行缩进*/<br />
        线text-decoration: line-through;  
         /*删除线*/<br />
        text-decoration: underline;
        /*下划线*/<br />
        text-decoration:overline; 
         /*上划线*/<br />
        阴影text-shadow: 5px 5px 2px blue; 
         /*文字阴影*/<br />
<3> 鼠标样式
         cursor: pointer;   
        箭头改为手<br />
         cursor: url(img/favicon.ico),auto;
                     图片<br />
<4> 透明度
         opacity: 0.3; 
        /*0,完全透明;1,完全不透明*/<br />
         background-color: rgba(214,214,214,0.1);
        /*设置div透明,显示内容不透明*/<br />
    <body>
    </body>
</html>

二、心得体会
今天的学习整体上收获比较大,只是被扣分扣得有点头疼,但是没办法,
事情就是那么些事情,该做的还得做,不做又不行,材料还得按时交,学
院还得按时去,事情该自己去做的一件也不能少,明天亦如此,还是得好
好努力的,今天学习的内容挺丰富,听信息管理与信息系统专业的同学说
这是他们半个学期的内容,听电子信息科学与技术班的说这是他们一周的
实训内容,其实要不是这个时间不允许,我还是很愿意学习这门课的,毕
竟感觉还是很有用的,奈何事情太多,太杂,以至于根本没办法去专心的
实习,哎,后边调整好计划,按照节奏一步一步来吧,you have to do it,
and just do it try my best.

标签

评论

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