CSS简单使用

文章目录

一. CSS基础知识

实训地址

1. 初识CSS：丰富多彩的网页样式

CSS(Cascading Style Sheets)即层叠样式表，它是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，目前由W3C定义和维护。

在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。

所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率。

基本的CSS语法如同积木一般，通过各种变换设计，构成了丰富多彩的网页世界。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
        body {
          background-color: teal;
        }
        h1 {
            color:white;
            font-size: 36px;
            text-align: center;
        }
    </style>
  </head>
  <body>
    <h1>CSS让网页样式更丰富</h1>
  </body>
</html>

预览大图

我们在HTML文档的<head>元素中，加入了<style>元素，设置其属性type为text/css，表示此处内容为CSS。

我们在此CSS代码中，指定了：

  • body背景颜色为蓝绿色(teal)；
  • h1标题的字体颜色为白色(white)，字体大小为36px并且在网页中居中对齐。

CSS语法主要包括两部分：选择器和声明。

选择器

选择器是什么呢？

选择器用于指定我们要修改的HTML元素。例如，在上述实例中，body和h1就是选择器。

选择器 {声明1}
声明

通过声明，我们定义要改变的元素样式。声明由属性和值构成，包含在花括号中，基本格式如下：

{属性: 值;}

在平时开发网站时，建议每个声明通常单独列为一行，有助于阅读。当网站发布时，可以使用工具压缩，将多行声明写在一行，使得CSS文件大小更小，加载速度更快。

例子：

 h1 {
            color:white;
            font-size: 36px;
            text-align: center;
       }

提示：

  • 语句最后的分号可以不写。如果多个声明写在一行，就必须书写。一般情况下，建议都书写。

2. CSS样式引入方式

样式引入方式

CSS样式有三种引入方式：

  1. 内部样式表：如同之前实例中所示，在文档头部中引入；
  2. 外部样式表：通过外部文件引入；
  3. 内联样式：直接在特定元素中引入。
(1). 内部样式表

首先，对于内部样式表，书写的方式是直接在HTML文件的头部，添加<style type="text/css"> </style>元素。

具体举例如下：

  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
       /*样式添加在这里*/
    </style>
  </head>
(2). 外部样式表

第二种方式，是将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的<head>中添加CSS文件链接。

  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    /* 引入外部的CSS文件 */
    <link rel="stylesheet" href="style.css" />
  </head>

属性rel的值stylesheet代表样式表，通常不变。href属性值，代表文件的位置。与图像路径的链接方式类似，href属性值的书写方式要根据具体的CSS文件位置。

例如，当HTML文件与要引入的CSS文件不在同一文件夹时：预览大图

书写如下:

<link rel="stylesheet" href="CSS/style.css" />

在实际的项目中，推荐将样式表统一放在CSS文件夹中，使得项目结构更清晰，资源管理更容易。

(3). 内联样式

内联样式是指直接在标签内添加样式属性。

举例如下：

<p style="color: Red; margin-left: 24px; font-size:20px;">内联样式CSS表格<p>

预览大图

通用的书写格式：

<tag style="样式表">
<tag style="样式表"></tag>
使用哪一种样式表？

在实际开发过程中，通常建议使用第二种外联样式表的方式。

主要优点如下：

  1. 内容与样式分离；

    易于开发和维护样式。

  2. 样式易于复用；

    可在多个HTML文件中引入相同的样式文件。

  3. 加载更快。

    如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取，而不再需要再一次访问服务器资源。

样式的优先级顺序

三种样式引入的优先级顺序是：

外部样式< 内部样式 < 内联样式

也就是说，如果同时有三种样式的方式作用于同一元素，会优先的使用内联样式。

二.CSS基础选择器

1. CSS 元素选择器

元素选择器

最常见和易理解的CSS选择器是元素选择器，又称为类型选择器。也就是将HTML文档中的元素，直接作为选择器使用。

例如对于HTML页面：

<body>
  <h1>标题1</h1>
  <h2>标题2</h2>
  <p>普通段落中<a href="#">删除的引用。</a></p>
</body>

使用元素选择器添加元素样式：

<style type="text/css">
    html {color:black;}
    h1 {color:darkcyan;}
    h2 {color:lightSeaGreen;}
    p {color:grey;}
    a {text-decoration:line-through;}
  </style>

预览大图

当我们指定一个元素，并设置样式属性之后，文档中该元素便会应用样式。例如，我们设置p元素的颜色为灰色(grey)，在没有其他样式覆盖的情况下，文档中所有的p元素都将为灰色。

