HTML使用CSS的方法详解

学习&实践爱好者

已于 2022-09-23 17:07:45 修改

阅读量1.2w

点赞数 10

分类专栏： HTML5与CSS3 前端开发文章标签： css html 前端

于 2022-01-10 20:20:53 首次发布

本文链接： https://blog.csdn.net/cnds123/article/details/122409522

版权

HTML5与CSS3 同时被 2 个专栏收录

82 篇文章 15 订阅

订阅专栏

前端开发

69 篇文章 4 订阅

订阅专栏

HTML使用CSS的方法详解

在尝试学习 CSS 之前，您应该了解 HTML 的基础知识，或者同时学习 HTML 和 CSS。

html是超文本编辑语言，是用来定义页面结构的，html有很多图文或者视频组成，而css是层叠样式表，来定义html内容的样式，例如html的图片大小，图文排版，都是可以利用css去实现的。顺便提及，在html中，注释的格式是 ，而在css中，注释的格式是 /*注释内容*/ 。

html和css的关系，简单地说，HTML是用来标记内容的，重在内容组织上；CSS是用来修饰内容样式的，重在内容样式美化展示上。

CSS和HTML的结合可以完成许多令新手意料不到的功能，在此，给出一个HTML + CSS实现的动画：

实现此功能由两个文件组成，我这里为方便将这两个文件放在同一个文件夹中：

一个html文件，文件名为：旋转的太极图A.html，源码如下：

<!DOCTYPE html>
<html>
<head>
<title>旋转的太极图</title>
<link href="mystyle.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<div  class="container">
    <div class="shape"></div>
</div>    
</body>
</html>

一个css文件，文件名为：mystyle.css，源码如下：

  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .shape
  {
    width: 192px;
    height: 96px;
    background: #fff;
    border-color: #000;
    border-style: solid;
    border-width: 4px 4px 100px 4px;
    border-radius: 50%;
    position: relative;
    animation:rotate 2s linear infinite;
  }
  .shape:before
  {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #fff;
    border: 36px solid #000;
    border-radius: 50%;
    width: 24px;
    height: 24px;
  }
  .shape:after 
  {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000;
    border: 36px solid #fff;
    border-radius:50%;
    width: 24px;
    height: 24px;
   } 
   @keyframes rotate
   {
      0%   { transform: rotate(0deg); }
      100% { transform:rotate(360deg); }
   }

用浏览器打开文件旋转的太极图A.html，即可见到效果如前面的图。

HTML (Hyper Text Markup Language ,超文本标记语言） 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容，如：文字如何排版，图片如何显示等。

CSS（Cascading Style Sheets，层叠样式表） 是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS（层叠样式表） | MDN

CSS中有一个重要概念选择器

CSS中，选择器用来指定网页上我们想要样式化的HTML元素。

要使用css对html页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

有了选择器就可以把你想要的那个元素选中方式，这个元素添加CSS样式。

语法规则：

通俗地说

CSS由多组“规则”组成。每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：

选择器（Selector）：多个选择器可以半角逗号（,）隔开，用于指出网页中要应用样式规则的元素。

属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。

值（value）：指属性接受的设置值，多个关键字时大都以空格隔开。

英文花括号“｛｝”中的内容就是声明，它由一个属性和一个值组成，属性和值之间用半角冒号（:）隔开，属性和值合称为“特性”。多个特性间用“;”隔开，最后用“{ }”括起来。

浏览器根据“选择器”决定受 css 样式影响的 HTML 元素（标签）。选择器的属性和值被胃号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如： p { color : blue }

多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开，最后一条声明的最后可以不加分号（建议加上分号）。例如：

p{ width: 100px;

height: 100px;

background-color: red;

}

css选择器的种类是有很多的，如

ID选择器（如：id="name",id="name_txt"）。

类选择器（如：class="head",class="head_logo"）。

【注：id属性具有唯一性，也就是说在一个页面中相同的id只能出现一次。与id属性具有唯一性不同，可以为同一个页面的相同元素或者不同元素设置相同的class。】

标签选择器（如：body,div,p,ul,li）。

等等，可参见 CSS选择器介绍_软件开发技术爱好者的博客-CSDN博客

HTML使用CSS的方法，即怎样将css引入到html文件？

html结构和css样式既然是分离的，需要想办法将他们结合到一起，那么怎样将两者结合到一起呢？

☆ 行内式（行内样式）

行内样式与内部样式类似，也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别：内部样式的CSS是在“style标签”内定义的，而行内样式的CSS是在“标签的style属性”中定义的。

将css属性名和属性值通过标签的style属性直接写在html标签中的形式，就是行内样式。例如

下面给出一个完整而简单的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css示例(行内)</title>
    </head>  
    <body>
        <h1 style="color: red; margin-left: 40px">css示例</h1>
        <p style="color: blue;">行内样式表</p>
    </body>
</html>

保存文件名：css行内使用例子.html

运行效果：

☆ 内嵌式（嵌入式、内部样式）

使用style标签将css属性名和属性值引入到html页面中，通常style标签放置在head标签中。

style标签语法：

<style>

……

</style>

例如：

<style>

p{ width: 100px; height: 100px; background-color: red; }

</style>

下面给出一个完整而简单的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css示例(内嵌)</title>
        <style>
            p {
                color: blue;
            }
            h1 {
                color: red;
                margin-left: 40px;
            }
        </style>
    </head>  
    <body>
        <h1>css示例</h1>
        <p>内嵌样式表</p>
    </body>
</html>

保存文件名：css内嵌使用例子.html

运行效果：

☆ 外部样式（外链式）

要创建一个css文件，css文件其的后缀.css，假设保存在css文件夹，文件名为style.css，

再在html文件中引入

通过link标签，将一个单独的css文件引入到这个html文件中，此句通常放置在head标签中。

其中，rel即relative的缩写，它的取值是固定的，即stylesheet，表示引入的是一个样式表文件（即CSS文件）。

href属性表示CSS文件名及路径。

下面给出一个完整而简单的例子

html文件和css文件是分离的

html文件内容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css示例(外链)</title>
        <link href="style.css" rel = "stylesheet" />
    </head>  
    <body>
        <h1>css示例</h1>
        <p>外链（外部）样式表</p>
    </body>
</html>

css文件——文件名为style.css，内容如下：

p {
    color: blue;
}
h1 {
    color: red;
    margin-left: 40px;
}

保存文件名：css外链使用例子.html

运行效果：

☆ 导入式（@import方式）

通过@import引用外部css文件，但需要写入css文件或style标签中。@import语法：

@import url("css/mystyle.css ");

或

@import "css/mystyle.css";

link和@import虽然都是引入外部的css文件，但是他们是有区别的。

link是html标签，@import完全是css提供的方式。

下面给出一个完整而简单的例子

html文件和css文件是分离的

html文件内容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css示例(导入)</title>
        <style>
            @import url("style.css");
        </style>
    </head>  
    <body>
        <h1>css示例</h1>
        <p>导入（外部）样式表</p>
    </body>
</html>

css文件使用前面的style.css。

保存文件名：css导入使用例子.html

运行效果：