天天看点

CSS快速入门基础篇,让你快速上手(附带代码案例)

学习思路

CSS是什么

怎么去用CSS(快速上手)

CSS选择器(难点也是重点)

网页美化(文字,阴影,超链接,列表,渐变等)

盒子模型

浮动

定位

网页动画(特效效果)

项目格式:

CSS快速入门基础篇,让你快速上手(附带代码案例)

Cascading Style Sheet 层叠级联样式表

CSS: 表现(美化网页)

字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动...

CSS1.0

CSS2.0 新增 div(块)+CSS,HTML与CSS结构分离的思想

CSS2.1 新增浮动定位

CSS3.0 新增圆角,阴影,动画... 要考虑浏览器兼容性

建议写成html css分离模式,但是有时为了方便,也可以写到一起

css优势:

内容和变现分离

网页结构表现统一,可以实现复用

样式十分丰富

建议使用独立于html的css文件

利用SEO,容易被搜索引擎收录

作用:选择页面上的某一个或者某一类元素

优先级 id>class>标签选择器

1.后代选择器:在某个元素的后面

2.子选择器

3.相邻兄弟选择器

4.通用选择器

5.所有案例代码

伪类: 条件

id+class结合

有效的传递页面信息

美化网页,页面美观漂亮,才能吸引用户

凸显页面的主题

提高用户的体验

span标签:重点要突出的字,用span标签

繁琐写法,适合新手

CSS快速入门基础篇,让你快速上手(附带代码案例)

margin: 外边距

padding: 内边距

border :边框

边框粗细

边框的样式

边框的颜色

盒子的计算方式:这个元素到底有多大?

CSS快速入门基础篇,让你快速上手(附带代码案例)

margin+border+padding+内容宽度

圆圈

半圆

还有些基础知识未写在博客中,明天会更新,同时demo链接也会分享给大家

css