前端之CSS学习01-CSS介绍和CSS样式表

00-HTML的局限性

背景知识:

html: 只关注内容语义

不能满足设计者需求

操作html属性不方便

在html总添加样式,会造成页面比较臃肿

总结本课: 纯HTML页面不太美观,需要一种简单的技术来美化页面

 

01-CSS作用以及初识

CSS作用: 让我们的网页更加丰富多彩,布局更加灵活

让HTML从样式中脱离,实现了HTML专注去做结构呈现,样式交给CSS

理想的结果: 结构与样式分离

效果展示:

有CSS和没有CSS的效果差别

Cascading Style Sheets: 层叠样式表

主要作用:

设置HTML页面中的

文本内容(字体,大小,对齐方式)

图片外形(宽高,边框样式,边距)

版面的布局和外观显示样式

CSS以HTML为基础,提供了丰富的功能,如字体,颜色,背景的控制及整体排版等,而且针对不同的浏览器设置不同的样式

 

总结本课: 什么是CSS,CSS的主要作用

 

02-行内样式表

CSS的使用:

位置1: 行内式,写在标签内部

style属性

value: color: pink;

转存失败重新上传取消

CSS语法:

styleContent : styleValue ;

CSS内容:

字体类:

颜色: color:red;

字体: font-size:18px;

style属性:

样式属性,组内样式使用;隔开

缺点: 样式和html没有分离

 

 

03-内部样式表

背景:

行内样式表

 

内部样式表: (内嵌样式表)

在head标签里面

语法:

 

选择器: 作用就是选中某些标签元素

标签选择器: 直接使用html中的标签

案例:

优点:

初步实现了标签和样式相分离

理论上可以放到html文档中的任何位置,一般放在head标签中

type="text/css"在html5中可以省略

只能控制当前页面

疑问:

css和html属性,如果同时设置的时候,谁会起作用?

 

04-外部样式表（结构样式分离）

背景:

是否能够实现彻底的样式和结构分离呢?

是否能够样式共享呢?

外部样式表(外链式)

 

语法:

rel: 定义当前文档与被链接文档之间的关系,在这里需要指定为stylesheet,表示被链接的文档是一个样式表文件,以后还会有js文件等

type: 定义所链接文档的类型,在这里需要被指定为text/css,表示链接的外部文件为CSS样式表,我们都可以省略

href: 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径

使用案例:

css文件:

ul{

color:red;

}

html文件:

转存失败重新上传取消

优点:

实现了html文件和css样式的分离

 

05-外部样式表（样式共享）

外部样式表的优点:

给多个html文档共享

使用:

在其它html文档中链接调用就可以了

优点:

代码复用,修改一处,全部引用这个文件的地方都会起作用

 

06-样式表总结以及代码约定

按照书写位置的可以分三种

优点

书写方便,权重最高

实现了部分结构和样式的分离

完全实现结构和样式相分离

缺点

没有实现样式和结构分离

没有彻底分离

需要引入

 

书写位置

作用标签内

style标签内

单独的CSS文件

控制范围

控制一个标签

控制一个页面

控制整个引用这个css样式表的html文档

规范:

紧凑型: 一行写多个样式

展开式: 样式名称: 样式值;阅读起来方便

使用小写字母

 

07-总结CSS样式规则

总结:

选择器 {

样式属性1:(一个空格)属性值;

样式属性2:(一个空格)属性值;

样式属性3:(一个空格)属性值;

}

 

08-CSS选择器作用

选择器学习目标:

1. 作用
2. 常见选择器

作用:

选择出特定的HTML页面标签,为给指定的元素标签做样式修饰做准备

CSS的作用:

选出标签

修饰样式

 

09-标签选择器

选择器分组:

1. 基础选择器
   1. 标签
   2. 类
   3. id
   4. 通配符
2. 复合选择器

 

标签选择器:

也叫元素选择器,用于选择html中的指定标签

语法:

标签名 {

样式属性: 样式值;

}

特点:

(优点)所有的指定标签都会被选中

(缺点)不能设计差异化样式(例如,只选择某个input标签中的一个,而不是所有的input标签)

 

10-类选择器

类选择器: (工作中使用最多)

html的元素中有class属性,在类选择器中,就可以对指定类的标签选中

语法:

.类名 {

属性: 属性值;

}

使用:

 

疑问:

在编写的过程中,谁引用谁?

特点:

可以Wie元素对象定义单独或相同的样式.可以选择一个或者多个标签

规范:

不要使用数字、中文,尽量使用英文字母

 

11-Google案例

 

12-类选择器特殊用法（多类名）

多个类名:

每一个类名都可以找到标签

作用:

更多的选择目的,通过

场景: 每一个样式里面都有字体的属性设置

就可以提取出来

使用:

class="class1 空格class2"

总结:

多类名属性修饰的标签,操作起来更灵活

 

13-id选择器以及和类选择器区别

语法:

#标签中id值 {

属性: 属性值;

}

使用场景:

和类选择器差不多,id是唯一的,所以这种选择器更加精准

类选择器好比人的名字,是可以有重复的;id选择器好比人的身份证号码,唯一的,不重复

