马伟婷-20201028

知识总结:

将css文件引用过来
HTML,H5.0标签(块级标签:p ul div)、行级标签a span img)(取决于内容)
            表单
            CSS3.0层叠样式表-修饰网页
            选择器(镜子):精确的选中要修饰的标签
常用的选择器:0、通用选择器1、类选择器2、标签选择器3、id选择器(不能重复)4、后代选择器5、伪类选择器(鼠标悬停状态)
1、、/*通用选择器*/
    margin: 0;/*外边距*/
    padding:0 ;/*内边距*/
    border:0 ;/*边框*/
    background-color: papayawhip;

2、/*类选择器,在标签里用class定义*/
.box
    width: 300px;
    height: 200px;/*样式,px像素*/
    background-color: deepskyblue;  
.box:hover
    background: peru;
3、/*标签选择器*/width: 400px;
    height: 200px;
    background-color: #11aabb;
4、/*id选择器*/
                width: 300px;
    height: 200px;
    background-color: #233;
color: darkgreen;
5、/*后代选择器,有包含关系的打空格*/
.box ul li
    color: mediumpurple;
6、/*伪类选择器(鼠标悬停状态)*/
a:hover
    text-decoration: none;
7、<div style=""></div>不推荐
        <div class="box"></div>
        <div class="box1"></div>类选择器起名字,找到box就可以找到标签,要给大小,像素
        <h1 class="box"></h1>优先级高于标签选择器
        <div class="box" id="box">允许 p标签被id和类选择器同时修饰,id高于类,类高于标签
8、 <a href="#">点一下</a>鼠标悬停
    color:royalblue/*修饰字体颜色*/;
    font-size: 30px;/*修饰字体大小*/
    font-family: "微软雅黑";/*字体样式*/
    font-style: italic;/*字体样式*/
    font-weight: bold;/*字体加粗*/
    letter-spacing: 5px;/*字体间距*/
    
9、  text-align: center;/*对齐方式*/
    line-height: 300px;/*水平方向 行高*/
    text-decoration: overline;/*文本划线*/
    text-shadow: 2px 3px goldenrod;/*字体阴影 水平阴影距离 垂直距离 模糊距离 颜色*/
    text-indent: 2em;/*首行缩进 em相对单位*/
10、background-color: beige;/*背景颜色*/
    background-image: url(../img/cs.jpg);/*背景图片*/
    background-position: -100px;/*图片平移/
    
    background-size: cover;/*背景图片大小 cover等比例缩放不失真*/
    background-attachment: fixed;
    opacity: 0.5;/*透明度*/
    background-color: transparent;/*背景全透明*/
    /*background-size: 300px 300px;/**/
    background-repeat: no-repeat/*repeat-x延x轴平铺*/;
    background-size: cover;
    background-attachment: ;/*背景图片固定*/
    /**/
11、rgb(200,0,0);三元素 

心得体会:
今天我们开始学习css,学到了常用的选择器有哪些,还有很多修饰工具,文字的设定,background的一些设定以及修改等等,今天也是同样收获满满的一天。

标签

评论

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