一、CSS基础
（一）、CSS简介：
- CSS是一种标记语言
- CSS是网页的美容师，其主要用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
- 网页实现结构（HTML）与样式（CSS）相分离
（二）、CSS语法规范
<style>标签理论上可以放在HTML文档的任何地方，但一般放在文档的<head>中；<style>CSS的语法</style>- 在CSS样式格式书写中，推荐以展开的格式书写，如
- CSS样式大小写：样式选择器、属性名、属性值、关键字等全部使用小写字母，特殊情况除外。
- CSS的空格规范：选择器（标签）和大括号中间保留空格；在属性值前面，也就是冒号后面，保留一个空格。如：
（三）、CSS组成:选择器+一条或多条声明
- 选择器是用于指定CSS样式的HTML标签，{}内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现，如
- 每一组属性结束后，一定要加分号
- 属性和属性值之间用“：”隔开
（四）、CSS的引入方式
- 内部样式表（嵌入式）：其是写到html页面内部，是将所有的CSS代码抽取出来，单独放在一个
<style>标签中。
语法结构：
PS：
- 此种方式可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但并没有实现结构与样式完全分离
- 在日常练习中，常常使用这种方式练习
- 行内样式表（行内式）：在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。
语法结构：
PS：
- 此方式可以控制当前的样式设置样式
- 此方法没有体现出结构与样式相分离的思想，在对当前元素设置样式时，可以考虑使用
- 外部样式表：样式单独写到CSS文件中，之后将CSS文件引入到HTML页面中使用，适用于样式比较多的情况
引入外部样式的步骤
PS：该方式是最常用的方式，可以控制多个页面
（五）、CSS字体属性
- 字体系列：
标签：font-family
语法：
PS：
- 字体大小
标签：font-size
语法：
PS：
- 标题标签比较特殊，需要单独指定文字大小
- px（像素）大小是我们网页中最常用的单位，谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小，不要默认大小
- 可以给
<body></body>指定整个页面文字的大小
- 字体粗细
标签：font-weight
语法：
- 文字样式
标签：font-style
语法：
PS：
实际应用中，我们很少给文字加斜体，一般是让倾斜的字体不倾斜：font-style:normal
（六）、CSS文本属性
- 文本颜色
标签：color
语法：
PS：
开发中最常用的是十六进制
- 对齐文本
标签：text-align（只能设置文本内容的水平对齐方式）
语法：
- 装饰文本
标签：text-decoration:可以给文本添加下划线、删除线、上划线等
语法：
PS：
添加下划线：text-decoration:underline；
删除下划线：text-decoration:none;
- 文本缩进
标签：text-indent
语法：
PS：
指定文本的第一行的缩进，通常是将段落的首行缩进
- 行间距
标签：line-height
语法：
PS：
行间距=上间距+文本高度+下间距，上间距=下间距
二、CSS选择器
（一）、基础选择器
- 标签选择器
定义：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
语法：
作用：可以把某一类标签全部选择出来。
优点：能够快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签
- 类选择器
定义：可以单独选择一个或者某几个标签
语法：
定义类:
调用类：
口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用
PS：
类选择器使用“.”进行标识，后面紧跟类名（不能用标签名字）——见名知意
长名称或词组可以使用中横线给选择器命名
不要使用纯数字、中文等命名，用英文字母表示
类选择器——多类名
.多类名使用方式:
多类名使用场景:
- id选择器
作用：可以为标有特点id的HTML元素指定特定的样式
语法：
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
PS：
注意要写“#”
类选择器与id选择器的区别
-通配符选择器
作用：用“*”定义，用于选取页面中的所有元素（标签）
语法：
PS：
*把所有的标签都改变了，包括html、body等
（二）、复合选择器
-
后代选择器（包含选择器）
语法：
-
子选择器
语法：
-
并集选择器
语法：
PS：并集选择器一般竖着写，注意最后一个选择器不要加逗号
- 伪类选择器
- 链接伪类选择器
实际开发中：
PS:
:focus伪类选择器
三、CSS盒子模型
（一）、盒子模型组成
四部分：content、border、padding、margin
- 边框border
PS：
border-style：边框样式（虚线dashed；实线soild；点线dotted）
边框简写
边框分开写法
边框会影响盒子实际大小
解决方案：测量时，不测边框；
测量时包含了边框，则用盒子的width/height减去边框宽度（若左右都有边框，则减去两倍边框大小）
- 内边距padding
PS：
padding简写属性
内边距会撑大盒子
- 内边距padding
margin简写属性:同padding简写属性
- 内容content
放入需要显示的内容即可
关于盒子模型的其他内容，且听下回分解٩(๑❛ᴗ❛๑)۶
扫一扫
4335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
