css基本介绍

yqd666

7084人浏览 · 2022-08-04 18:13:38

yqd666 · 2022-08-04 18:13:38 发布

CSS基本使用

1.css简介
2.CSS的编写位置
3.样式表的优先级
4.CSS语法规范
5.CSS选择器
三.字体和文本样式

1.css简介

（1）CSS全称：层叠样式表(Cascading style sheets)
（2）CSS也是一直标记语言，用于给页面中的HTML标签设置样式
（3）HTML 搭建结构， CSS 添加样式，实现了：结构与样式的分离。

2.CSS的编写位置

2.1 行内样式

（1）写在标签的style属性中，又称内联样式
（2）语法

<h1 style="color:red;font-size:60px;">欢迎学习CSS</h1>

（3）注意点：
①style 属性的值不能随便写，写要符合 CSS 语法规范，是名:值; 的形式。
②行内样式表，只能控制当前标签的样式，对其他标签无效。
（4）存在的问题：
书写繁琐、样式不能复用、并且没有体现出：结构与样式分离的思想，不推荐大量使用，只
有对当前元素添加简单样式时，才偶尔使用。

2.2 内部样式

（1）写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中。style标签一般写在head标签里面， title标签下面
（2）语法：
在这里插入图片描述
（3）注意点：
①<style> 标签理论上可以放在 HTML 文档的任何地方，但一般都放在 <head> 标签中。
②此种写法：样式可以复用、代码结构清晰
（4）存在的问题：
①并没有实现：结构与样式完全分离。
②多个 HTML 页面无法复用样式。

2.3 外部样式

（1）写在单独的 .css 文件中，随后在 HTML 文件中引入使用。
（2）语法：
①新建一个扩展名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
②在 HTML 文件中引入 .css 文件。

<link rel="stylesheet" href="./xxx.css">

在这里插入图片描述
（3）注意点：
①<link> 标签要写在 <head> 标签中。
②<link> 标签属性说明：

href ：引入的文档来自于哪里。
rel ：( relation ：关系）说明引入的文档与当前文档之间的关系。

③外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。
④实际开发中，几乎都使用外部样式，这是最推荐的使用方式！

3.样式表的优先级

（1）优先级规则：行内样式 > 内部样式 = 外部样式
（2）内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（写的位置在页面中靠后的会覆盖前面的）。
（3）同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：“后来
者居上”）。

4.CSS语法规范

（1）CSS 语法规范由两部分构成：
①选择器：找到要添加样式的元素。
②声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为： 属性名: 属性值;
在这里插入图片描述
（2）备注：
①最后一个声明后的分号理论上能省略，但最好还是写上。
②选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上。

（3）注释的写法：
在这里插入图片描述
（4）CSS代码风格
①展开风格 — — 开发时推荐，便于维护和调试。
②紧凑风格 — — 项目上线时推荐，可减小文件体积。
③备注：项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文件体积，节约网络流量，同时也能让用户打开网页时速度更快。

5.CSS选择器

➢ 选择器的作用：
• 选择页面中对应的标签（找她），方便后续设置样式（改她）

5.1 CSS基本选择器

5.1.1 通配符选择器

（1）作用：找到页面中所有的标签，设置样式
（2）语法：

* {
	属性名: 属性值;
}

（3）举例：

/* 选中所有元素 */
* {
	color: orange;
	font-size: 40px;
}

（4）注意点：
①开发中使用极少，只会在极特殊情况下才会用到
②可能会用于去除标签默认的margin和padding
在这里插入图片描述

5.1.2 元素选择器

（1）作用：为页面中某种元素统一设置样式。
（2）语法：

标签名 {
	属性名: 属性值;
}

（3）举例：

/* 选中所有h1元素 */
h1 {
	color: orange;
	font-size: 40px;
}
/* 选中所有p元素 */
p {
	color: blue;
	font-size: 60px;
}

（4）备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的 p 元素效果都一样。

5.1.3 类选择器

（1）语法：

.类名 {
	css属性名：属性值；
}

在这里插入图片描述

（2）作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
（3）注意点：
①元素的 class 属性值不带点(.) ，但 CSS 的类选择器要带点(.)
②class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名要有意义，做到 “见名知意”。
③一个元素不能写多个 class 属性，下面是错误示例：
在这里插入图片描述
④一个元素的 class 属性，能写多个值，要用空格隔开，例如：

5.1.4 id选择器

（1）语法：

#id属性值 { 
	css属性名：属性值； 
}

在这里插入图片描述

（2）作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
（3）注意点：
①id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空格、区分大小写。
②一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。
③一个元素可以同时拥有 id 和 class 属性。

5.2 CSS复合选择器

三.字体和文本样式

1.字体样式

1）字体大小
➢ 属性名： font-size
➢ 取值：数字 + px
➢ 注意点：
• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效
2）字体粗细： font-weight
➢ 属性名： font-weight
➢ 取值：
• 关键字：
①normal：正常
②bold：加粗
• 纯数字： 100~900的整百数：
正常：400
加粗：700
➢ 注意点：
• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以：正常、加粗两种取值使用最多。
3）字体样式:(是否倾斜)
➢ 属性名： font-style
➢ 取值：
• 正常（默认值）：normal
• 倾斜： italic
4）字体系列 font-family：
➢ 属性名： font-family
➢ 常见取值：具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
• 具体字体： “Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
• 字体系列： sans-serif、 serif、 monospace等……
➢ 渲染规则：
（1）从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
（2）如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
➢ 注意点：
（1）如果字体名称中存在多个单词，推荐使用引号包裹
（2）最后一项字体系列不需要引号包裹
（3）网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
5）字体类型： font属性连写
➢ 属性名：font (复合属性)
➢ 取值：
• font : style weight size family;
➢ 省略要求：
• 只能省略前两个，如果省略了相当于设置了默认值
➢ 注意点：如果需要同时设置单独和连写形式
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面

2.文本样式

1）文本缩进：
➢ 属性名： text-indent
➢ 取值：
• 数字+px
• 数字+em（推荐：1em = 当前标签的font-size的大小）
2）文本水平对齐方式：
➢ 属性名： text-align
➢ 取值：
在这里插入图片描述
➢ 注意点：
• 如果需要让文本水平居中， text-align属性给文本所在标签（文本的父元素）设置
水平居中方法总结 text-align : center
➢ text-align : center 能让哪些元素水平居中？
（1）文本
（2）span标签、 a标签
（3）input标签、 img标签
➢ 注意点：
（1）如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置
3）文本修饰： text-decoration
➢ 属性名： text-decoration
➢ 取值：
在这里插入图片描述
➢ 注意点：
• 开发中会使用 text-decoration : none ; 清除a标签默认的下划线

3.line-height行高

➢ 作用：控制一行的上下行间距
➢ 属性名： line-height
在这里插入图片描述
➢ 取值：
• 数字+px
• 倍数（当前标签font-size的倍数）
➢ 应用：
（1）让单行文本垂直居中可以设置 line-height : 文字父元素高度
（2）网页精准布局时，会设置 line-height : 1 可以取消上下间距
➢ 行高与font连写的注意点：
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;
标签水平居中方法总结 margin : 0 auto
➢ 如果需要让div、 p、 h（大盒子）水平居中？
• 可以通过margin : 0 auto ; 实现
➢ 注意点：
（1）如果需要让 div、 p、 h（大盒子）水平居中，直接给当前元素本身设置即可
（2）margin： 0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的