Python HTML和CSS 4：CSS常用文本样式与样式选择器-阿里云开发者社区

Python HTML和CSS 4：CSS常用文本样式与样式选择器

2022-05-22 325

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Python HTML和CSS 4：CSS常用文本样式与样式选择器

一、常用的应用文本的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';设置文字倾斜

font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px;

font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如：font:normal 12px/36px 'Microsoft YaHei';

注意：font 值要求顺序的,不能错，否则会失效

text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

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;},其中的 * 代表所有的选择器，范围太广，不建议使用，了解一下即可

提示：从上面我们看出来，div 选择器会影响所有的 div 标签，如何区分不同的div标签来设置样式，我们看接着往下看

<2>、id选择器：(不推荐使用)，通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，损耗资源，id名一般给程序使用，所以不推荐使用id作为选择器。如下

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>

提一下： class 后面可以设置多个 name，name之间用空格隔开，如下

<div class="fontSet colorSet">这是第 2 个div</div>

<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>

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

<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>

Python HTML和CSS 4：CSS常用文本样式与样式选择器

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

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Python HTML和CSS 4：CSS常用文本样式与样式选择器

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

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像