CSS笔记一

HTML5和CSS3

一、简介

1、CSS：层叠样式表
2、网页的表现（外在显示）
3、层叠样式表：为每层页面设置样式，但看到的是最上层
4、CSS用来设置网页中元素的样式

二、修改元素样式

法一：内联样式（行内样式）
在p标签内部通过style属性来设置元素样式
注意：
1、属性往开始标签那写
2、CSS样式也是名值对结构，名对应一个样式值，名和值之间用“：”隔开，以“；”结尾
例：

<p style='color:red;font-size:15px;'>

其中CSS语法，如下图：

存在问题：
样式只能对一个标签生效，若要影响多个元素，可每个复制一遍。样式发生变化时，需一个个修改，不方便维护，所以开发时一定不能用内联样式

法二：内部样式表
将样式编写到head中的style标签，然后通过CSS选择器来选中元素并为其设置样式
如下图：
选择器
例：p{color:red} 表示页面中所有p元素
优点： 方便维护、可同时设置多个标签、只需一次即可修改全部、更方便对样式进行复用
缺点：内部样式表只能对一个网页起作用，其中的样式不可跨页面
简洁版:

法三：外部样式表（开发最佳）
将CSS样式编写到一个外部的CSS文件中，然后通过link标签引入外部的CSS文件
操作如下图：
1、首先在文件夹中添加一个.css文件
2、然后在.css文件中编写所需的格式
3、在网页中引入link标签 其中：“href”后面添加的即是格式所在的地址，如上图所示，格式地址和网页在同一文件夹中，所以可直接输入地址
优点：
1、外部样式表需要link标签引入，所以只要想使用这些样式的网页都可以使用，即可复用。
2、将样式编写到外部的CSS文件可使用浏览器的缓存机制，从而提高网页加载速度，提高用户体验。

补充：
缓存机制：网页加载时，还要加载外部的图片、音频、视频、外部css文件等，所以第一次打开网页会慢，下次再访问，由于缓存机制，那些文件可直接从本地加载（速度更快）出来