前端_css(2)

概要
 
  1. 伪元素选择器
  2. 选择器的优先级
  3. 字体相关
  4. 背景属性
  5. 边框属性
  6. display属性
  7. 盒子模型
 
 
 
详细
 
1 伪元素选择器
应用: 如果做爬虫时候没有爬到内容,那么有可能是伪元素选择器的原因
 
1-1 设置段落首字母
如: 首字母颜色,大小
<head>
    <meta charset="UTF-8">
    <title>梨园</title>
 
 
    <style>
        p:first-letter{
            color: red;
            font-size: 36px;
        }
    </style>
 
 
</head>

 

 
1-2 给段落最前边/最后边添加内容,并设置内容的样式
 
a) 给段落最前边添加内容,并设置内容的样式(如字体颜色)
<head>
    <meta charset="UTF-8">
    <title>梨园</title>
 
 
    <style>
        p:before {
            content: '前缀内容';
            color: orange;
        }
    </style>
 
 
</head>

 

 
b) 给段落最后边添加内容,并设置内容的样式
<head>
    <meta charset="UTF-8">
    <title>梨园</title>
 
 
    <style>
        p:after{
            content:"后缀内容";
            color: blue;
        }
    </style>
 
 
</head>

 

 
2 选择器的优先级
 
即多个选择器修改同一标签样式,最终会选择谁的?
 
答:
情况1 相同选择器不同导入方式
    就近原则(从上往下,谁离标签近谁说了算)
情况2 不同选择器修改同一标签
    行内选择器(实际中几乎不用)>id选择器>类选择器>标签选择器
 
 
3 字体相关设置
 
代码演示
<head>
    <meta charset="UTF-8">
    <title>梨园</title>
 
 
    <style>
        p{
            /*height: 1000px;*/
            /*width: 20px;*/
 
 
            /*font-size: 18px;*/
 
 
            /*font-weight: bolder;*/
            /*font-weight: lighter;*/
 
 
            /*color: rgba(57, 80, 111,0.1)*/  
            /*color: #7DEC70;*/
            /*color: red;*/
 
 
            /*text-align: center;*/
            /*text-align: right;*/
 
 
 
 
            /*text-indent: 32px;*/
 
 
        }
        a {
            text-decoration: none;
        }
    </style>
 
 
</head>
 
对代码解释
 
3.1 设置p标签的宽和高
~注:只有块儿级标签可以设置, 行内标签无法设置
height: 1000px;
width: 50px;
background-color: red;
 
3.2 字体大小
font-size: 99px;
 
3.3 字粗/细
font-weight: bolder;  
font-weight: lighter;
 
3.4 文本颜色
color:red;  # 第一种
color:#4e4e4e;  # 第二种
color:rgb(88,88,88)  # 第三种
rgba(88,88,88,0.2)  # 最后一个参数调整透明度(0-1)
~注: 
颜色来源
1)pycharm提供的取色器
2)qq或者微信的截图中有对应颜色
 
3.5 对其方式
text-align: center;  # 居中
 
3.6 首行缩进
text-indent: 32px;  # 默认文字大小是16px
 
关于a标签(经常用!!!)
去掉a标签默认的下划线
text-decoration: none;
 
4 "块儿级标签"的背景属性
 
代码演示->以p标签为例
<head>
    <meta charset="UTF-8">
    <title>梨园</title>
 
 
    <style>
        p{
            height: 1000px;
            width: 2000px;
            /*background-color: red;*/
            /*background-image: url("https://img0.baidu.com/it/u=2194400789,1673482086&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500");*/
            /*background-repeat: no-repeat;*/
            /*background-position: center;*/
 
 
            background: orange no-repeat center url("https://img0.baidu.com/it/u=2194400789,1673482086&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500");
        }
    </style>
 
 
</head>

 

代码解释
background-color: orange;  # p标签的背景颜色
background-image: url('url');  # p标签的背景图片
background-repeat: no-repeat;  # 是否铺满p标签
background-position:左右 上下;  # 图片在p标签的位置
 
"""多个属性名前缀相同 那么可以简写"""
background:orange url('url');  # 一个个编写即可 不写就默认
  
