前端之css2

复习：
css:层叠样式表，给HTML增加样式的
语法结构
    选择器 {属性：属性值}
    h1 {color:red;backgroud:blue}
选择器
    1.基本选择器
        标签选择器
            div {color:red}
        id选择器
            #div {color:red}
        类选择器(***)
            .c1 {color:red}
        通用选择器
            * {color：red}
    2.组合选择器
        后代选择器
            div（空格）span{color：red}
        儿子选择器
            div>span{color:yellow}
        毗邻选择器
            div+span{color:blue}
        弟弟选择器
            div~span{color:black}
    3.属性选择器
            任何标签都可以设置自定义的属性及属性值
            [xxx]  查到具有xxx属性的所有标签
            [xxx="1"]  查询xxx=1属性的所有标签
            span [xxx="1"] 查询span中xxx=1属性的标签  精准度越来越高
    4.分组与嵌套
        div,span,p{color:red}
        div,#d1,.c1{color:blue}
    5.伪类选择器
        a:link{}  
        a:hover{} 重要，悬浮态
        a:active{}
        a:visited{color:black}
        input:focus{}
    6.伪元素选择器
            p:first-letter {font-size:24px}
            p:before {
                content:'#';
                    font-size:24px
            }
            p:after{
                content:'?';
                    font-size:24px
            }

    选择器优先级
        行内>id选择器>类选择器>标签选择器
    
    调节样式
        长宽：width  height
        字体属性:font-family
                font-size
                font-weight
        背景     
　　　　　　　　　 backgroud-color
                backgroud-image
                backgound-border
            如果背景图片尺寸小于所在区域尺寸，默认是铺满整个区域，可以通过指定参数决定是否铺满
            no-repeat不铺满      repeat-x铺满x轴     repeat-y铺满y轴
            center(左右)   center（上下）  一张照片可以上下滑动
　　　　　　　可以简写成一下
            backgroud:背景颜色 背景图片  是否铺满  位置
        文字属性
            text -align:center;   (居中)
            text-decoration:none(主要是用给a标签的，原生的a标签太丑，自带的下划线)
            text-indent:48px;用于首行缩进
            ul{list-style-type:none}  自动将前面的小圆点去掉
            
        边框(比如给div设置边框)
            border-style
            border-size
            border-color
            border:3px  solid  red;   #顺序无所谓
            border-left:（只有左边加）3px  solid red;
            border-top;
            border-right;
            border-bottom;（只有下面）
        display
            div{display:none} 不显示不占位
            div-inline 块儿级标签具有行内标签的特性
            div-block  行内标签变成块儿级标签
            div-inline-bloack   同时具备行内和块儿级标签的特性，主要是让行内标签可以设置长宽  
        画圆
            div {border-radius:50%;}
        
        盒子模型
            margin  ：用来调节盒子与盒子之间的距离（标签与标签之间的距离）
            border ：盒子的包装厚度（边框）
            padding：内部物体与盒子之间的距离（内部文本与边框之间的距离）
            content：物体大小（文本内容）

       溢出 overflow  hidden(隐藏)/auto（自动调整）/sroll(滚动) 
　　　　
　　　　浮动float 
　　　　　　　　float left;
　　　　　　　　float right;
　　　　　　　　

            只要是页面布局，都会用到浮动
            浮动带来的影响：
脱离文档流，造成父标签塌陷 所以要用到clearfix{content:'自己书写的一个空白'；clear：both；}
　　　　clear 清除浮动
　　　　z-index 垂直屏幕，数值越大越靠近用户   ，比如登录百度页面是弹出的模态框

        定位position   让一个静态的变成动态可以移动的，然后就可以对他设置边距等
            相对定位relative：相对标签本身原来的位置
            绝对定位absolute：相对于已经定位过的父标签（小米购物车，一点击就会出现边框）
            固定定位fixted：相对于浏览器窗口固定在某一个位置（固定在一个地方的）
            
        是否脱离文档流：
            脱离文档流：
                1.浮动
                2.绝对定位
                3.固定定位
            不脱离文档流：
                1.相对定位
        透明度rgba opacity
            rgba:只调节颜色，不针对字体颜色
            opacity:字体颜色和背景颜色都调节，是真正的透明度

 

