CSS基础之添加样式

为网页添加样式

样式解释

h1{
color:red;
background-color: blue;
text-align:center;
}

这样的一整个代码叫做一条CSS规则
CSS规则=选择器+声明块

选择器

选择器: 选择元素,确定样式应用的范围

1. id选择器,选择对应id值的选择器,在{}前写#id名选中该元素
   
2. 元素选择器,在{}前写上对应元素的名称
   
3. 类选择器,在{}前写.class值
   

声明块

声明块出现在{}中,包含很多声明(属性).每一个声明(属性)表达了某一方面的样式

CSS代码书写位置

1. 内部样式表
   书写在style中,style最好放在head中,保证先读取到样式
   
2. 内联样式表(元素样式表)
   直接书写在元素的style属性中
   
3. 外部样式表 [推荐]
   将样式书写到独立的CSS文件中.
   使用时需要链接
   <link rel="stylesheet" href="./css/index.css">

(1). 外部样式表可以解决多页面重复问题
(2). 有利于浏览器缓存,从而提高页面响应速度
(3). 有利于代码分类,更易于阅读和维护

前端代码书写应该遵循 结构(HTML),样式(CSS),行为(JS)相分离