您的位置:首页 > Web前端 > CSS

如何创建 CSS

2019-11-09 23:41 1811 查看

如何插入样式表?

  • CSS
    代码应该写到什么地方呢?
  • CSS
    代码分为三种插入方式,接下来笔者给园友们介绍有哪些插入方式:
  • 嵌入式、外链式、行内式。

嵌入式

什么是嵌入式?

  • 嵌入式就是将写好的
    CSS
    代码嵌入到
    HTML
    文件中,嵌入式是通过
    HTML
    中的
    style
    标签将
    CSS
    代码嵌入到
    HTML
    网页当中的。
  • 语法规则如下:

选择器{属性:值;属性:值;}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>嵌入式</title>
<style type="text/css">
/*书写CSS代码块的地方*/
选择器{属性:值;属性:值;}
</style>
</head>
<body>

</body>
</html>
  • 如果我们使用的是
    HTML5
    的文档,
    style
    标签中的
    type
    属性可以省略掉。
  • 注意:

    stype
    标签它可以出现
    HTML
    中的任何地方,但是我们一般会将它放置在
    head
    标签中。

嵌入式实例

  • 接下来让我们进入嵌入式实践,实例内容如下:将
    div
    宽高度设置为
    300
    像素和
    div
    的边框颜色设置为红色,以及
    div
    中的
    h1
    标签字体颜色设置为红色。
  • 代码块

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>嵌入式</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border:3px solid red;
}
h1{
color: red;
}
</style>
</head>

<body>
<div>
<h1>微笑是最初的信仰</h1>
</div>
</body>
</html>
  • 结果图

外链式

什么是外链式?

  • 外链式是指书写一个存放
    CSS
    代码的文件,文件的扩展名为
    .CSS
    。然后将其文件放在
    HTML
    文件中的
    head
    标签中并且以
    link
    标签形式存放在
    HTML
    文件当中。
  • 现在我们创建一个名称为

    index.css
    的文件。

  • 大家点击是就OK了
  • 实践效果为:

  • 注意:

    CSS
    文件不能单独的运行,它必须依赖于
    HTML
    文件。

  • 语法规则如下:
<link rel="stylesheet" href="index.css">
  • link
    标签中的
    rel="stylesheet"
    属性,表示以样式表的关系引入到
    HTML
    文件当中。
  • link
    标签中的
    href
    属性,表示要引入的
    CSS
    文件路径,输入我们要使用的
    CSS
    文件路径,可以使用相对路径和绝对路径。

外链式实例

  • 接下来让我们进入外链式实践,笔者将刚才创建好的

    index.css
    文件引入到
    HTML
    文件当中,并且实现以下功能:将
    div
    宽高度设置为
    300
    像素和
    div
    的边框颜色设置为红色,以及
    div
    中的
    h1
    标签字体颜色设置为红色。

  • CSS
    代码块
div {
width: 300px;
height: 300px;
border: 3px solid red;
}

h1 {
color: red;
}
  • 注意:在这个

    index.css
    文件中只能编写
    CSS
    代码,如:选择器{属性:值;}这样的形式。

  • 一个

    HTML
    页面中同时可以引入多个单独的
    CSS
    文件,以
    link
    标签的形式引入。

  • HTML
    代码块
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外链式</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
<div>
<h1>微笑是最初的信仰</h1>
</div>
</body>
</html>
  • 结果图

行内式

什么是行内式?

  • 将CSS代码写在HTML标签的style属性当中。
  • style是一个通用的属性,每一个标签都拥有这个属性。
  • 语法规则如下:
  • 单个属性的用法
<标签名 style="属性:值;"></标签名>
  • 多个属性的用法
<标签名 style="属性:值;属性:值;....."></标签名>
  • 接下来让我们进入行内式实践,并且实现以下功能:将
    div
    宽高度设置为
    300
    像素和
    div
    的边框颜色设置为红色,以及
    div
    中的
    h1
    标签字体颜色设置为红色。
  • 代码块
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内式</title>
</head>

<body>
<div style="width: 300px;height: 300px; border: 3px solid red;">
<h1 style="color: red;">微笑是最初的信仰</h1>
</div>
</body>
</html>
  • 结果图

总结

  • 使用嵌入式和行内式的方式,它只能作用于当前的
    HTML
    页面当中。
  • 使用外链式的方式,它可以作用于多个
    HTML
    页面当中。
  • 笔者推荐使用外链式的方式编写
    CSS
    代码。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: