摘要
- CSS又名层叠样式表，它的作用就是给HTML网页进一步装饰，前面我们学习HTML结构的时候其实就是学习了HTML的一个大的骨架结构，后面学习的表form表单展现的形式是很low的，需要进一步对齐修饰设置，让它变得更高大上起来，这就离不开CSS的知识。
- 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 （ 的一个应用）或 （标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
-
- 语法结构：选择器 {属性： 属性值；属性： 属性值}
- 注释形式：/*这是注释内容*/ /*多行注释内容1 多行注释内容2 */
- 三种设置方法：
-
- head里面style中写css：<style>p {color: red}</style>
- head里面link引入css文件：<link rel="stylesheet" href="my_scc_02.css">
- 在标签内直接指定style：<p style="color: red">hello world!</p>
-
我们在设置不同种类标签内容的样式的时候，需要知道我们修改的标签的位置，接下来看看如何精确定位设置样式的位置，才能设置其样式。
标签通常同的属性有：id和class类
- 标签选择器：根据标签种类来设置该类标签样式
- id选择器：每个标签都可以设置一个id在唯一标识它，所以我们可以通过这个id来定位到该标签位置，从而进行修改样式操作，id前面注意要加上#
- 类选择器：在标签里面设置class="c1"，c1是一个类的设置样式，在style里定义的时候前面需要加点（.c1 {color：red}）
- 通用选择器：类似这种* {color： blue}，*代表所有标签，意思就是所有都全部设置
CSS学习测试 我要记住你的样子
像鱼记住水的拥抱像云在天空中停靠夜晚的来到
也不会忘了阳光的温暖
（涉及查找优先级的问题，在后面会谈及。）
（span套span，不符合html5规则）
- 后代选择器==>div span：div里面所有的span 01我要忘了你的样子 02像鱼忘了海的味道 03放下所有梦和烦恼
- 儿子选择器==>div>span：div里面儿子一层（第一层）所有的span 主div主div的儿子1 主div的孙子1
主div的儿子2 主div的孙子2
- 毗邻选择器==>div+span：div下面挨着的span 主divdiv下面的第一个spandiv下面的第二个span
主div的儿子2 主div的孙子2
- 弟弟选择器==>div~span：与div同一级且下面所有的标签 主divdiv下面的第一个spandiv下面的第二个span
主div的儿子2 主div的孙子2
- 在标签内自定义一个属性，用于找到该标签的作用。
自定义属性xxx
自定义属性+值1
自定义属性+值2
我是打酱油的！
自定义属性xxx
自定义属性+值1
自定义属性+值2
我是打酱油的！
我是span,我的属性里有xxx
自定义属性xxx
自定义属性+值1
自定义属性+值2
我是打酱油的！
- 分组： 我是div
我是一个p
我是span
- 嵌套： 我是div
我是div里面的一个p
我是div里面的span我是一个p
我是span -
div p嵌套关系，然后div和span是组合关系，所以：
- a标签的四种状态：
- 获取焦点：让输入框在选中时候，背景颜色变成自定义颜色
- 伪元素选择器：将某一标签的第一个，开头、结尾处设置样式。
- first-letter
我闻西方大士，
为人了却凡心。
秋来明月照蓬门，
香满禅房幽径。
屈指灵山会后，
居然紫竹成林。
童男童女拜观音，
仆仆何嫌荣顿？
-
before：
万物由道而生，循着道成长，而后又回归于道。
人可以毁灭，但不可以屈服。
你要克服的是你的虚荣心，是你的炫耀 欲，你要对付的是时时刻刻想出风头的小聪明。
-
after:
包租婆，怎么就没有水了呢
维护世界和平就靠你了,我这里有本秘籍,见与你有缘,就十块钱卖给你了.
- 相同选择器，不同的引入方式：就近原则（从上往下生效），看哪个style里标签更近。
- 不同选择器，不同引入方式：行内样式>id选择器>类选择器>标签选择器
- 块儿级标签的宽度和长度： 樊登读书，改变你我
- 字体相关设置（大小、自重、颜色）：
面朝大海，春暖花开
-
文本属性：（通常给a标签用）
浪花一朵朵
桃花朵朵开
- 去掉跳转文字的下划线：
- 背景属性：
- 边框： 我是一条鱼
-
画圆：
（设置不显示，不会继续占用位置）
- display：none 开头1看我显示没有1看我显示没有1结尾2
- display:inline 将块级标签变成行内标签 天天年年
- display:block 将行内标签变成块级标签
美好的事情即将到来
-
display ：inline-block 让span标签具有独占一行且可以设置长宽
第一个span第二个span
