层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化
那css网页HTML有什么关系?
通俗的讲你可以把HTML比作是组成网页的框架,而css则是装饰美化网页的工具。一个没有任何css的网页是排版混乱,杂乱无章的,没有美感的。
本文下来主要介绍下如何在网页中使用css,以及css包括哪些知识点,具体的css知识点会在以后逐一介绍,一篇文章很难讲完。
回顾下HTML基础
css是作用于HTML标签上的,如果你还不是很熟悉HTML,请先学习HTML的知识,再来学习css。
一个HTML标签如下结构:
- 标签(Tag)—— 元素名称,如a, div
- 属性(Attribute)—— 元素属性,如href
- 值(Value)—— 属性值
- 元素(Element)—— HTML标记中所有的东西:属性、值和内容。
网页中如何使用css
网页中使用css一般有三种,行内样式,内部样式表及外部样式表。
1、行内样式
在html标签的style属性中写css代码,这样的方式就是行内样式。行内样式有个缺点就是对于页面中相同的元素必须每个元素都写一遍css代码,很不方便,所以这时需要使用内部样式表或外部样式表。
如下示例:
行内样式
hello world!
2、内部样式表
使用 标签之间写css代码,就是内部样式表。内部样式表缺点就是当页面复杂的时候,不利于组织代码,把不同模块功能的css代码组织成不同的css文件,这样更加清晰,便于组织维护代码。
如下示例:
内部样式表
段落文字
如上示例中,p段落包含在body中的div元素里,所以p段落继承了body 和 div 的样式,它将显示蓝色背景和红色字体。
如果在上面的示例代码中,再加上 p{color: #ffffff;} ,这个时候,p元素中的文字显示什么颜色?答案是白色,为什么,这就是css 产生冲突了。
在同一个元素上使用了同一个css属性但不同值的时候,就会产生冲突,浏览器会按照最后定义的样式为准。
css知识点
1、css 选择器
2 、css优先级
3、css 间距 —— margin、padding
4、css 盒子模型
5、css字体和文本 —— font
6、css链接样式
7、css颜色和背景 —— color 、background
8、css边框和圆角 —— border
9、css显示 —— display
10、css定位 —— position
11、css浮动 —— float
12、css布局:flex弹性盒子
13、css响应式:媒体查询
14、css 过渡和动画
15、css渐变和阴影
16、css网格
最后
css (层叠样式表)它有很多属性,但是平时只会用到一小部分,学习css不能死记硬背一大堆属性语法,这样没有多大用处,只需要掌握基本的概念和常用语法,基本上就够用了,对于其它的属性在用的时候再查询文档就可以了。
关于css详细内容,后面会按知识点介绍,感谢关注。
下一篇:前端入门——css 选择器