其他分享
首页 > 其他分享> > web选择器优先级，字体，背景，边框，display，盒子

web选择器优先级，字体，背景，边框，display，盒子

作者：互联网

目录

伪元素选择器

  1. 首字调整>>>：一种文档的布局方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div:first-letter {
        font-size: 50px;
        color: red;
      }
    </style>
</head>
<body>
  <div>
    你在讲啥？
  </div>
</body>
</html>

  1. 在文本的前面通过css动态渲染>>>：content为特殊文本，无法选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div:before {
        content: '吼吼';
        color: red;
      }
    </style>
</head>
<body>
  <div>
    你在讲啥？
  </div>
</body>
</html>

  1. 在文本的后面通过css动态渲染文本>>>：after为特殊文本，无法选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div:after {
        content: '吼吼';
        font-size: 50px;
        color: red;
      }
    </style>
</head>
<body>
  <div>
    你在讲啥？
  </div>
</body>
</html>

如果在编程写爬虫程序，爬取页面内容的时候如果没有正常文本，那么可能因为伪元素选择器的问题。

before和after多用于清除浮动。

选择器的优先级

选择器优先级

我们之前已经学习了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那么浏览器根据什么来决定应该应用哪个样式呢？

根据不同选择器的权重了来决定，具体的选择器权重计算方式如下：

867021-20180305155201408-1680872107

相同选择器不同导入方式（相同距离优先）

相同选择器不同导入方式（相同则距离优先），选择器系统遵循就近原则（从上往下距离标签）。

不同选择器不遵循就近原则（优先级）

行内选择器 > id选择器 > 类选择器 > 标签选择器

字体相关

高度（height）和宽度（width）

只有块儿级标签可以设置，行内标签无法设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .a1 {
        height: 50px; /*高度*/
        width: 1000px;  /*宽度*/
      }
    </style>
</head>
<body>
  <div id="d1" class="a1">我是块儿级标签？</div>
  <p class="a1">我是块儿级标签</p>
  <h6 class="a1">我是块儿级标签</h6>
  <span class="a1">我是行内标签</span>
  <div class="a1">我是块儿级标签</div>
</body>
</html>

字体大小（font-size）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .a1 {
        font-size: 100px;
      }
    </style>
</head>
<body>
  <div id="d1" class="a1">我是块儿级标签？</div>
  <p class="a1">我是块儿级标签</p>
  <h6 class="a1">我是块儿级标签</h6>
  <span class="a1">我是行内标签</span>
  <div class="a1">我是块儿级标签</div>
</body>
</html>

字重（font-weight）

值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100-900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .a1 {
        font-weight: bolder;
      }
    </style>
</head>
<body>
  <div id="d1" class="a1">我是块儿级标签？</div>
  <p class="a1">我是块儿级标签</p>
  <h6 class="a1">我是块儿级标签</h6>
  <span class="a1">我是行内标签</span>
  <div class="a1">我是块儿级标签</div>
</body>
</html>

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

还有rgba（255，0，0，1），第四个值为alpha，指定了色彩的透明度/不透明度，它的范围在0.0~1.0

代码如下：

<style>
  .a1 {
    /*color: red;*/
    /*color: #FF0000FF ;*/
    /*color: RGB(255,0,0);*/
    /*color: rgba(255,0,0,0.5);*/
  }
</style>

文字属性

文字对齐

**text-align **属性规定元素中的文本的水平对齐方式。

值 描述
left 左边对齐，默认值
right 右对齐
center 居中对齐
justify 两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果

值 描述
none 默认。定义标准的文本
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

首行缩进

将段落的第一行缩进 32像素，默认是16像素：

p {
  text-indent: 32px;
}

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/* 背景重复 repeat(默认):背景图片平铺排满整个网页 
repeat-x：背景图片只在水平方向上平铺 
repeat-y：背景图片只在垂直方向上平铺 
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;/*background-position: 200px 200px;*/

背景颜色

<style>
div {
background-color: orange;
width: 100%; /*高度*/
height: 2000px;  /*宽度*/
}   
</style>

背景图片

background: url("https://wx2.sinaimg.cn/mw2000/003yHo7Nly1gyc6nqoax7j62bz2bz7wj02.jpg");

repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺

显示指定图片位置以及居中显示

background-position:left top;
或者
background-position:100px 100px;
/*居中显示*/
background-position:center center;

多个属性名前缀相同，支持简写

background:#336699 url('1.png') no-repeat left top;
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .a1 {
        /*color: red;*/
        /*color: #FF0000FF ;*/
        /*color: RGB(255,0,0);*/
        color: rgba(255,0,0,0);
      }
      /*a {text-decoration: none;}*/
      #a11 {
        background-color: rgba(153,50,204,0.3);
        width: 900px; /*宽度*/
        height: 1000px;  /*高度*/
        background-image: url("https://img0.baidu.com/it/u=2362377673,25050994&fm=253&fmt=auto&app=120&f=JPEG?w=802&h=800");
        background-repeat: no-repeat; /*不平铺*/
        filter: alpha(opacity=30); /*调节图片透明度*/
        -moz-opacity: 0.1;
        opacity: 0.1;
        background-position: center center; /*上下居中显示*/
      }
    </style>
</head>
<body>
  <div id="a11"></div>
</body>
</html>

边框属性

css边框样式

border指定上下左右边框

值 描述
left 左
top 上
right 右
bottom 下

border-style 属性指定要显示的边框类型。

值 描述
dotted 定义点线边框
dashed 定义虚线边框
solid 定义实线边框
double 定义双边框
groove 定义 3D 坡口边框。效果取决于 border-color 值
ridge 定义 3D 脊线边框。效果取决于 border-color 值
inset 定义 3D inset 边框。效果取决于 border-color 值
outset 定义 3D outset 边框。效果取决于 border-color 值
none 定义无边框
hidden 定义隐藏边框
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            border-left-color: blue;
            border-left-style: ridge;
            border-left-width: 1px;
        }
        /*可自定义四条边框样式*/
        #a1 {
            border-left: blue 1px ridge;
            border-top: red 1px ridge;
            border-right: ridge 1px #cca632;
            border-bottom: darkmagenta 1px ridge;
        }
        span {border: 1px blue ridge;}
        div {border: 1px blue ridge;}
    </style>
</head>
<body>
    <p>现在操作左边框,我是块儿级边框</p>
    <span id="a1">我是行内边框，现在来定制样式，并且简写代码</span>
    <br><br>
    <span>我是一个行内边框，现在是简写</span>
    <br><br>
    <div>我是块儿级边框，现在是简写</div>
</body>
</html>

画圈圈⭕️：

代码：

<style>    
		div {
        height: 500px;
        width: 500px;
        border: 5px solid red;
        /*画圆*/
        border-radius: 50%;
    }
</style>

display属性

用于控制HTML元素的显示效果

值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            height: 500px;
            width: 500px;
            border: 5px solid red;
            border-radius: 50%;
            display:none;
        }
        #d2 {
            height: 500px;
            width: 500px;
            border: 5px solid red;
            border-radius: 50%;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>

块儿级变行内

div {
            display: inline;  
}

2608805-20220121190456447-707334422

行内变块级

span {
            /*display: block;
        }

2608805-20220121190514876-384703234

让行内标签具备修改长宽特性

让行内标签具备块儿级标签可以修改长宽的特性，也具备行内标签文本多大就占多大的特性。

代码：

p {
    	    height: 100px;
            width: 100px;
            display: inline-block;
        }

2608805-20220121190801398-1954844566

盒子模型

以生活中快递的形式举例

快递盒与快递盒之间的距离>>>:外边距（标签之间的距离）

快递盒的厚度>>>:边框

内部物品到盒子的距离>>>:内边距（文本内容到边框的距离）

物品本身的大小>>>:文本大小

注意：body标签默认自带8px的外边距，在编写的时候应该提前去掉

<style>
body {
			margin: 0;
}
</style>
值 描述
margin 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding 用于控制内容与边框之间的距离
Border(边框) 围绕在内边距和内容外的边框。
Content(内容) 盒子的内容，显示文本和图像。

2608805-20220121190828643-599252543

外边距（标签之间的距离）

margin简写
margin:0px;  # 上下左右都一致
margin:10px 10px;  # 第一个控制上下 第二个控制左右
margin:20px 10px 20px;  # 上 左右 下
margin:10px 2px 3px 5px;  # 上 右 下 左

内边距(文本内容到边框的距离)

padding简写
padding:0px;  # 上下左右都一致
padding:10px 10px;  # 第一个控制上下 第二个控制左右
padding:20px 10px 20px;  # 上 左右 下
padding:10px 2px 3px 5px;  # 上 右 下 左

标签：web,display,color,标签,边框,块儿,border,选择器
来源： https://www.cnblogs.com/xiejunjie8888/p/15855649.html