从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。
概述
简单来说,层叠样式表(Cascading Style Sheet)是一种专门用来控制界面外观风格的文档。 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
CSS的使用方式
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
</head>
<body>
<p style="font-size: 16px; color: red;">大家好</p>
</body>
</html>
行内样式需要写到标签的 style 属性值中。
这种形式多用于测试,可维护性较差
内部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
<style>
p {
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<p>Hello everyone</p>
</body>
</html>
内部样式需要写到 <style> 标签中。
通过这种形式定义的样式只在本页面内生效
外部样式表
将样式写到单独的文件中,文件的扩展名为 .css
然后通过 <link> 元素将 index.css 文件引入到页面中:
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<p>hello world</p>
</body>
</html>
发中主要是通过这种形式定义样式
基本语法
CSS 样式由一系列的规则集组成,规则集中有一条或多条样式声明。