组合元素选择器

如果想要多种元素应用同一样式，可以直接使用组合元素选择器。将多个要应用样式的元素用逗号隔开，例如：

<body>
    <h1>组合选择器</h1>
    <p>组合选择器，可以将样式同时运用于多个元素。</p>
</body>
</html>

使用元素选择器添加元素样式：

<style type="text/css">
/* 组合元素选择器 */
/*将`h1`、`p`元素的颜色同时设置为灰色*/
h1,p {color:grey;}
</style>

预览大图

注意：

  • 多个元素之间的逗号是必不可少的，如果缺失了逗号将表示其他含义。
元素选择器语法

我们可以看出元素选择器的语法规则如下：

/*单个元素选择器*/
元素{样式声明}

/*组合元素选择器*/
元素1，元素2 {样式声明}

2. CSS 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。

例如，对于HTML页面:

<body>
<div class="main">
  <article class="news">
    <h1>地震自救指南</h1>
    <p>大的晃动时间约为1分钟左右。这时首先应顾及的是您自己与家人的人身安全。首先，在重心较低、且结实牢固的桌子下面躲避，并紧紧抓牢桌子腿。在没有桌子等可供藏身的场合，无论如何，也要用坐垫等物保护好头部。</p>
  </article>
</div>
</body>

在该页面中，我们将第一个div元素的class设置为main，article元素的class值设置为news。通常设置class名字时，不要设置已有元素名，例如p、articel。

 <style type="text/css">
  .main {
    background-color: ivory;
    margin: 10px;
  }
  .news {
    padding: 10px;
    color: black;
    font-weight: bold;
  }
  p {
    color: grey;
  }
  </style>

与元素选择器不同，对同一类的元素应用样式，需要在类名前加上一个点号（.），然后书写相应的样式声明。

效果图

预览大图

类选择器语法

所以，我们可以看出，类选择器的语法规则如下：

  1. 首先，将html中想要应用类样式的元素，指定类名；

    <元素名 class="指定的类名"></元素名>
<元素名 class="指定的类名">

  2. 然后，书写相应类的样式；

    .指定的类名 {样式声明}

3. id选择器

id选择器与类选择器类似，但在使用上有不同。

使用类选择器时，指定一个元素属于某类，使用的是关键字class，例如:

<body>
  <h1 class="important">温馨提示</h1>
  <p>少一串脚印，多一份绿意。</p>
</body>

而在使用id选择器时，使用的是关键字id。对于上面类选择器的例子，用id选择器书写：

<body>
  <h1 id="important">温馨提示</h1>
  <p>少一串脚印，多一份绿意。</p>
</body>

在样式表中，指定对应id名元素的样式，使用#符号，也称为棋盘号或井号。

#important {
    color: red;
    font-weight: bold;
}
id选择器语法

同理，我们可以看出，id选择器的语法规则如下：

  1. 首先，将html中想要应用类样式的元素，指定id名。

    <元素名 id="指定的类名"></元素名>
<元素名 id="指定的类名">

  2. 然后，书写相应类的样式。

    #指定的类名 {样式声明}
类选择器与id选择器的区别

类选择器与id选择器类似，那么它们的区别是什么呢？什么情况下应该使用哪一种选择器呢？

它们最大的区别在于，在一个 HTML 文档中，可以为任意多个元素指定类，但id选择器只能使用一次，一个id只能运用于一个元素。

一般情况下，都推荐使用类选择器。而在一些特定情况下，我们才会建议使用id选择器。例如，通过id选择器在页面中定义锚，在编写 JavaScript 为指定的页面元素应用特殊行为时。

三. 文本与字体样式

1. 字体颜色、类型与大小

相关知识

一般而言，用于文本的CSS属性可以分为如下两类：

  • 字体样式：用于字体的属性，包含字体类型、大小、粗细等；
  • 文本布局风格：用于设置文本的间距以及其他布局功能的属性，包含设置字与字之间的空间，文本如何对齐等等。
| 字体颜色 color

字体最直观的属性之一即前景内容的颜色，我们通过 color 属性指定字体的颜色。

 .main {color:lightslategray}
| 字体类型 font-family

如同印刷世界，网页中的字体类型也是丰富多样的，我们可以使用font-family 属性定义文本的字体系列。

字体系列

CSS中， 有两种类型的字体系列：

  • 通用字体系列 - 有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）；
  • 特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）。

