css（0）引入方式

最新推荐文章于 2024-05-31 14:44:29 发布

买代码v 18327244279

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量165

点赞数

分类专栏： Web 文章标签： css

本文链接：https://blog.csdn.net/zcy_inspire/article/details/106962031

版权

Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

初识CSS

CSS(Cascading Style Sheets)即层叠样式表，它是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，目前由W3C定义和维护。
在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。
所以，HTML 与 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基础语法

CSS语法主要包括两部分：选择器和声明。
选择器用于指定我们要修改的HTML元素,在上述实例中，body和h1就是选择器。
选择器 {声明1}
通过声明，我们定义要改变的元素样式。声明由属性和值构成，包含在花括号中，基本格式如下：
{属性: 值;}

CSS样式引入方式

CSS样式有三种引入方式：

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

内部样式表

直接在HTML文件的头部，添加<style type=“text/css”></style>元素。

<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
       /*样式添加在这里*/
    </style>
  </head>

外部样式表

将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的中添加CSS文件链接。

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

属性rel的值stylesheet代表样式表，通常不变。href属性值，代表文件的位置，href属性值的书写方式要根据具体的CSS文件位置。
在实际的项目中，推荐将样式表统一放在CSS文件夹中，使得项目结构更清晰，资源管理更容易。

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

主要优点如下：

内容与样式分离；
易于开发和维护样式。
样式易于复用；
可在多个HTML文件中引入相同的样式文件。
加载更快。
如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取，而不再需要再一次访问服务器资源。

内联样式

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

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

样式的优先级顺序

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

买代码v 18327244279

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css（0）引入方式

初识CSSCSS(Cascading Style Sheets)即层叠样式表，它是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，目前由W3C定义和维护。在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率一个简单的实例<!DOCTYPE html><html> <head> <meta ch
复制链接

扫一扫