1.1什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS:表现(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动...
下面举例如何查看网页的CSS:
1.打开网上中“开发人员工具”
2.以上便是HTML和CSS的代码
1.2CSS发展史
CSS1.0
CSS2.0 DIV(块)+CSS,HTML和CSS的分离思想,网页变得简单,SEO
CSS2.1 浮动,定位
CSS3.0 圆角,阴影,动画... 浏览器兼容性
1.3快速入门
CSS编译器推荐:IntelliJ IDEA
style基本样式:
但是不太建议这种样式,建议使用以下的样式:
1. 新建一个stylesheet文件
2. 将原有style删除,把style里的内容添加到新建的stylesheet文件里,同时用上
<link rel="stylesheet" href="css/style.css">表示在HTML文档中引入了一个外部样式表文件,文件路径为"css/style.css"。
rel
是 HTML 中的一个属性,用于定义与链接文档之间的关系href
是 HTML 中的一个属性,用于指定链接的目标地址
就像这样!!!
css的优势:
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录!
1.4,css的3种导入方式
1.内部样式
例如:
<style> h1{ color:green; } </style>
2.外部样式
例如:新建一个style文件(外部样式),利用link连接style
3.行内样式
例如:
<h1 style="color: red">我是标题</h1>
3种导入方式优先级:就近原则!!! 谁离标题内容(我是标题)最近就是谁。例如上图里”我是标题“最近的是行内样式,所以最后效果会表现为行内样式效果,即为红色。
下图为表现效果:
扩展:外部样式两种写法
1.链接式 :
html
例如;<!--外部样式-->
<link rel="stylesheet" href="style.css">
2.导入式:
@import是css2.1特有的
例如:<!--导入式-->
<style>
@import url("style.css");
</style>
二者区别:
- Link 是 HTML 中的标签,@import 是 CSS 中的规则。
- Link 用于引入外部样式表文件,@import 也是用于引入外部样式表文件。
- Link 必须出现在文档的 head 部分,@import 可以出现在 CSS 文件的任何位置。
- 通过 Link 引入的样式表文件会在页面加载时同时加载,而通过 @import 引入的样式表文件会在页面加载完成后加载