CSS2.0层叠样式表——CSS概述

来聊前端

已于 2023-07-27 18:33:15 修改

阅读量295

点赞数

文章标签： css

于 2023-07-27 18:31:22 首次发布

本文链接：https://blog.csdn.net/qq_36893834/article/details/131966264

版权

CSS层叠样式表

CSS是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮。让页面布局更简单。

CSS概述

学习目标

在这里插入图片描述

CSS概述

CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0，2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。

在这里插入图片描述

CSS的优点

能够使代码精简，使用div+css布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，避免了使用table表格修改部分页面。
提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。
有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
浏览器兼容性。DIV+CSS更兼容多种浏览器，主要原因是不同的浏览器对web标准默认值不同。
需要注意的是，网页不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。

CSS 语法规范

使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color:red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>css层叠样式表</h1>
</body>
</html>

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color:red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>css层叠样式表</h1>
</body>
</html>

CSS 代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式。

1.样式格式书写

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

2.样式大小写

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

CSS的使用方法

内联式Inline（也叫行内样式）

<p style="color:blue;">在HTML中如何使用css样式</p>

style 其实就是标签的属性。
在双引号中间，写法要符合 CSS 规范。
可以控制当前的标签设置样式。
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。
使用行内样式表设定 CSS，通常也被称为行内式引入。

嵌入式（也叫内页样式）

<style type="text/css">
	p {
		width:100px;
		height:100px;
		background:red;
	}
</style>

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。
通过此种方式，可以方便控制当前整个页面中的元素样式设置。
代码结构清晰，但是并没有实现结构与样式完全分离。
使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。

外联式（也叫外部样式）：

实际开发都是外部样式表，适合于样式比较多的情况核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。

引入外部样式表分为两步：

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
在 HTML 页面中，使用<link> 标签引入这个文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="文件名.css" type="text/css" />
</head>
<body>
    <h1>css层叠样式表</h1>
</body>
</html>

属性	含义
rel	定义当前文档与链接文档之间的关系，stylesheet，表示被链接的文档是一个样式表。
href	样式表的路径地址
type	样式表的文件类型是css类型

CSS的注释

注释是用来解释你的代码。

/*这是个注释*/
p {
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

课程总结

在这里插入图片描述

来聊前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS2.0层叠样式表——CSS概述

CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0，2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。
复制链接

扫一扫