通过设置HTML表格中不同格的字体属性，页面表格直观展示了字体类型：

表格HTML：

<body>
  <table>
    <thead>
      <tr>
        <th>通用字体系列</th>
        <th>字体系列</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan=2>Serif</td>
        <td class="times">This is Times New Roman font.</td>
        <td class="times">Serif字体中字符在行的末端拥有额外的装饰</td>
      </tr>
      <tr>
        <td class="georgia">This is Georgia font.</td>
        <td class="georgia">Serif字体中字符在行的末端拥有额外的装饰</td>
      </tr>
      <tr class="arial">
        <td>Sans-serif</td>
        <td>Arial Verdana</td>
        <td>Sans字体在末端没有额外的装饰</td>
      </tr>
      <tr>
        <td rowspan=2>Monospace</td>
        <td class="courier">This is Courier New font.</td>
        <td class="courier">所有的等宽字符具有相同的宽度</td>
      </tr>
      <tr>
        <td class="lucida">This is Lucida Console font.</td>
        <td class="lucida">所有的等宽字符具有相同的宽度</td>
      </tr>
    </tbody>
  </table>

使用CSS设置字体属性：

.times {
  font-family: "Times New Roman";
}
.georgia {
  font-family: "Georgia";
}
.arial {
  font-family: "Arial";
}
.courier {
  font-family: "Courier New";
}
.lucida {
  font-family: "Lucida Console";
}

不同类型字体的效果如下：预览大图

字体栈

在指定不同的字体类型时，通常情况下无法保证你想在你的网页上使用的字体都是可用的。所以，我们使用字体栈 (font stack)给浏览器提供多种选择。例如：

{	
	font-family:PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; 
}

使用字体栈时，浏览器从列表的第一个开始检查，该字体在当前计算机浏览器中是否可用。如果可用，就应用该字体。如果不可用，它就移到列表中的下一个字体，然后再检查。指定的字体都不可用时，便会使用浏览器的默认字体。

| 字体大小 font-size

在CSS中，我们通过 font-size 属性设置文本的大小。通常文字的大小应该协调一致。

设置方式

我们可以使用绝对和相对两种方式设置字体的大小，两种设置不同在于：

  • 绝对大小：
    • 将文本设置为指定的字体大小；
    • 用户不能在不同的浏览器中改变文本大小；
    • 绝对大小在确定用户设备大小时很有用。
  • 相对大小：
    • 相对于周围的元素来设置大小；
    • 允许用户在不同的浏览器中改变文本大小。
常用单位

设置字体大小时，会使用到不同的单位。下面，我们来了解几种设置字体的常用单位。

1. 像素px

像素即px ，将像素赋值给文本大小。它是一个绝对单位，所以在不同大小设备上，页面上的文本所计算出来的像素值都是一样的。

2. em

em的方式可以解决在部分Internet Explorer 中无法调整文本。

浏览器中默认的文字大小是16 px，1 em代表与当前字体大小相等。em 单位与像素转换公式为：

px/16=em 这个公式中px是像素大小，em也是大小，像素/16=em 单位关系为:1em = 16px

h1 {
    font-size:2.5em;  /* 40px/16=2.5em */
}
h2 {
    font-size:1.875em; /* 30px/16=1.875em */
} 
p {
    font-size:1.125em; /* 18px/16=1.125em */
}
3. 百分比结合em

为body元素设置默认大小时，可以使用百分百，同样是相对于16px：

body {
    font-size:100%;
}

2. 字体粗细与风格

字体粗细 font-weight

我们使用font-weight属性设置文本的粗细。印刷世界中，根据内容的需要会设置不同的字体粗细，同样的在网页中也要更具内容设置。

font-weight设置的数值在100~900之间，分为9级加粗度。有些字体会内置加粗的级别。例如100 对应最细的字体，900 对应最粗的字体； 400对应normal·，而 700 则等价于 bold。

另外，设置值为lighter, bolder代表将当前元素的粗体设置为比其父元素粗体更细或更粗一步。

 font-weight: 400;
字体风格 font-style

我们在设置斜体文本时使用 font-style 属性。

它属性有三个值：

  • normal - 文本正常显示；
  • italic - 文本斜体显示；
  • oblique - 文本倾斜显示。

提示：

  • 在使用时选择normal的情况很好判断，但是如何在italic和oblique中进行选择呢？

    其实，一般情况下，italic 和 oblique 文本在网页中看起来完全一样。斜体（italic）是一种简单的字体风格。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

