前端_css(2)

概要

伪元素选择器
选择器的优先级
字体相关
背景属性
边框属性
display属性
盒子模型

详细

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 阅读(37) 评论(0) 编辑收藏举报

刷新页面返回顶部

tslam

前端_css(2)

公告