前端开发(3)

• 伪元素选择器

• 选择器优先级

• css修改文字属性

• css修改字体属性

• css修改其他属性

 

 

伪元素选择器

"""通过css操作文本内容"""
1.修改首个字体样式
    p:first-letter{
        color:red
        font-size:55px
    }
2.在文本开头添加内容
    p:before{
        content:'dsa'
        color:red;
    }
3.在文本结尾添加内容
    p:after{
        content:'事实上'；
        color:yellow;
    }
使用场景
    1.用于后面清除浮动带来的负面影响
    2.用于网站的内容防爬

选择器优先级

# 研究方向
1.相同选择器
    '就近原则'：谁离标签近就听谁的
2.不同选择器
    行内选择器 > id选择器 > 类选择器 > 标签选择器

字体样式

# 文字字体
    font-family:"asdsdsdsd"
# 字体大小
    font-size:22px
# 字体粗细
    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-indent: 10px;  # 首行缩进10px
 
"""
可以使用浏览器做样式的动态调整
    查找到标签的css 然后左键选中 通过方向键上下动态修改数值
"""

背景属性

1.背景颜色
    background-color:red;
2.背景图片
    background-image:url("xxx.jpg");
    """背景图片如何没有设置的区域大 那么默认自动填充满"""
    background-repeat:no-repeat\repeat-x\repeat-y   是否平铺
    background-position:left top;   图片位置
    background-attachment:fixed;    背景附着
 
"""
如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)
    background:#336699 url('1.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.统一调整每个边的边框
    border: 5px solid black;    顺序无所谓 只要给了三个就可以
    """
    dotted  点状虚线边框
    dashed  矩形虚线边框
    solid   实线边框
    """
# 3.画圆
    border-radius:50%
   如果长宽一样就是圆    不一样就是椭圆

盒子模型

# 所有的标签其实都有一个盒子模型
"""
组成成分
盒子模型
    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；

浮动

# 1.浮动的作用
float:left/right;
"""
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
是多个块儿级标签可以在一行显示(全部飘在了空中)
"""
​
# 2.浮动的影响
    浮动会造成父标签塌陷(类似于将袋子里的东西拿到了袋子外面)
  
补充说明：
    浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
    那么浏览器会遵循文本内容优先展示的原则 会想方设法让文本展示出来

解决浮动造成的影响

clear:left; 规定元素的那一侧不允许其他浮动元素
 推导流程
    1.直接写div然后写对应的长宽
    2.写div然后添加clear属性 避免去查找长宽
    3.万能公式(固定搭配 )
        .clearfi:after{
            content:'';
            clear:both;
            display:block;
        }
     """
     写网页提前写好上面的代码
     哪个标签塌陷了就给谁添加上clearfix类名即可
     
     很多前端页面框架使用的也是clearfix类名
     """