• CSS基础选择器,CSS字体属性,CSS文本属性

    🍓个人主页：bit.. 

    🍒系列专栏：Linux(Ubuntu)入门必看   C语言刷题      数据结构与算法  HTML和CSS3

    目录

    一.CSS基础选择器

    1.1CSS选择器的作用

    1.2选择器的分类

    1.3标签选择器

    1.4类选择器（差异化选择不同的标签）

    1.5id选择器（一次性）

    1.6 通配符选择器

    二.CSS字体属性

    2.1字体系列

    2.2字体大小（font-size）

             2.3字体粗细（font-weight）

             2.4文字样式 font-style

    2.5字体符合属性

    2.6字体属性的总结

    3.CSS文本属性

    3.1文本颜色

    3.2对齐文本

    3.3装饰文本

    3.4文本缩进

    3.5 行间距

    3.6文本属性总结

    一.CSS基础选择器

    1.1CSS选择器的作用

            选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。

    1.2选择器的分类

    选择器可以分为 基础选择器 符合选择器 两大类。我们这里了解基础选择器。

    • 基础选择器是由单个选择器组成的。
    • 基础选择器包括：标签选择器，类选择器，id选择器，通配符选择器。

     1.3标签选择器

    标签选择器（元素选择器）是指HTML标签名称，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

    语法：

    1. 标签名 {
    2.     属性1:属性值1;
    3.     属性1:属性值1;
    4.     ······
    5.     }

    作用：

            标签选择器可以把某一类标签全部选择出来，比如所有的

    标签和所有的标签。

    优点：

            能够快速为页面中同类型的标签统一设置样式。

    缺点：

            不能设计差异化样式，只能选择全部的当前标签。

    1.4类选择器（差异化选择不同的标签）

    语法：

    1. .类名 {
    2.     属性1:属性值1;
    3.     属性2:属性值2;
    4.     ······
    5.     }  
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         .red {
    7.             color: red;
    8.         }
    9.     style>
    10. head>
    11.  
    12. <body>
    13.     <div class="red">变红色div>
    14. body>
    15.  
    16. html>

    结构需要用class属性来调节class类的意思

    注意：

    1. 类选择器使用"."进行标示，后面紧跟类名(自定义）
    2. 可以理解为给这个标签起了一个名字来表示。
    3. 长名称或者词组，可以使用中横线来为选择器命名
    4. 不要使用纯数字，中文等命名，尽量使用英文字母来表示
    5. 命名要有意义，尽量使用别人一眼就知道这个类名的目的

     类选择器——多类名（一个标签多个名字）

    1.多命名的使用方式

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         .font20 {
    7.             color: red;
    8.         }
    9.     style>
    10. head>
    11.  
    12. <body>
    13.     <div class="red font20">变红色div>
    14. body>
    15.  
    16. html>

    注意：

    1. 在标签class属性中写多个类型名
    2. 多个类型名中间必须用空格分开
    3. 这个标签就可以分别具有这些类名的样式

    2.类型名开发的使用场景

    1. 可以把一些标签元素相同的样式（共同的部分）放到一个类里面。
    2. 这些标签都可以调用这个公共的类，然后在调用自己独有的类。
    3. 从而节省了CSS代码，统一修改也非常方便。 

    1.5id选择器（一次性）

    id选择器可以为标有特定id的HTML元素指定一个特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

    语法：

    1. #id名 {
    2.         属性1:属性值1；
    3.         属性2:属性值2；   
    4.         ······
    5.         }

     注意：

            id属性只能在每一个HTML文档中出现一个。

    口诀：

            样式#定义，结构id调用，只能调用一次。类选择器在修改样式中最多，id选择器一般用于页面唯一的元素上，经常和JavaScript搭配使用。

    1.6 通配符选择器

            在CSS中通配符选择器使用用“*”定义，他表示选取也面中所有元素（标签）

    语法：

    1. * {
    2.     属性1:属性值1;
    3.     属性1:属性值1;
    4.     ······
    5. }
    • 通配符选择器不需要调用，自动就给所有元素使用样式
    • 特殊情况才使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距，后期讲解）                                                                                                                                                     
    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4. }

    总结：

    基础选择器作用特点用法使用情况
    标签选择器可以选出所有相同的标签 比如：P不能差异化选择p {colo: red;}较多
    类选择器可以选出一个或者多个标签可以根据需求选择.nav {color: red;}非常多
    id选择器一次只能选择一个标签id属性只能在每个HTML中出现一次#nave{ color: red;}一般和JavaScript搭配
    通配符选择器选择所有的标签特殊情况使用* {color: red;}特殊情况使用

    二.CSS字体属性

    CSSFont（字体）属性用于定义字体系列，大小，粗细，和文字样式（如斜体）

    2.1字体系列

    CSS使用font-family 属性定义文本的字体系列。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         div {
    7.             font-family: 宋体;
    8.         }
    9.     style>
    10. head>
    11.  
    12. <body>
    13.     <div>字体系列div>
    14. body>
    15.  
    16. html>
    1. 各种字体之间必须使用英文状态下的逗号隔开。
    2. 一般情况下，如果由空格隔开的多个单词组成第字体加引号。
    3. 尽量使用系统莫让自带字体，保证在任何用户浏览器中都能够正确显示
    4. 最常见的几种字体：body{ font-family: "Microsoft YAaHei",  tahoma, arial,"Hiragino Sans GB ";}

    2.2字体大小（font-size）

            CSS使用 font-size 属性定义字体大小。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         /* 字体样式 */
    7.         
    8.         div {
    9.             font-family: 宋体;
    10.         }
    11.         /* 字体大小 */
    12.         
    13.         div {
    14.             font-size: 200px;
    15.         }
    16.     style>
    17. head>
    18.  
    19. <body>
    20.     <div>字体系列div>
    21. body>
    22.  
    23. html>
    • px(像素)大小是我们页面网页的最常见单位。
    • Google 默认文本大小为16px；
    • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
    • 可以给body指定整个页面文字的大小

    2.3字体粗细（font-weight）

    css使用 font-weight 属性设置文本的粗细

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         /* 字体样式 */
    7.         
    8.         div {
    9.             font-family: 宋体;
    10.         }
    11.         /* 字体大小 */
    12.         
    13.         div {
    14.             font-size: 200px;
    15.         }
    16.         /* 文本粗细 */
    17.         
    18.         div {
    19.             font-weight: bold;
    20.         }
    21.     style>
    22. head>
    23.  
    24. <body>
    25.     <div>字体系列div>
    26. body>
    27.  
    28. html>

    属性值描述
    normal默认值(不加粗的）
    bold定义粗细（加粗）
    100~900400等价于normal     700等价于bold  后面不加距离单位

    2.4文字样式 font-style

    CSS使用 font-style 属性设置问本风格

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         /* 字体样式 */
    7.         
    8.         div {
    9.             font-family: 宋体;
    10.         }
    11.         /* 字体大小 */
    12.         
    13.         div {
    14.             font-size: 200px;
    15.         }
    16.         /* 文本粗细 */
    17.         
    18.         div {
    19.             font-weight: bold;
    20.         }
    21.     style>
    22. head>
    23.  
    24. <body>
    25.     <div>字体系列div>
    26. body>
    27.  
    28. html>
    属性值作用
    normal默认值，浏览器会显示标准的样式 font-style: normal;
    italic斜体

    注意：

            平时我们很少给文字加斜体，反而给斜体标签 或 该为不倾斜字体。

    2.5字体符合属性

            字体符合属性可以把以上文字或样式综合来写，这样可以更节约代码。

    body {

                    font:  font-style   font-weight

                    font-size/line-height        font-family;

    }

    • 使用font属性时，必须按上面格式 顺序书写，不能更换顺序。并且各个属性可以空格隔开。
    • 不需要设置时属性可以省略（取默认值),但必须保留font-size 和 font-family 属性，否则font属性将不起作用。

    2.6字体属性的总结

    属性表示注意点
    font-size字号单位px像素
    font-family字体按工作中团队要求而定义
    font-weight字体粗细加粗 700/bold 不加粗 400/normal 数字后面不加单位
    font-style字体样式倾斜italic  不倾斜 normal
    font字体连写

    1.字体连写是有顺序的，不能随意换位置

    2.其中字号和字体必须同时出现

    3.CSS文本属性

    CSSText(文本) 属性可以定义文本外观，比如文本颜色，对齐文本，装饰文本，文本缩进，行间距等。

    3.1文本颜色

    color属性用于定义文本颜色

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         div {
    7.             color: red;
    8.         }
    9.     style>
    10. head>
    11.  
    12. <body>
    13.     <div>文本颜色div>
    14. body>
    15.  
    16. html>

    表示属性值
    预定义的颜色red,green,blue,pink
    十六进制#FF6600， #FF0000， #20D794
    RGB代码rgb(255,0,0) 或 rgb(100%,0%，0%)

    开发中最常见的是十六进制。

    3.2对齐文本

            text-align 属性用于设置元素内文本的水平对齐方式。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         div {
    7.             color: red;
    8.         }
    9.         
    10.         a {
    11.             text-decoration: none;
    12.         }
    13.         /* 文本对齐方式 */
    14.         div {
    15.             text-align: center;
    16.             /* 居中对齐 */
    17.         }
    18.     style>
    19. head>
    20.  
    21. <body>
    22.     <div>文本颜色div>
    23.     <a href="#">链接a>
    24. body>
    25.  
    26. html>

    属性值解释
    left左对齐（默认值）
    right右对齐
    center居中对齐

    3.3装饰文本

    text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线等。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         div {
    7.             color: red;
    8.         }
    9.         
    10.         a {
    11.             text-decoration: none;
    12.         }
    13.         /* 文本对齐方式 */
    14.         
    15.         div {
    16.             text-align: center;
    17.             /* 居中对齐 */
    18.             text-decoration: underline;
    19.         }
    20.     style>
    21. head>
    22.  
    23. <body>
    24.     <div>文本颜色div>
    25.     <a href="#">链接a>
    26. body>
    27.  
    28. html>
    属性值描述
    none默认，没有装饰线   常用
    underline下划线    常用
    overline上划线  几乎不用
    line-through删除线        一般不用

    例如：

    一般链接都有下滑线 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         div {
    7.             color: red;
    8.         }
    9.         
    10.         a {
    11.             text-decoration: none;
    12.         }
    13.     style>
    14. head>
    15.  
    16. <body>
    17.     <div>文本颜色div>
    18.     <a href="#">链接a>
    19. body>
    20.  
    21. html>

    3.4文本缩进

    text-indent 属性用来指定文本的第一行缩进，通常是将段落的首行缩进。

    通常设置该属性，所有元素的第一行都可以所经一个给定的长度，甚至该长度可以是负值。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         div {
    7.             text-indent: 10px;
    8.         }
    9.         
    10.         p {
    11.             text-indent: 2em;
    12.         }
    13.     style>
    14. head>
    15.  
    16. <body>
    17.     <div>text-indent 属性用来指定文本的第一行缩进，通常是将段落的首行缩进。div>
    18.     <p>通常设置该属性，所有元素的第一行都可以所经一个给定的长度，甚至该长度可以是负值。p>
    19. body>
    20.  
    21. html>

     em是一个相对单位，就是当前元素（font-size）1个字节的大小，如果当前元素没有设置大小，则会按照负元素的一个字节大小。

    3.5 行间距

    line-height 属性用于设置行间距离（行高），可以控制文字行于行之间的距离。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <style>
    6.         div {
    7.             text-indent: 10px;
    8.         }
    9.         
    10.         p {
    11.             text-indent: 2em;
    12.             line-height: 50px;
    13.         }
    14.     style>
    15. head>
    16.  
    17. <body>
    18.     <div>text-indent 属性用来指定文本的第一行缩进，通常是将段落的首行缩进。div>
    19.     <p>通常设置该属性，所有元素的第一行都可以所经一个给定的长度，甚至该长度可以是负值。p>
    20. body>
    21.  
    22. html>

     3.6文本属性总结

    属性表示注意点
    color文本颜色通常用十六进制 例如：#fff
    text-align文本对齐设置水平对齐方式
    text-indent文本缩写首行缩进两个自的距离 例如：text-indent:200px;
    text-decoration文本修饰下划线underline  取下划线 none
    line-height行高控制行与行之间的距离

  • 相关阅读:
    本地部署Perplexity 克隆：使用Llama 3.1实现高效搜索
    substring 和 substr 的区别
    STC15单片机-通过EEPROM恢复PWM亮度
    4.Android应用架构指南：概览
    ArcGIS进阶：水源涵养功能分级评价操作
    IDEA 打开项目后看不到项目结构怎么办？
    【进阶篇】使用 Stream 流和 Lambda 组装复杂父子树形结构
    信息系统项目管理师考试重点汇总，看完这篇再拿十分！
    ECMAScript6(ES6)基础语法
    QPrinter、QPrinterInfo、QPageLayout
  • 原文地址：https://blog.csdn.net/weixin_68773927/article/details/127818935