CSS的认识和应用

最新推荐文章于 2023-07-17 15:08:38 发布

mistake11a

最新推荐文章于 2023-07-17 15:08:38 发布

阅读量209

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/mistake11a/article/details/115144665

版权

CSS的认识和应用

一.何为CSS
二.CSS的应用
三.CSS 如何生效
四.尺寸
五.总结

一.何为CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

通俗来说CSS就为HTML的装修工

二.CSS的应用

HTML中如果没有CSS的美化就全是一些干瘪瘪的文字，CSS就会使他变得更加精致

可以把HTML看成一个没有酱料包的方便面面饼
把CSS看成酱料包，HTML作为面饼放上不同的酱料包就会不同的味道，使用不同的CSS规定，网页的内容就将独一无二。

在这里插入图片描述
比如如上图所示，我们可以定义标题h1，h1在HTML中仅仅定义了它是一号标题，系统给出了他的大小，但是我们要改变它颜色等一些性质就可以通过CSS中对h1再定义。

在CSS文件中定义color：
在这里插入图片描述
这里我把h1标题颜色定义为绿色了。

三.CSS 如何生效

<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>

href就是指我的css类型文件存放的位置，在当前目录下mycss.css。

四.尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
新建如下 HTML 文件：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>
  </body>
</html>

再建对应的 CSS 文件如下：

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
  height: 100px;
  width: 500px;
  background-color: rgb(73, 138, 60);
  text-align: right;
}