3. 文本装饰与文本布局

文本装饰 text-decoration

我们使用text-decoration设置字体上的文本装饰。

其可用值有：

  • none: 取消已经存在的任何文本装饰；
  • underline: 文本下划线；
  • overline: 文本上划线；
  • line-through: 贯穿文本的线；
  • blink：闪烁文本。

使用时，可以根据需求，同时添加多个装饰值。

文本布局

接下来，我们来看用来影响文本布局的属性。

文本对齐 text-align

我们使用text-align来改变一个元素中的文本行互相之间的对齐方式。

其可用值有：

  • left: 左对齐文本；
  • right: 右对齐文本；
  • center: 居中文字；
  • justify: 水平对齐，改变单词之间的差距，使所有文本行的宽度相同。

不同的语言中默认的对齐方式不同，大部分西方语言都是从左向右读，text-align 的默认值是 left。而对于希伯来语和阿拉伯语之类的的语言，阅读时从右向左读，text-align 则默认为 right。

行高 line-height

我们使用line-height 属性来设置行高。

注意：行高属性值不能为负。

其可用值有：

  • normal：默认。设置合理的行间距；
  • number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距；
  • length：设置固定的行间距；
  • %：基于当前字体尺寸的百分比行间距；
  • inherit：从父元素继承 line-height 属性的值。
字符间距和字间距 letter-spacing word-spacing

letter-spacing 属性用于控制字符间的间隔多少；

其可用值有：

  • normal：默认值，字符间没有额外的间隔；
  • length：定义字符间的固定间隔（可以为负值）；
  • inherit：从父元素继承 letter-spacing 属性的值。

同样的，word-spacing 属性用于控制字与字的间隔多少。

其可用值有：

  • normal：默认；
  • length：定义字之间的固定间隔；
  • inherit：从父元素继承 word-spacing 属性的值。

四. 背景样式

1. 背景色

我们可以使用background-color为元素设置背景色，通常属性值为颜色名称或颜色编码。 因为HTML文档中body元素包含了HTML文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置body元素的background-color属性。

body {
       background-color: lightyellow;
    }

2. 背景图片

设置背景图片

我们可以使用background-image属性设置元素的背景属性，常见的网页背景图就是这样设置的。其中，属性值通过url指定图片链接。

书写格式：background-image: url("图片链接")

平铺背景图像

指定了背景图像之后，默认背景图是平铺重复显示。如果想要设置图像在水平方向、垂直方向平铺或其他方式，可以设置background-repeat属性。

具体属性值设置如下：

样式属性值
水平平铺重复repeat-x
垂直平铺重复repeat-y
不重复平铺no-repeat

  1. 默认平铺

     body {
     /*设置背景图片*/
     background-image:url("./Assert/sun.jpg");
 }

  2. repeat-x

     body {
     /*设置背景图片*/
     background-image:url("./Assert/sun.jpg");
     background-repeat: repeat-x;
 }
    预览大图

  3. repeat-y

     body {
     /*设置背景图片*/
     background-image:url("./Assert/sun.jpg");
     background-repeat: repeat-y;
 }

  4. no-repeat

     body {
     /*设置背景图片*/
     background-image:url("./Assert/sun.jpg"); 
     background-repeat: no-repeat;
 }
    预览大图

    3. 背景定位与背景关联

    背景定位

    当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用background-position属性改变图像在背景中的位置:

    body {
    /*设置背景图片*/
    background-image: url("https://www.educoder.net/attachments/download/211104");
 background-repeat: no-repeat;
    background-position: right top;
}

    预览大图

对于具体位置，大家可以使用如下关键字的组合：

属性值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果值定义了一个关键词，那么第二个值将是"center"。当然也可以使用百分比和长度值，现在只作为了解。

背景关联

当页面较长时，滚动页面，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用background-attachment属性，将其值设置为fixed。

