前端（三）

前端（三）

分组和嵌套

div p{  # 嵌套(空格跟着是嵌套)
    color: red;
}
div p,p{  # 分组(逗号隔开是分组)
    color: red;
}

伪类选择器

a:link{   /*默认*/
       color: red;
      }
a:hover{  /*鼠标悬浮*/
        color: blue;
       }
a:active{   /*鼠标左键点击不松开*/
         color: yellow;
        }
a:visited{   /*访问过后*/
          color: green;
         }

input:focus{  /*获取焦点*/
            background-color: red;
        }

伪元素选择器

p:first-letter{  # 首字
      /*font-size: 30px;*/  
    }
p:before{  # 加在前面
    content: 'QQ:';
    font-size: 30px;
}
p:after{  # 加在后面
    content: '！！！';
    font-size: 30px;
}


 # 一般会用在清楚浮动上面，解决父标签塌陷问题(浮动还没说)

选择器的优先级

"""
id
class
标签选择器
行内式
"""

# 1. 选择器相同的情况下
	'''就近原则：标签离谁近就听谁的'''
# 2. 选择器不相同的情况下
	行内式 > id > 类  > 标签

CSS属性相关

div{  /*块级标签生效*/
    width: 200px;
    height: 200px;
    background-color: red;  /*背景颜色*/
    background-image: url("地址");  /*背景图片*/
    background-repeat: repeat-x;  /*水平平铺*/
    background-repeat: repeat-y;  /*垂直平铺*/
    background-repeat: no-repeat;  /*不平铺*/
    background-position: 30px,100px;  /*图片的位置*/
    """
    	如果前缀一样可以简写，backgroud: red url("")....
    	没有顺序要求
    """
    background-attachment: fixed;  /*将图片固定起来*/
    font-family: 黑体,宋体;  /*字体颜色*/
    font-size: 50px;  /*字体大小*/
    font-weight: bold;  /*字体粗细*/
    font-weight: 200;  /*字体粗细*/
    color: blue;  /*文本颜色*/
    color: #52a0e5;  /*如果是三位，则是重复了ff4400=f40*/
    color: rgb(255,255,255);  /*最后面还可以加一个0-1之间的数代表透明度*/
    text-align: center; /*文本内容居中*/
    text-align: justify-all;  /*两端对齐*/
   }
span { /*行内标签长宽由内容决定*/
      width: 200px;
      height: 200px;
      background-color: red;
     }

"""
	在font-weight中：
		normal 默认
		bold 粗体
		bolder 更粗
		lighter 更细
		100~900 具体的粗细值
"""

 p {
     /*width: 50px;*/
     /*height: 50px;*/
     /*border-color: blue;*/
     /*border-style: solid; !*none无边框  dotted点状虚线边框  dashed矩形虚线边框  solid实线边框*!*/
     /*border-width: 50%;*/

     /*border-left-width: 5px;  !*作用于左边*!*/
     /*border-top-width: 5px;  !*作用于上边*!*/
     /*border-right-width: 5px;  !*作用于右边*!*/
     /*border-bottom-width: 5px;  !*作用于下边*!*/
     border: 5px dotted red;
 }
    
border-radius: 40%;  /*圆角超过50%的话直接就变成圆了*/
#d1{
        display: inline-block;  # 在一行显示，块级标签的格式
    }
#d2{
        display: inline-block;
    }
<div id="d2" style="width: 50px; height: 50px; display: none; background: blue;"></div>  # 隐藏，位置也不在了
<div id="d1" style="width: 50px; height: 50px; visibility: hidden; background: red;"></div>  # 隐藏，但是位置还保留在

CSS盒子模型

"""
	以快递盒为例
		盒子与盒子之间的举例----------------->外边距(margin)
		盒子的厚度--------------------------->边框(border)
		盒子里面的物体与盒子之间的举例---------->内边距(padding)
		盒子里面的内容----------------------->content
"""

# 调整标签与标签之间的举例------------>调整margin值


body{
    /*margin: 0;*/  # 直接顶格
    margin: 10px 20px 30px 40px;  # 上，右，下，左
}

#d1{
	margin-bottom: 50px;  # 两个标签之间取最大值
}
#d2{
	margin-top: 100px;
}