祈长有-20201028

                                                                 学习笔记
style 第一部分
/*类选择*/
.box(
    width:300px;
    height:200px;    px分辨率
    background-color:red;
)
.box:hover{
}

/*标签选择器*/
h1{
    width: 600px;
    height: 400px;
    background-color: #11aabb;

}
)
/*id选择器*/
#box{
    width: 600px;
    height: 400px;
    background-color: #1112233;
}
li
text
    color
 /*后代选择器*/  
.box ul li 
      color:
      
 /*伪类选择器*/  
 a:hover{
      鼠标悬停状态
      text-decoration: none;
 }
/*通用选择器*/ 
*{
    background: gold;
    
    margin: 0;/*外边距*/
    padding:0/*内边距*/
    border: 0;/*边框*/
}

.box{
    width:400px;
    height:200px; 
    border:1px #000000 solid;/*框框*/
}
div{
    color: red;/*修饰字体颜色*/
    font-size:30px;/*修饰字体的大小*/
    font-family:"宋体";/*字体类型*/
    font-style: italic;/*字体的样式*/
    font-weight: bold;/*字体加粗*/
    letter-spacing: 5px;/*字体间距*/
   
    text-align: center;/*对齐方式*/        /*left左对齐*/
    line-height:300px;/*行高*/
    text-decoration: line-through;/*文本划线*/
    text-decoration: overline;/*文本划线*/
    text-shadow: 2px 2px 3px yellow;/*字体阴影*/     /*水平距离、垂直距离、模糊距离*/
    text-indent:2em;/*首行缩进*/
   
}   
*{
    margin: 0;
}
.box{
    width:300px;
    height:300px; 
    margin: 0 auto;
}
div{
    background-color: red;/*背景颜色*/
    background-image: url(/*../返回上级目录*/);     /*背景图片*/
    background-size: 300px 300px;/*背景图片的大小*/
                    /*cover 等比例缩放*/
    background-repeat:no-repeat  repeat-x/-y;/*背景图片平铺*/   
    background-attachment: fixed;/*背景图片固定*/
    background-position: -100px 0;/*背景图片平移  左右/上下*/
    opacity: 0-1 取值范围;/*透明度*    
}
                                                  第二部分
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/style.css" /> 将css文件应用
    </head>
    <!--
    可选<style></style>
    <body>
        <!--
            HTML:H5 >标签(快级标签 p ul div 、行级标签 a span  img 表单 /与内容无关)
            css3.0;层叠样式表 ->修饰网页
            选择器(镜子):精确选中要修饰的标签
            常用的选择器:1.类选择器
                         2.标签选择器(类选择器优先级高于标签)
                         3.id选择器 (id高于类)
                         4.后代选择器
                         5.伪类选择器(鼠标悬停状态)
                         6.通用选择器
        -->
        <div class="起名字、例如box"></div>
        <div class="box1"></div>
        <h1 class="box"></h1>
        <h1></h1>
        <h1 class="box"></h1>
        <p id="box"></p>
           <ul>             
                <li>你好</li>
                <li>朋友小明</li>
            </ul>
        <a href="#">百度一下</a>
    </body>
<head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/style1.css"/> 
                                                    <!--
                                                        将style1应用到index
                                                       -->
    </head>
    <body>
        <!--
            修饰字体和文本的常用样式-->
            <div class="box">
                青海民族大学17通信工程
                       161
            </div>  
    </body>
<head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            修饰背景的常用样式
        -->
        <div class="box" >
            内容背景不动
        </div>

        <meta charset="UTF-8">
        <title></title>
        <style>
            span{
                color: #000000 / rgb(255,0,0) / rgba(0,255,255,0-1透明度);
                
                background-color: red;
                background-color:transparent;/*背景全透明*/
                
            }
        </style>
    </head>
    <body>
        <span>颜色的表示方法</span>
    </body>
</html>

心得体会

1.背景设置有一定理解
2.修饰字体和文本的常用样式中按照老师练习有一定收获,更加理解图片背景颜色等相关内容配置在前端的实现。
3.将style1应用到index 这条命令会后期加以理解。
4.多个选择器的学习中id选择器练习更加便捷。层叠样式表 ->修饰网页在其明白H5指什么。
5.文本划线、边框设置等相关设置有很好的了解。

标签

评论

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