body {
    background-image: url("https://www.educoder.net/attachments/download/211104");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
简写背景

从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。

body {
    background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
}

使用简写属性时，属性值的顺序为：

  • background-color；
  • background-image；
  • background-repeat；
  • background-attachment；
  • background-position。

以上属性无需全部使用，大家可以按照页面设置使用。

五. 表格边框

1. 表格边框

表格边框

我们使用 border 属性为表格添加边框，这样HTML表格才会看起来更符合我们平时使用的表格。border属性值可以按顺序设置的属性为：border-width、border-style和border-color。一般情况下会省略属性名，直接设置属性值。其中，border-style可以取如下四种值：

  • dotted: 点状；
  • solid: 实线；
  • double: 双线；
  • dashed: 虚线。
折叠边框

但是，这样设置的通讯录表格有双边框。这是因为表格与th/td元素都有独立的边界。 所以，我们可以使用 border-collapse 属性设置折叠边框。折叠边框代表边框是否被折叠为一个单一的边框或相互隔开。

table {
    border-collapse: collapse; /*设置折叠边框*/
}
th,
td {
    padding: .5em .75em;
    border: 1px solid black; /*设置边框1px粗的黑色实线*/
}

2. 表格颜色、文字与大小

表格颜色

表格颜色设置十分简便，与设置文字颜色的方式相同。在对应的表格元素标签中，使用color属性设置表格中的文字颜色，使用background属性可以设置表格元素的背景色。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>HTML – 简单表格</title>
</head>
<body>
    <table width="400">
        <caption>运动会跑步成绩</caption>
        <thead>
         <!-- 表格头部 -->
            <tr>
                <th scope="col">长度</th>
                <th scope="col">李雯</th>
                <th scope="col">王谦</th>
                <th scope="col">周佳</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th scope="row">100米</th>
                <td>14s</td>
                <td>16s</td>
                <td>13s</td>
            </tr>
            <tr>
                <th scope="row">200米</th>
                <td>26s</td>
                <td>23s</td>
                <td>25s</td>
            </tr>
            <tr>
                <th scope="row">400米</th>
                <td>70s</td>
                <td>73s</td>
                <td>69s</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th scope="row">总用时</th>
                <td>110s</td>
                <td>112s</td>
                <td>107s</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

我们设置其CSS样式如下：

table {
    border-collapse: collapse;
}
th,
td {
    border: 2px solid black;
}
th
{
    background-color:lightblue;  /*表格头部背景颜色*/
    color:white;                         /*表格头部字体颜色*/
}

预览大图

表格文字对齐与文字粗细

表格单元格默认为左对齐。在实际情况中，我们可以根据需求设置表格对齐方式。设置表格中文字对齐的方式，与设置段落文字对齐的方式相同，都是使用text-align属性。 同样的，设置表格文字粗细与设置段落文字粗细相同，都是使用font-weight属性。

table {
    border-collapse: collapse;
}
caption {
    font-weight: bold;                /*表格标题文字加粗*/
}
th,
td {
    border: 2px solid black;
}
th {   
    text-align: center;                /*表格头部居中对齐*/
    background-color:lightblue;  /*表格头部背景颜色*/
    color:white;                         /*表格头部字体颜色*/
}
td {
    text-align: right;                   /*表格主体右对齐*/
}
tfoot {
    font-weight: bold;               /*表格尾部文字加粗*/
}

预览大图

表格宽度和高度

在表格元素中使用width和height属性设置表格的宽度与高度。

其中表格宽度设置为98%，如图我们之前在CSS课程中所学，表格宽度始终保持页面的98%大小：

lor:lightblue; /表格头部背景颜色/
color:white; /表格头部字体颜色/
}


[外链图片转存中...(img-nBQnTY5d-1636633433161)]

##### 表格文字对齐与文字粗细

表格单元格默认为左对齐。在实际情况中，我们可以根据需求设置表格对齐方式。设置表格中文字对齐的方式，与设置段落文字对齐的方式相同，都是使用`text-align`属性。  同样的，设置表格文字粗细与设置段落文字粗细相同，都是使用`font-weight`属性。

```css
table {
    border-collapse: collapse;
}
caption {
    font-weight: bold;                /*表格标题文字加粗*/
}
th,
td {
    border: 2px solid black;
}
th {   
    text-align: center;                /*表格头部居中对齐*/
    background-color:lightblue;  /*表格头部背景颜色*/
    color:white;                         /*表格头部字体颜色*/
}
td {
    text-align: right;                   /*表格主体右对齐*/
}
tfoot {
    font-weight: bold;               /*表格尾部文字加粗*/
}

[外链图片转存中…(img-Sk9XTDND-1636633433162)]

表格宽度和高度

在表格元素中使用width和height属性设置表格的宽度与高度。

其中表格宽度设置为98%，如图我们之前在CSS课程中所学，表格宽度始终保持页面的98%大小：

预览大图

posted @ 2022-04-26 21:10  墨镜一戴谁也不爱  阅读(145)  评论(0)    收藏  举报