练习题

/*这是博客页面的css样式表*/

/*通用样式表*/
body{  /*整体的背景设置*/
    margin: 0;  /*靠紧左边*/
    background-color: #f0f0f0;   /*设置背景颜色*/
}
a{  /*存在a标签，将下划线去掉*/
    text-decoration: none;  /*给a标签去除下划线*/
}
ul{  /*存在列表将列表默认的小黑点去掉*/
    list-style-type: none;  /*无序列表的默认小黑点去除*/
    padding-left: 0;  /*文本和边框之间的填充*/
}
.clearfix{  /**/
    content: '';  /*占位，不然会出现塌陷*/
    clear: both;  /*两边都清除*/
    display: block;  /*将所有的行内元素转变为块元素*/
}

/*博客左侧的样式*/
.blog-left{
    float: left;  /*浮动方式是朝左浮动*/
    position: fixed;  /*固定在当前，不会随着鼠标的滑动而改变*/
    left: 0;  /*左边不留空白*/
    width: 20%;  /*宽度占20%*/
    height: 100%;  /*高度占到100%*/
    background-color: #4d4c4c;  /*背景颜色*/
}

/*博客左侧样式之头像*/
.blog-avatar{
    width: 150px;  /*设置宽度*/
    height: 150px;  /*设置长度*/
    border: 5px solid wheat;  /*设置边框和边框的颜色*/
    border-radius: 50%;  /*将方边框变成圆形边框*/
    margin: 20px auto;  /*将边框上下设置为20px,然后居中显示*/
    overflow: hidden;  /*就是将图片按照圆形填充，多的就隐藏*/
    /*overflow: auto;  !*图片填充完以后可以上下滑动看没有显示完全的信息*!*/
    /*overflow: fragments;  !**!*/
}
/*博客左侧头像之图片*/
.blog-avatar img{
    width: 100%;   /*宽度为100%*/
}

/*博客左侧之名字和简介*/
.blog-name,.blog-info{
    color: darkgray;  /*字体颜色设置*/
    text-align: center;  /*字体位置设置*/
}

/*博客左侧链接的颜色设置*/
.blog-link a,.blog-tag a{   /*注意是给a链接设置字体颜色，所以要写上a这个标签*/
    color:darkgray;  /*超链接的字体颜色设置*/
}

/*博客左侧a标签悬浮状态设置*/
.blog-link a:hover,.blog-tag a:hover{  /*给a标签设置悬浮态*/
    color: white;  /*当鼠标悬浮的时候颜色为白色*/
}

/*博客左侧表格设置*/
.blog-link ul,.blog-tag ul{
    text-align: center;  /*将ul表格居中*/
    margin-top: 60px;  /*表格和上面东西的距离为60px*/

}
/*博客右边的样式*/
.blog-right{
    float: right;  /*朝右边移动*/
    width: 80%;  /*占位80%*/
}
.blog-list{  /*右边整体这个列表*/
    background-color: white;  /*背景颜色设置*/
    margin: 20px 40px 20px 10px;  /*边距设置*/
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4); /*设置x,y,z和字体透明度*/

}
.article-title{
    border-left: 5px solid red; /*设置标题的左边边框和颜色*/
}

.article{
    font-size: 36px;  /*标题字体大小*/
    margin-left: 10px; /*标题标签朝左移动*/
}

.date{
    float: right; /*日期朝右边移动*/
    font-size: 18px;  /*日期字体大小*/
    margin-top: 20px; /*日期距离顶部的距离*/
    margin-right: 10px; /*日期和右边的距离*/

}

.blog-body{
    border-bottom: 1px solid black;  /*和hr一样的效果，就是添加一个下划线*/
}

.blog-body p{  /*因为将所有的行内元素变成了块元素，所以只修改p就可以都修改*/
    font-size:18px;    /*修改字体大小*/
    text-indent: 18px;  /*首行缩进*/

}

 

转载于:https://www.cnblogs.com/mcc61/p/10952131.html