2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)

CSS样式的添加方法


行内样式
e.x.2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第1张图片


内嵌样式
e.x.
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第2张图片
注意内嵌样式写在head标签内;



单独文件(外部式样式表文件)
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第3张图片
也是在head标签内插入超链接,sublime+emmet可以用link:css+快捷键实现



CSS的选择器类型

1.标签选择器

2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第4张图片


2.**类别选择器**

2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第5张图片

3.ID选择器

2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第6张图片
注:id选择器应当具有唯一性。


4.嵌套声明
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第7张图片

5.集体声明

2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第8张图片

6.全局声明

2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第9张图片

CSS样式

1.单位
px,em,%
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第10张图片

2.颜色

2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第11张图片

3.文本
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第12张图片

4.字体

2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第13张图片
简化font
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第14张图片

5.背景
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第15张图片

6.超链接
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第16张图片

2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第17张图片
其中,:被称为伪类选择器
link-visited-hover-active必须按照如此顺序
Love&Hate 来记忆(

7.列表
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第18张图片
list-style-type
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第19张图片
list-style-position inside和outside
list-style-image 换图标

8.表格

奇偶选择器
2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)_第20张图片
此处的odd、even可换为数字。

你可能感兴趣的:(学习笔记)