id选择器一般用于页面唯一性的元素身上,经常和后面学习的javascript搭配使用

类选择器在修改样式中用的较多

 

14-通配符选择器

* 代表所有标签

margin:外边距

padding: 内边距

 

注意: 通配符选择器会匹配页面素有的元素,降低页面响应速度,不建议随便使用

 

15-基础选择器总结

标签: 直接写标签

不能差异化选择,例如,不能选择某一部分标签

类: .符号

能选择一个或者多个标签

id: #id

一次只能选择一个标签,并且只能使用一次

通配符

选择的太多,不推荐使用

规范:

不使用无具体语义定义的标签选择器

尽量少使用通配符选择器

尽量少使用id选择器

 

16-font-size字号

属性: 字号

font-size: 字体大小,单位px

字体大小默认是16px,但是不同浏览器可能会有不同,所以最好还是显式定义,目的是所有浏览器都统一

 

17-font-family 字体

属性: 字体

语法:

font-family:"微软雅黑";

font-family:Arial,"Microsoft YaHei","微软雅黑","合体"; <--如果指定了多个字体,必须用逗号分隔

作用: 依次去系统上找这几个字体,前面的优先,如果都没有,那就默认了

技巧:

1,各种字体之间必须使用英文状态下的逗号隔开

2,中文字体需要加英文状态下的引号,英文字体一般不需要加引号,当需要设置英文字体时英文字体名必须位于中文字体名之前;

3,如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,

例如: "Times New Roman"

4,尽量使用系统默认字体,保证在任何用户的浏览器都能正确显示

5,不区分大小写

总结:

1,语法

2,顺序

3,注意

 

18-字体特殊写法（unicode）

背景:

对于不支持中文的编码,如何让它们也能正确显示

解决方法:

方式1: CSS文件中,不使用中文来表示字体,例如使用英文Microsoft YaHei来代替微软雅黑

方式2: 在CSS直接使用Unicode编码来写字体名称可以避免这些错误;

 

19-font-weight字体加粗

背景:

如何实现字体加粗

解决方法:

方式1: html中解决,使用标签进行文本加粗

方式2: 使用CSS

font-weight: normal/bold/100-900 <-- 400=nomal 700=bold

作用:

1, 改变字体加粗程度;

2, 细 --> 粗; 粗 --> 细;

规范:

尽量使用数字来表示加粗和不加粗

个人认为,html中设置

知识点:

CSS的注释: /* 注释内容 */

 

20-font-style字体风格

需求: 实现字体的是否倾斜

方式 1: CSS样式 font-style: normal/italic

方式2: html标签,

经验:

一般不使用斜体,反而使用正常模式

让em标签内的字体,改为正常模式

 

21-字体综合写法

font: 是否倾斜 空格 加粗 空格 字号/行高 空格 字体; <-- 顺序不能更改,属性之间以空格隔开,后面两个不能省略

font: italic 700 20px "微软雅黑";

 

22-font总结

字号: px

字体粗细

是否倾斜

字体

font综合写法: 不要省略字号和字体

字体是否倾斜,

 

23-综合案例-结构搭建

写前端网页的路线:

1,结构

2,样式

24-综合案例-font样式

规范:

1,整个网页的字体统一16px,目的为了在各种网页中都强制统一

2,可能会重复的标签,尽量使用类选择器,所以在页面中对元素写上class

3,标签和css都能做的事情,个人选择使用css

em: 具备语义,强调,但是注意会出现字体倾斜-->css里面再次对标签使用去倾斜 -->所以直接使用css就搞定了

strong: 加粗

 

25-color颜色

外观属性:

• 颜色
• 行间距
• 文本对齐
• 首行缩进
• 文本装饰

颜色:

color

预定义的颜色

十六进制: #000000 --> #FFFFFF (十六进制两两相同就使用简写的方式)

红绿色RGB

技巧:

使用颜色吸取工具自动获取颜色值

FastStoneCapture

 

26-综合案例-颜色

 

 

27-文字水平居中和行间距

text-align: 文本居中

left

right

center

注意: 是让盒子里面的内容水平居中,而不是让盒子居中对齐

行间距: 间距保持合适,会使读者阅读起来更舒服

一般行距比字号大7,8像素左右比较合适

line-height:24px

 

28-text-indent首行缩进

段落的首行缩进

text-indent:

字符宽度单位: em 汉字或者字母的宽度

 

29-text-decoration文本装饰

需求: 去掉链接的下划线

语法:

none:无装饰

underline:下划线

overline:上划线

blink:闪烁

line-through: 贯穿线

 

30-css外观属性总结

颜色

文本对齐

行高设置

首行缩进

文本修饰

 

31-chrome调试工具

出现问题的处理方式: 打开浏览器去查看问题

选择工具使用:

ctrl+shift+C

选中页面上的元素

开发者工具就会显示对应的html代码和css样式

开发者工具的使用:

F12: 开启

ctrl+滚动轮: 放到或缩小工具内的字体

ctrl+0: 复位大小

开发者工具里面可以可见即可得的调整样式

文本调试: 上下箭头可以调整

颜色调整: 点击样式的颜色,调出调色板

快速定位当前指定的样式,在源代码的位置