03前端开发【css结束】

'''通过css操作文本内容'''
1.修改首个字体样式
  p:first-letter{
                color: red;
                font-size:48px；
             }

2.在文本开头添加内容
  p:before{
                 content: '哈哈'；
                 color：bule；
               }

3.在文本结尾添加内容
  p:after {
               content: '嘿嘿'；
               color：yellow；
            }

使用场景
   1.用于后面清除浮动带来的负面影响
   2.用于网站的内容防爬

#研究方向
 1.相同选择器
  '就近原则'：谁离标签越近就听谁的！
 2.不同选择器
  行内选择器 > id选择器 > 类选择器 > 标签选择器 （根据精确度高低）

CSS选择器是所有选择器的基础
  后期框架提供的/后期爬虫模块提供的
所以CSS选择器一定要好好学  这样后面学习前端框架和爬虫都会轻松不少

#文字字体
  font-family:"Microsoft  Yahei "(微软雅黑)
#字体大小
  font-size: 24px
#字体粗细
  font-weight: lighter\bolder(更浅/更深)
#字体颜色
  方式1：
      color ：red；
  方式2：
      color ： rgb（128.128.128）；
  方式3：
      color：  #4f4f4f;
"""
  获取颜色的方式有很多
      1.截图软件自带取色功能
           微信/qq自带颜色编号   #4f4f4f
      2.pycharm提供的取色器
           左侧颜色块点击即可
"""

#文字对齐
  text-align:center/left/right

#文字装饰（重点）
"""a标签默认带下划线  并且带有颜色（没有点击过是蓝色  点击过是紫色）"""
  text-decoration: none;  主要就是用于去除a标签的下划线
  text-decoration: line-through;  删除线
  text-decoration: overline;   上边线
  text-decoration: underline;   下划线

#首行缩进
  text-index: 32px;  #首行缩进32px（若一个字体是16px，正好这个缩进两格）

"""
  补充：可以使用浏览器做样式的动态调整
           查找到标签的css   然后左键选中  通过方向键上下动态修改数值"""

#1.背景颜色
   background-color： red;
#2.背景图片
   background-image:url("111.png");
  """背景图片如果没有设置的区域大  那么默认自动填充满"""
   background-repeat： no-repeat\repeat-x\repeat-y  #是否填充满整个页面   不填充整个页面/横向填充/纵向填充
   background-position: left  top;  # 图片位置   也可以写  center center   就是上下左右都是居中
   background-attachment:  fixed   #背景附着

"""
   如果多个属性名具有相同的前缀  那么可以整合到一起编写（只写一个前缀名即可）
       background:#338899  url("111.png")  no-repeat   left   top
"""

#1.自定义调整每个边的边框
   border-left/top/right/bottom-color: black;   #边框颜色
   border-left/top/right/bottom-width: 5px;    #边框长宽度
   border-left/top/right/bottom-style: solid;    #边框样式

#2.3统一调整每个边的边框
  border: 5px  solid  black;  顺序无所谓  只要给了三个就行

"""
  dotted  点状虚线边框
  doshed   矩形虚线边框
  solid       实线边框  （用的多一些）
"""

#3.画圆
   border-radius: 50%
  如果长宽一样就是圆  不一样就是椭圆（日常生活中头像就是如此）

"""只有块儿及标签可以设置长宽   行内标签是不可以的（长宽由内部文本决定）"""
  display:inline  让标签具备行内标签的特性（不能设置长度）
  display：block 让标签具备块儿级标签的特性（可以设置长度）
  display： inline-block  使元素同时具有行内元素和块级元素的特点
  display：none   隐藏标签（重点）页面上不会保留位置  也不显示
  visibility：hidde   也是隐藏标签  但是位置会保留

#所有的标签其实都有一个盒子模型
学习盒子模型可以将标签看成是一个快递盒
"""
 快递盒组成部分                                   盒子模型
    内部物品                                        content（内容）
    内部物品与盒子内部的距离                  padding（内边距/内填充）
    盒子的厚度                                      border（边框）
    盒子与盒子之间的距离                        margin（外边距）

ps:两个标签之间的距离   有时候可以用margin也可以用padding """

#1.body标签默认自带8px的margin值   我们在编写页面之前应该去掉
      margin-left：0；
      margin-top：0；
      margin-right：0；
      margin-bottom：0；

可以四个都调，也可以不用四个参数
"""......................................."""
   margin: 1px  2px  3px 4px     上右下左
   margin: 1px  2px  3px           上  左右  下
   margin：1px  1px                  上下  左右
   margin：1px                         统一设置一个值


#2.padding用法与margin一致
  同上

盒子模型页面布局
   标签的只能水平居中  可以使用固定搭配
     margin： 0  auto；（上下0，左右auto）

#1.浮动的作用
  float： left/right
"""
   浮动是所有网站页面布局必备的  可以将块儿级标签浮动起来脱离正常的文档流
    是多个块级标签可以在一行显示（全部飘在了空中）"""
#2.浮动的影响
   浮动会造成父级标签塌陷（类似于将口袋的东西拿到了口袋的外面，口袋瘪掉了）

  补充说明：
      浮动元素有时候会遮挡住底下的区域  
      如果有文本内容，那么浏览器会遵循文本内容优先展示的原则  会想方设法的让文本展示出来

clear：left；  规定元素的那一侧不允许其他浮动元素
推导流程
   1.直接写div然后写对应的长宽
   2.写div然后添加clear属性  避免去查找长宽
   3.万能公式（固定搭配 记住就可以）
   .clearfix:after{
                    content: ' ';
                    clear:both;
                    display:block;
             }

"""
   以后写网页 提前写好上面的代码
   然后那个标签塌陷了就给谁添加上clearfix类名即可

   很多前端页面框架使用的也是clearfix类名
"""