web前端-CSS基础

一、基础认知

1.1 CSS的介绍

➢CSS:层叠样式表(Cascading style sheets)

➢CSS作用是什么?

给页面中的HTML标签设置样式

1.2 CSS语法规则

CSS写在style标签中，style标签一般写在head标签里面， title标签下面

1.3 CSS引入方式

➢内嵌式: CSS写在style标签中

提示: style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

➢外联式: CSS写在一个单独的.css文件中

提示:需要通过link标签在网页中引入

➢行内式: CSS写在标签的style属性中

提示:不推荐使用，一般会配合js使用.

二、基础选择器

2.1标签选择器

➢结构:标签名{ css属性名:属性值; }

➢作用: 通过标签名，找到页面中所有这类标签,设置样式

➢注意点:

1.标签选择器选择的是一类标签, 而不是单独某一个

2.标签选择器无论嵌套关系有多深,都能找到对应的标签

2.2类选择器

➢结构: .类名{css属性名:属性值; }

➢作用:通过类名，找到页面中所有带有这个类名的标签,设置样式

➢注意点:

1. 所有标签上都有class属性，class属性的属性值称为类名(类似于名字)

2.类名可以由数字、 字母、下划线、中划线组成，但不能以数字或者中划线开头

3. 一个标签可以同时有多个类名，类名之间以空格隔开

4.类名可以重复, 一个类选择器可以同时选中多个标签

2.3 id选择器

➢结构: #id属性值{ css属性名:属性值; }

➢作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

➢注意点:

1. 所有标签上都有id属性

2. id属性值类似于身份证号码， 在一个页面中是唯一 的， 不可重复的!

3. 一个标签上只能有一个id属性值

4.一个id选择器只能选中一个标签

2.4通配符选择器

➢结构: *{ css属性名:属性值; }

➢作用:找到页面中所有的标签,设置样式

➢注意点:

1. 开发中使用极少，只会在极特殊情况下才会用到

2.在小页面中可能会用于去除标签默认的margin和padding

三、字体和文本样式

3.1字体样式

3.1.1字体大小: font-size

➢属性名: font-size

➢取值: 数字+ px

➢注意点:

谷歌浏览器默认文字大小是16px

单位需要设置，否则无效

3.1.2字体粗细: font-weight

➢属性名: font-weight

➢取值:

关键字:

纯数字: 100~900的整百数:

➢注意点:

不是所有字体都提供了九种粗细，因此部分取值页面中无变化

实际开发中以:正常、加粗两种取值使用最多。

3.1.3字体样式: font-style

➢属性名: font-style

➢取值:

正常(默认值) : normal

倾斜: italic

3.1.4字体类型: font-family

➢属性名: font-family

➢常见取值:具体字体1,具体字体2,具体字体3,具体字体...字体系列

具体字体: "Microsoft YaHei".微软雅黑、黑体、宋体、楷体等.....

字体系列: sans-serif. serif、 monospace等.

➢渲染规则:

1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

2.如果都不支持， 此时会根据操作系统，显示最后字体系列的默认字体

➢注意点:

1. 如果字体名称中存在多个单词，推荐使用引号包裹

2.最后一项字体系列不需要引号包裹

3.网页开发时， 尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

3.1.5字体类型: font属性连写

➢属性名: font (复合属性)

➢取值:

font : style weight size family;

➢省略要求:

只能省略前两个，如果省略了相当于设置了默认值

➢注意点: 如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面

要么把单独的样式写在连写的里面

3.2文本样式

3.2.1文本缩进: text indent

取值：

数字+ px

数字+em (推荐: 1em =当前标签的font-size的大小)

3.2.2文本水平对齐方式: text-align

取值：

➢注意点:

如果需要让文本水平居中，text- align属性给文本所在标签(文本的父元素)设置

3.3.3文本修饰: text- decoration

取值：

➢注意点:

开发中会使用text-decoration : none ;清除a标签默认的下划线

3.3 line-height行高

➢作用:控制一行的上下行间距

➢属性名: line-height

➢取值:

          数字+px

          倍数(当前标签font-size的倍数)

➢应用:

1.让单行文本垂直居中可以设置 line-height :文字父元素高度

2.网页精准布局时，会设置line-height: 1可以取消上下间距

➢行高与font连写的注意点:

如果同时设置了行高和font连写，注意覆盖问题

font: style weight size/line-height family ;