# 如何实时修改图片位置
    浏览器找到标签的css代码 然后方向键上下按住即可动态调整
 
5 边框属性
 
代码演示
<head>
    <meta charset="UTF-8">
    <title>梨园</title>
 
 
    <style>
        p{
            height: 100px;
            width: 200px;
            
            /*border-left-style: solid;*/
            /*border-left-color: red;*/
            /*border-left-width: 3px;*/
 
 
            /*border-left: 5px red  solid;   !*没有顺序*!*/
            /*border-right: 5px orange dashed;*/
            /*border-top: 5px green  solid;*/
            /*border-bottom: 5px blue  double;*/
 
 
             border: 5px red solid;  /*上下左右一致*/
 
 
 
 
        }
        div{
            /*height: 700px;*/
            height: 500px;
            width: 500px;
            background-color: orange;
            border: 5px dashed red;
            /*边框设置成圆形->半径为50%; 若height与width不一致, 则为椭圆*/
            border-radius: 50%;
        }
    </style>
 
 
</head>

 

代码解释
            /*border-left-color: red;*/
            /*border-left-style: solid;*/
            /*border-left-width: 3px;*/
            /*多个属性有相同的前缀  一般都可以简写*/
            /*border-left: 5px red  solid;   !*没有顺序*!*/
            /*border-top:orange 10px dotted;*/
            /*border-right: black dashed 5px;*/
            /*border-bottom: deeppink 8px solid;*/
            /*多个属性有相同的前缀  一般都可以简写*/
            border: 5px red solid;  /*上下左右一致*/
 
 
6 display属性
设置标签->块儿级标签还是行内标签(独占一行还是文本多大占多大空间)
 
代码演示
<head>
    <meta charset="UTF-8">
    <title>梨园</title>
 
 
    <style>
 
 
 
 
        /*p {*/
        /*    display: inline;*/
        
        /*}*/
        
        /*span {*/
        /*    display: block;*/
        /*    display: none;*/
        /*}*/
        
        #d1{
            /*display: inline;*/
            display: inline-block;
            height: 100px;
            width: 100px;
            background: blue;
            text-align: center;
 
 
        }
        #d2 {
            display: inline-block;
            height: 100px;
            width: 100px;
            background:orange ;
            text-align:center;
 
 
        }
        
    </style>
 
 
</head>

 

代码解释:
6.1 将行内标签改为块级标签及掩藏标签
<这两种用法后边相对用的多>
span {
            /*display: block;  !*将行内标签改为块级标签*!*/
            display: none;
            /*
            隐藏标签 页面上看不见也不再占用页面位置
            但是通过浏览器查找标签是可以看到的
            到后面学习django会讲跨站请求伪造(做钓鱼网站)
            */
        }
6.2 将块级标签改为行内标签
 
div {
            display: inline;  /*将块级标签改为行内标签*/
}
 
6.3 让标签既可以在一行显示又可以设置长宽
 
p {
            display: inline-block;
        }
 
 
 
7 盒子模型
 
为便于理解: 把一个标签比喻成一个快递盒
 
    1) 快递盒与快递盒之间的距离            外边距margin(标签之间的距离)
    2) 快递盒的厚度                                边框border
    3)内部物品到盒子之间的距离            内边距padding(文本内容到边框之间的距离)
    4) 物品本身大小                                 文本大小
 
7.1 body标签自带8px外边框, 在实际中应去掉
     body {
            margin: 0;
        }
 
7.2 外边距margin
margin:0px;  # 上下左右都一致
margin:10px 10px;  # 第一个控制上下 第二个控制左右
margin:20px 10px 20px;  # 上 左右 下
margin:10px 2px 3px 5px;  # 上 右 下 左
 
7.3 内边距(文本内容到边框的距离)
 
padding:0px;  # 上下左右都一致
padding:10px 10px;  # 第一个控制上下 第二个控制左右
padding:20px 10px 20px;  # 上 左右 下
padding:10px 2px 3px 5px;  # 上 右 下 左
 
 
 
posted @ 2022-01-22 12:21  tslam  阅读(36)  评论(0)  编辑  收藏  举报