CSS基础——CSS应用、CSS语法、CSS选择器

最新推荐文章于 2024-05-20 09:44:50 发布

吃不到棒棒糖的小熊

最新推荐文章于 2024-05-20 09:44:50 发布

阅读量235

点赞数 5

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/m0_59897687/article/details/120710810

版权

一、什么是CSS

如果将HTML比作毛坯房的话，那么CSS就是房子的装修了。CSS是用来指定文档如何展示给用户的一门语言。展示一份文档给用户实际上是将文档变成用户可用的文件，可以将文档在电脑屏幕、投影仪、打印机等设备上展示

Q：什么是文档？

A：一份文档是文本文件，而这份文本文件是由标记语言组织起来的；HTML就是最常见的标记语言

所以具体来说CSS可以做些什么呢？

举几个例子，

<1>CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。

<2>CSS也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。

<3>CSS甚至还可以用来做一些特效，比如动画。

注意：与HTML中的注释不同，CSS中的注释为 /* */

/*这里是CSS中的注释，注释中的内容会自动被浏览器所忽略*/

二、在HTML里应用CSS

1.外部样式表

外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML的<link> 元素标签引用它

这是一个CSS文件：

        h1{
            color: aqua;
            background-color: black;
            border: 2px solid green;
        }
        p{
            color: brown;
            font-size: 20px;
        }

这是在HTML文件当中引用CSS文件：

注：<link>元素中的href属性需要引用文件系统中的一个文件

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <!--在这里引用CSS文件-->
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <h1>Look!</h1>
    <p>This is a CSS example</p>
  </body>

</html>

2.内部样式表

内部样式表与外部样式表不同的是，内部样式表不使用外部CSS文件，而是把CSS放在HTML文件的<head>标签中的<style>标签当中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: aqua;
            background-color: black;
            border: 2px solid green;
        }
        p{
            color: brown;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <h1>Tomorrow is Monday</h1>
    <p>Today is Sunday</p>

</body>
</html>

内部样式表与外部样式表比起来更加低效，是因为在一个站点里，需要在每个页面重复的添加相同的CSS，如果需要修改CSS的话，则需要在每个页面文件中都修改一遍

3.内联样式

内联样式表存在于HTML元素的style属性之中。

其特点是每个CSS表只影响一个元素！

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content

最低0.47元/天解锁文章

吃不到棒棒糖的小熊

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础——CSS应用、CSS语法、CSS选择器

一、什么是CSS
复制链接

扫一扫

专栏目录

CSS基础——CSS应用、CSS语法、CSS选择器

一、什么是CSS

二、在HTML里应用CSS

1.外部样式表

2.内部样式表

3.内联样式

“相关推荐”对你有帮助么？