python Css选择器

2020-05-20 本文已影响0人 g_ices

一、常用的应用文本的css样式

1.1、文本的css样式其实也就是给一段文本设置字体大小、颜色、背景色、是否加粗等等，如下：
- color 设置文字的颜色，如： color:red;
- font-size 设置文字的大小，如：font-size:12px;
- font-family 设置文字的字体，如：font-family:'微软雅黑';建议使用 'Microsoft YaHei',中文容易乱码
- font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
  image
- font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
- line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px;
  image
- font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如：font:normal 12px/36px 'Microsoft YaHei';
注意：font 值要求顺序的,不能错，否则会失效
- text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
  image
- text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
  image
- text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
建议：遇到不会的去 w3school 查找

二、css颜色表示法与CSS样式选择器

2.1、css颜色表示法(主要有三种)
- 第一种：颜色名表示，比如：red 红色，gold 金色
```
color: red;
```
- 第二种：rgb表示，比如：rgb(255,0,0) 表示红色
```
color: rgb(255,0,0);
```
- 第三种：16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
```
color: #ff0000;
```

2.2、CSS样式选择器，常用的选择器有如下几种

<1>、标签选择器：(不推荐使用)，此种选择器影响范围大，建议尽量应用在层级选择器中。如下
```
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS选择器</title>
   <style type="text/css">
      div {
           color: green;
      }
   </style>
</head>
<body>
    <div>这是第 1 个div</div>
    <div>这是第 2 个div</div>
    <div>这是第 3 个div</div>
</body>
</html>
```
提一下：*{font-size: 20px;},其中的 * 代表所有的选择器，范围太广，不建议使用，了解一下即可
image

提示：从上面我们看出来，div 选择器会影响所有的 div 标签，如何区分不同的div标签来设置样式，我们看接着往下看
<2>、id选择器：(不推荐使用)，通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，损耗资源，id名一般给程序使用，所以不推荐使用id作为选择器。如下
image

id选择器在使用的是：#+id的名字+{},如上图

<3>、类选择器：(推荐使用)，通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。类选择器可以先定义再使用，类选择器使用的是 .,如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style type="text/css">

       #div1{
          color: palegreen;
          font-size: 20px;
       }
       .fontSet{
          font-size: 28px;
       }

     </style>
</head>
<body>

    <div id="div1" class="fontSet">这是第 1 个div</div>
    <div class="fontSet">这是第 2 个div</div>
    <div>这是第 3 个div</div>

</body>
</html>

image

提一下： class 后面可以设置多个 name，name之间用空格隔开，如下
<div class="fontSet colorSet">这是第 2 个div</div>
image

<4>、层级选择器：主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <style type="text/css">

       .box{
           color: green;
        }

        .box em{
           color: brown;
           font-style: normal;
        }

    </style>
</head>
<body>
     <div class="box">层级选择器：主要应用在选择父元素下的<em>子元素</em>，或者子元素下面的<em>子元素</em>，<br/>
可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。</div>
</body>
</html>

提示：标签选择器一般都是用在层级选择器里面，不要单独使用，个别的地方可以单独使用

当然你也可以在内嵌标签里面再定义class,在样式里面进行多层定义，如上面的 .box em,一般来说最多4层，再多性能就不好了
层级选择器是用逗号隔开的

<5>、组选择器：多个选择器，如果有同样的样式设置，可以使用组选择器。如下:格式是：各个选择器之间用 , 隔开

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>组选择器</title>
   <style type="text/css">

       .box1,.box2,.box3{
           font-size: 25px;
           text-indent: 40px;
        }
       .box1{
           color: red;
       }
       .box2{
           color: brown;
       }
       .box3{
           color: gold;
       }
    </style>
</head>
<body>
     <div class="box1">我是第 1 个div</div>
     <div class="box2">我是第 2 个div</div>
     <div class="box3">我是第 3 个div</div>
</body>
</html>

image

提示：三个标签的字体的大小、首行缩进的大小都是一样的，只有字体的颜色不一样，我们可以采用如上的组选择器方式来定义样式

<6>、伪类及伪元素选择器：常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。如下

伪类选择器 (在给标签设置鼠标悬浮在其上面的样式，如下面的 .box1:hover)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类与伪元素的使用</title>
    <style type="text/css">
       .box1{
          color: brown;
          font-size: 20px;
       }
       .box1:hover{
          color: red;
          font-size: 28px;
       }
    </style>
</head>
<body>
    <div class="box1">我是第 1 个div</div>
</body>
</html>

伪元素选择器 ：(主要是下面：before 与 after 的使用),都是在添加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类与伪元素的使用</title>
    <style type="text/css">

       .box2,.box3{
            color: brown;
            font-size: 20px;
       }
      .box2:before{
            content: "前面的内容";
            color: green;
      }
      .box3:after{
            content: "后面的内容";
            color: green;
      }
    </style>
</head>
<body>
    <div class="box2">我是第 2 个div</div>
    <div class="box3">我是第 3 个div</div>
</body>
</html>

image

python Css选择器

猜你喜欢

热点阅读