CSS总结

最新推荐文章于 2024-10-12 09:53:06 发布

m0_52002756

最新推荐文章于 2024-10-12 09:53:06 发布

阅读量102

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/m0_52002756/article/details/115309743

版权

本文总结了CSS基础知识，包括定义、常用工具VScode、选择器、基本语法、HTML与CSS联动，以及Material Design Bootstrap在实践中的应用。重点介绍了ID和Class选择器，以及如何在HTML中引用CSS。

摘要由CSDN通过智能技术生成

CSS学习总结

CSS
一、什么是CSS？
二、使用工具
三、CSS的使用
最后的总结

CSS

通过最近一段时间对CSS语言的学习，有了自己的理解与看法，对此想对本次学习进行自己的总结。

一、什么是CSS？

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

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

二、使用工具

VS code

三、CSS的使用

1.创建CSS文件

在创建的一个项目文件下创建一个新文件，注意要用 .css

如下图：
在这里插入图片描述
接下来就可以在里面写内容了。

2.css选择器

id选择器：

#water{
  color: blue;
}

这是在css中的内容，要用到此样式可在html中这样：

<p id="water">蓝色的水</p>

id="water"便能用到指定样式。

class选择器：

.red{
  color: red;
}

这是在css中的内容，要用到此样式可在html中这样：

<p class="red">红色</p>

class="red"便能用到指定样式。
目前class用的比较广泛。

2.CSS基本语法

一条CSS样式规则由两个主要的部分构成：选择器，以{ }包裹的一条或多条声明，如h1标签:

h1{color: blue;font-size: 12px;}

详细：
h1 { color : blue font-size : 12px }

这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。
说明：

选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

3.HTML调用CSS里的内容

如当前的css文件和html在同一目录下：
在这里插入图片描述
HTML文件里的内容：

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

分析一下:头里的< link rel=“stylesheet” type=“text/css” href="./mycss.css">
有这句内容就能使用mycss文件中的样式了，相当是一个url.
此时css文件样式是这样：