黄翔-20201028


HTML 5.0:H5→标签(行级标签,块级标签)

CSS 3.0:层叠样式表→修饰问题
选择器(镜子):精确选中要修饰的标签

<link rel="stylesheet" href="css/style.css" />在html中引用CSS

常用的选择器:1类选择器    
        格式:.className{
                属性:属性值;
                属性:属性值;
                  ……
                }

           2标签选择器          
        格式:选择器名称(标签名){
                    属性:属性值;
                    属性:属性值;
                           }

           3 ID选择器:在选择器名称前面加#      (classname可以相同,id不可以)
        格式:#id名{
             属性:属性值;
             属性:属性值;
             ……
            }

           4后代选择器:在后代选择器中,空格代表后代
        格式:父标签 子标签{
                属性:属性值;
                属性:属性值;
                 }

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

           6通用选择器:
        格式:*{
              属性:属性值;
              属性:属性值;
            }

相同属性下:后代选择器(子选择器)> id选择器 > class选择器 > 标签选择器

文本样式
    color: pink;/*颜色*/
    font-size: 30px; /*字体大小*/
    font-family: "楷体";  /*字体*/
    font-style: italic; /*字体样式*/
    font-weight: bold; /*字体粗细*/
    letter-spacing: 5px;/*文字间距*/
    
    text-align: center; /*水平距离*/
    line-height: 250px; /*垂直距离*/
    text-decoration: none; /*文字线(下划上划删除)*/
    text-shadow: 2px 2px 2px greenyellow; /*文字阴影*/
    text-indent: 2em; /*首行缩进*/

背景样式
    background-color: red;  背景颜色
    background-image: url(img/favicon.ico); 背景图片
    background-repeat: no-repeat; 设置背景图片不重复
    background-size: 268px 272px;  设置背景图片大小
    background-size:cover;  设置背景图片充满盒子
    background-position: 150px 150px ; 背景图X,y轴方向位移

颜色表示方法
    color:#000000
    rgb(*,*,*)
    rgba(*,*,*,0-1)  最后一位透明度
    透明度:opacity: 0.3; /*0,完全透明;1,完全不透明*/
                 background-color: rgba(215,215,215,0.3);
        /*设置div透明,但是里面的内容不透明*/
                 background-color;transparent;/*背景全透明*/


心得体会:今天重点主要学习了CSS选择器,并学习了一些基础的设置,添加颜色等代码操作。用CSS选择器对html的块进行选择性的修饰,对文字或图片进行修改使其变得更美观。

标签

评论

this is is footer