CSS概述

努力学习javaee的小白选手

已于 2022-05-19 23:23:40 修改

阅读量634

点赞数

分类专栏： javaee 文章标签： css html css3

于 2022-05-19 23:21:30 首次发布

本文链接：https://blog.csdn.net/m0_50555031/article/details/124870618

版权

javaee 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、什么是CSS？

二、css和html属性的使用原则

三、CSS的基本结构：selector{property:value;}

四、使用CSS的优点

一、什么是CSS？

CSS 通常称为CSS样式或层叠样式表，又称之为网页的美容师，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。

二、css和html属性的使用原则

html的属性只对当前标签有效，没有可重用性，导致没有可维护性，css 具备一定的代码重用性，提高了可维护性，但是css没有把重用性做到极致。使用scss可以做到极致，W3C建议使用css替代html属性，如果css无法替代的属性，就使用html属性就可。

三、CSS的基本结构：selector{property:value;}

CSS的语法结构由两部分组成即：选择器和规则，规则也就是花括号中包含的内容。

选择符（selector）:主要是告诉浏览器这个样式是用于页面中的哪些对象的，这个对象可以是HTML中的某个标记，也可以是指定的Class或ID。

声明：声明主要是告诉浏览器怎样去渲染页面中的与选择符相匹配的对象。由属性与属性值组成，冒号相隔、分号结束的声明形式可以一个或者多个的组合而成。

属性：属性主要以一个单词的形式出现，并且都是CSS约定的，不可以自己定义。

属性值：属性值将根据属性改变形式，包括数值，单位等。

实例代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>示例</title> 
</head>
<body>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
</body>
</html>

运行结果：

四、使用CSS的优点

CSS节省大量时间：CSS为设置元素的样式属性提供了很大的灵活性。您可以编写一次CSS；然后可以将相同的代码应用于HTML元素组，也可以在多个HTML页面中重用。
易维护：CSS提供了一种简单的方法来更新文档的格式，并保持多个文档之间的一致性。因为可以使用一个或多个样式表轻松控制整个网页集的内容。
页面加载速度更快：CSS使多页能够共享格式信息，从而减少了文档结构内容的复杂性和重复性。它显着地减少了文件传输的大小，从而导致了更快的页面加载。
HTML的高级样式：CSS比HTML具有更广泛的表示能力，并且对网页的布局提供了更好的控制。因此，与HTML表示元素和属性相比，您可以更好地查看您的网页。
多设备兼容性：CSS还允许为多种设备或媒体优化网页。使用CSS，可以为不同的呈现设备(如桌面、手机等)以不同的查看样式表示相同的HTML文档。