这是我参与「第四届青训营」笔记创作活动的第2天

CSS简介

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

用来定义页面元素的样式

字体的颜色
位置和大小
动画效果

h1 { color:white; font-size:14px; }

一个选择器和一个大括号称作一条规则。
CSS由多个样式规则组成。
大括号中含有一条或多条声明。
每条声明由一个属性和一个值组成。

CSS注释

注释以 /* 开始, 以 */ 结束

选择器

通配选择器（匹配所有）

*{ color:red; }

标签选择器（用标签设置样式）

h1{ color:red; }

id选择器（要唯一）

<html>
<head>
<meta charset="utf-8"> 
<title>试运行</title> 
<style>
#para1
{
	text-align:center;
	color:blue;
} 
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>该段落不受影响</p>
</body>
</html>

类选择器

<html>
<head>
<meta charset="utf-8"> 
<style>
.center {
	text-align:center;
}
.color {
	color:#ff0000;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色。</p> 
</body>
</html>

属性选择器

<input value="zhao" disabled/>
<label>密码：</label>
<input value="123456" type="password">
<style>
    [disabled]{
         color:#999;
         background:#eee;
      }
    input[type="password"]{
    
    }
<style/>

CSS的多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。如外部样式定义：

h3 { color:red; text-align:left; font-size:8pt; }

内部样式定义：

h3 { text-align:right; font-size:20pt; }

则最终呈现为：

h3{color:red; text-align:right; font-size:20pt;}

多重样式的优先级为：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

CSS盒子模型

所有HTML元素可以看作盒子。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

（图源博客园）

CSS | 青训营笔记