CSS3 教程1——基础知识
时间:2021-03-03 12:21:52
收藏:0
阅读:0
1、什么是CSS
如何学习?
- CSS是什么
- CSS怎么用(快速入门)
- CSS选择器(重点+难点)
- 美化网页(文字,阴影,超链接,列表,渐变……)
- 盒子模型 (每个元素都有的边框之类的)
- 浮动
- 定位
- 网页动画(进阶学习 特效 推荐菜鸟教程)
注意:
前端和java程序员的区别在于CSS,CSS不仅需要代码,还需要美工和模仿设计
1.1 、什么是CSS
层叠级联样式表
CSS:表现(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动……
1.2、发展史
CSS1.0 只能美化一些基本内容,例如加粗字体,还可以使用继承
CSS2.0 DIV(相当于块,比p标签更灵活)+ CSS HTML与CSS结构分离的思想,网页变得简单,利于SEO(搜索引擎优化)
CSS2.1 更高级的用法,浮动,定位
CSS3.0 目前最新版:圆角边框,阴影,动画等新特性…… 浏览器兼容性,动画可能某些老式浏览器没有支持 支持前几个版本的CSS
1.3、快速入门
style标签可以在html中嵌入css代码,例如:
<style>
h1{
color:red;
}
</style>
css代码格式:
选择器{
声明1;
声明2;
声明3;
}
如果要将css与html分离,可以使用链接链到CSS文件:
<link rel="stylesheet" href="路径">
推荐使用分离的方式
css文件的优势:
- 内容和表现分离
- 网页结构表现同意,可以实现复用
- 样式丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录
1.4、三种css导入方式
- 内部样式 在html中加入style标签
- 外部样式 写在外部css文件中 注:css的注释是/* */
- 行内样式 在标签内加上style属性
样式的优先级别:就近原则 谁离元素更近,优先级越高
扩展:外部样式两种写法:
- 链接式
<link rel="stylesheet" href="路径">
- 导入式 出自css2.1 现在不常用了,有弊端 会先展示网页骨架,之后再渲染
<style>
@import url("css/style.css");
</style>
评论(0)