选择器与属性和浮动，定位（3）

分组与嵌套

# 多个选择器可以并列公用一套css样式
div,p,span {}
# 不同选择器之间也可以混合使用
.c1,#d1>span {}

伪类选择器

a:link {}  #访问之前状态
a:hover {}  # 鼠标悬停在上面的状态 需要记忆 
a:active {} #点下去 不松开的状态
a:visited {}#访问之后的状态
input:focus {}  # input框获取焦点

伪元素选择器

p:first-letter {}  # 通过css加文本内容 但是无法选中
p:before {} #在前面
p:after {}#在后面
# ps:before和after多用于清除浮动带来的负面影响

选择器优先级

"""
选择器相同 就近原则
行内 > id > class > 标签
精确度越高说话越硬
"""

宽和高

width
height
# 块儿级标签的宽度不修改的情况下默认占浏览器一整行，块儿级标签的高度也是取决于标签内部的文本的高度  但是可以通过css设置
# 行内标签宽度和高度都是有内部文本决定的  行内标签是无法设置长宽的 无效

字体属性

# 字体样式 草书 行书 ...
font-family
# 字体大小
font-size
# 字重
font-weight
# 文本颜色
    1 直接写颜色英文
  2 写颜色编号 #4e4e4e
  3 写颜色的三基色 rgb(128,128,128)  # 范围0-255
  4 可以给颜色加透明度 rgba(128,128,128,0.5)  # 范围0-1
     ps:可以用pycharm 微信 qq等软件快速的获取你想要的颜色

文字属性

# 文字对齐
text-align
        center
# 文字装饰 记忆  主要就是用来给a标签去掉自带的下划线
text-decoration
        none
# 首行缩进
text-indent

背景属性

# 背景色
backgroud-color
# 背景图片
background:#fff url() no-repeat center center
"""
ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀
"""
ps:在调样式的时候 可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中

边框

# 任何一个标签都有上下左右四个方向的边框
border-width
border-style
border-color
简写
border
# 画圆
border-radius:50%

display属性

# 能够让标签具有自身没有的属性和特征
display
    none  隐藏 并且原来的位置也没了
  inline  变成行内
  block    变成块级  
  inline-block  既是行内又是块级
ps:visibility:hidden只隐藏 位置还在

 

css盒子模型

# 1 外边距(标签与标签之间的距离)             margin
# 2 边框                                                    border
# 3 内边距/内填充                                     padding
# 4 内容                                                  content

"""
body标签默认自带8px的margin

margin:
    10 上下左右
    10 20 上下 左右
    10 20 30 上 左右 下
    10 20 30 40 上 右 下 左
padding:
    10 上下左右
    10 20 上下 左右
    10 20 30 上 左右 下
    10 20 30 40 上 右 下 左
"""

 清除浮动带来的影响

"""
浮动的元素会造成父标签的塌陷

解决塌陷推导步骤
    1.自己写一个标签强行撑起一个高度
    2.clear属性
            clear:left\right\both
    3.统一解决方式    提前定义好后续直接使用
      .clearfix:after {
          content:'';
          display:block;
          clear:both;
      }
      谁塌陷了就给谁加上clearfix类属性
"""

溢出属性

"""标签内部的内容超出了标签自身的范围会造成内容的溢出"""
overflow:hidden/scroll/auto/visible
# 圆形头像制作
overflow:hidden
img {
    max-width:100%;
  }

定位

"""
静态 static
    默认所有的标签都是静态的 无法改变位置    

相对定位 relative
    相对于标签自身原来的位置
    (如果你讲标签的position由static变成relative，那么标签就会由没有定位过的标签变成已经定位过的标签 性质就改变了)

绝对定位 absolute
    eg:小米购物车
    相对于已经定位过的父标签(如果没有则以body作为参照)

固定定位  fixed
    eg:回到顶部、右侧小广告...
    相对于浏览器窗口定位

left
top
right
bottom
"""
# 脱离文档流
    1.浮动
  2.绝对定位
  3.固定定位
# 不脱离文档流
    1.相对定位

透明度

opacity  # 颜色和字体均可改变