css它是层叠式表的缩写，有时被称为css样式表或级联样式表。
css用于设置标记语言HTML页面中的文本内容、图片的形状、布局和外观显示风格。可以美化HTML外观页面看起来更漂亮（HTML是结构的呈现，css是风格的实现)。
css由选择器和一个或多个声明两部分组成。
语法：
<style>
选择器{款式}
谁改{为什么}
<style>
例如：
<style> p { color:red; } </style>（1） 用于指定选择器HTML标签，花括号是设置对象的具体形式
(2)在属性和属性位置之间使用英语:分
(3)多个键单独使用多个键值；
一般情况下大多用于展开类型的模式。
如下所示：
<style> p { color:red; font-size:13px; } </style>小写字母全部使用，特殊情况除外。
(1)属性值前面，冒号后面需要保存空间
(2)在选择器和大括号之间保留空间
根据不同的需要选择不同的标签
选择器分类：
基本选择器由单个选择器组成
基本选择器还包括：标签选择器、类选择器id选择器和通配符选择器
格式：
标签名 {
属性1：属性值1；
属性2：属性值2；
...
}
例如，将会有以下代码h标题变成紫色
<style> h4 { color: blueviolet; } </style>
可以单独选择一个标签或多个标签发生相应的表格
语法格式：
.类名 {
属性1：属性值1；
属性2：属性值2；
}
应用在HTML结构形式如下：
<li class="类名称"> 内容 </li> 需要调用结构class调用相关属性class类
风格点定义，结构类（class）常用于一个或多个开发。
注意：
使用(1)类选择器.标记(英文形式)，跟随类名(自定义)
(2)可以理解为给这个标签起一个名字
(3)长名或短语可以用横线命名选择器
(4)不要用纯数字和中文命名，尽量用英文字母表示
（5）命名要有意义，尽量要是读代码的人可以看到懂以下是在写什么东西
(6)命名格式规范应遵循
<style> .bule { color: blueviolet; } </style> <h4 class="bule">让我们在山顶相遇吧</h4>如下图所示，运行后的结果仅为h4标签中的一个改变了颜色：
使用方法如下：
<li class="red size">内容</li? （1）债标签class在属性中，可以在多个类名之间使用空间
(2)这个标签可以分别有这些类名
(1)可以将一些标签元素的标签元素放入一个类中
(2)这些标签可以调用公共类，然后调用独特类
（3）节省了CSS空间也使整体格式的修改变得简单
如下代码所示：
<style> .bule { color: blueviolet; } .size { font-size: 20px; } </style> <p class="size bule">千年前，千里之外的星星，发出的光，跨越时空，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。留下时间长河和漫漫宇宙的痕迹。</p> <p>此时此刻，我们在人群中所做的每一件微不足道的小事，都会在这个世界上留下它的痕迹，或深或浅，或长或短。</p> <p class="size">此时此刻，我们在人群中所做的每一件微不足道的小事，都会在这个世界上留下它的痕迹，或深或浅，或长或短。</p>操作结果是改变其中一个字的大小，即变色，而一个字段只改变大小而不改变颜色。操作结果如下图所示:
HTML元素以id设置选择器的属性，CSS中id定义为#
语法：
<style> #id { color:...; background-color:...; ...; } </style>具体使用方法如下：
<style> #nav { color:pink; font-size=12px; } </style> <body> <div id="nav">内容</div> </body>代码如下所示：
<style> .bule { color: blueviolet; } .size { font-size: 20px; } #color { color:red; } </style> <p class="size bule">千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p> <p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p> <p class="size">此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p> <p id="color"> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。 </p>color 这个id选择器只能使用一次
样式#定义，结构id调用，只能调用一次，一旦被调用之后其他标签则不可调用
与class之间的区别：
（1）类相当于人的名字，可以进行重复使用
（2）
用“*”来定义，它表示选择页面中所有元素（标签）
语法：
<style> * { color:sky blue; } </style>通配符选择器不需要调用，自动给所有元素格式，只有在特殊情况下才会被使用。
例如：清除内外边距
* { margin:0; padding:0; }对所有的文字进行更改颜色的代码如下所示:
<style> * { color:aquamarine; } </style>
CSS Font（字体）属性用定义字体系列、大小、粗细和文字样式（如斜体）
：
CSS使用 font-family属性定义文本的字体系列
（1）各种字体之间必须使用的英文逗号分开
（2）一般情况下，如果有空格隔开的多个单词组成的字体加引号
（3）尽量使用系统自带的字体，保证在每个用户处可以正常显示
（4）最常见的几个字体：Microsoft YaHei、tahoma,arial、Hiagino Sans
如果一个font-family有多个字体，那么先观察第一个字体是否在系统中存在，存在则应用第一个，不存在则依次向后寻找存在的字体。
使用方式如下:
<style> p { font-family="Microsoft YaHei"、"tahoma,arial"、"Hiagino Sans" } </style>CSS使用font-size定义字体大小
p { font_size:20px; }（1）px（像素）大小是我们网页最常用的一个单位
（2）谷歌浏览器默认字体大小为16px
（3）不同浏览器可能的默认显示的字号大小不同，我们尽量给一个明确值大小，不要默认其大小
（4）可以给body指定整个页面文字的大小
标题、标签比较特殊，需要单独指定文字大小
使用font-weight属性设置字体的粗细
参数：
| normal | 正常默认字体相当于number=400 |
| bold | 粗体。相当于number=700 |
| bolder | 特粗体，IE5+ |
| lighter | LE5+细体 |
| number | 后面直接跟数字便可调节字体的粗细 |
使用font-style设置文本的风格
p {
font-style:normal;
}属性值包含italic斜体样式，主要作用就是让倾斜的字体不再倾斜
字体属性可以把以上的文字样式都综合起来使用，可节省代码的长度。
形式如下：
body {
font: font-style font-weight font-size/line-height font-family
}
其中font-size和font-family必须得书写，否则将不会被正常执行。
body { font: italic 700 16px 'microsoft yahe'}将body的代码改为p标签，则运行结果如下所示：
（1）使用font属性时，必须按照上面的语法格式书写其中的顺序不得进行更改，并且各个属性之间使用空格分开
（2）不需要设置的属性可以直接忽略（即取默认值）但必须保留font-size和font-family属性，否则font会不起作用
css text（文本）属性可定义文本的外观，比如颜色，对齐文本，装饰文本，文本缩进，行间距等等。
color属性用于定义文本的颜色
div {
color:red;
}
| 表示形式 | 属性值 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%，0%） |
| 预定义颜色 | red,green,bule,pink |
| 十六进制 | #FF0000,#FF6600,#29D794 |
(text-align）
text-align属性用于设置元素内文本内容的水平对齐方式
例如：
div {
text-align:center;
}| left | 左对齐（默认） |
| center | 居中对齐 |
| right | 右对齐 |
举一个实例，代码如下所示（将一个文本居中对齐）：
<style>
.align {
text-align: center;
}
</style>
<body>
<h4 class="align">让我们在山的顶峰相遇吧</h4>
<h4 class="align"> 一起去吧，更远的地方</h4>
</body>代码运行的结果如图所示：
（text-decoration）
text-decoration属性规定添加到文本的修饰，可以给文本加下划线，删除线，上划线等等。
div {
text-decoration:underline;
}
属性值如下表所示：
| 属性值 | 描述 |
| none | 默认无装饰（可以使有下划线的不存在下划线） |
| underline | 下划线，链接a自带下划线 |
| overline | 上划线（几乎不用） |
| line-through | 删除线（不常用） |
举一个实例，如下所示将链接a的下划线去掉，代码如下：
<style>
a {
text-decoration: none;
}
</style>
<body>
<a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank">
<h1>对角巷乐队</h1>
</a>
</body>运行的结果如下图所示：
（text-indent）
text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进
div {
text-indent: 20px;
}
通常设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至长度可以是负值
p {
text-indent:2em;
}
em是一个相对单位，就是当前元素一个文字的大小的距离，如果当前元素没有设置大小，则会按照父元素的一个文字大小。
一般常用em设置缩进，它只管缩进几个字对于开发人员来说很方便
我们已经学了这一部分内容了，那我们做一个让所有段落缩进的操作吧，代码如下：
<style>
p {
text-indent: 2em;
}
</style>
<body>
<p>千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。
</p>
</body>运行之后的结果如下所示：
（line-height）
line-height属性用于设置行间的距离（行高）
p {
line-height:26px;
}
内部样式表是写到HTML页面内部，是将所有css代码抽取出来，单独放到一个<style>标签
<style>
div {
color:red;
font-size:19px;
}
</style>
（1）<style>标签可以放在html文档的任意地方，但一般放在<head>标签中
（2）通过此种方式，可以方便控制当前的整个页面中的元素样式设置
（3）代码结构清晰，但是并没有实现结构与样式完全分离
（4）使用内部样式设定，也被称为嵌入式引入
行内样式表（内联样式表）是在元素标签内部的style属性中设定css样式
<div style="color :red; font-size:19px}内容</div>
（1）style其实就是标签的属性
（2）在双引号中间，写法要符合css规范
（3）可以控制当前的标签设置想要的样式
实际开发中都是外部样式表核心是将其单独写到css文件中，之后引入css到html文档中
：
（1）新建一个后缀名.css的样式文件，把所有css代码都放入此文件中
（2）在html页面中，使用<link>标签引入此文件
<link rel = "stylesheet" href = "css文件路径">
| 属性 | 作用 |
| rel | 定义当前文档与被链接的文档之间的关系，在这里需指定为stylesheet，表示被链接文档是一个样式表 |
| href | 定义所链接外部样式表文件的URL，可以为相对/绝对路径 |
使用外部样式表设定css，通常也被称为外链式和链接式引入
该<link>标签写在<head>标签之中
（1）Ctrl+滚轮可以放大放小代码
（2）左边是html，右边是css
（3）右边css可改动数值和查看颜色
（4）Ctrl+O复原浏览器大小
（5）点击元素，发现右侧无样式引入，极有可能是类名或样式引入错误
（6）如果有样式单眼视前有黄色感叹号提示，则为样式书写错误
（1）生成标签直接输入标签名按tab键即可
（2）如果想要生成多个相同的标签加上*即可
div*3 可以生成三个div标签
（3）如果有父子级关系的标签可以用>
ul>li 表示li是ul的子标签
（4）如果有兄弟关系的标签，用+就可以了
div+p
（5）如果生成带有类名或者id名字的，直接写.demo或#two 按tab键即可
（6）如果生成的div类名是有顺序的，可以用自增符 ￥
（7）如果想要在生成标签内部写内容时，将内容写在{ }中
例 .nav <div class="nav"> </div>
#na <div id = "na" > </div>
p.nav则是对标签p进行处理
.demo$*5 有五个div里的class分别为1,2,3,4,5的标签
div {内容}*n 就有n个 div+内容的
css基本采取简写形式即可
（1）比如 w200+tab 为width：200px；
（2）比如lh26+tab 为line-height：26px；
后代选择器又称为包含选择器，可以选择父元素里的子元素，其写法如下所示（将外层标签写在前面。内层标签写在后面用空格分开）
语法：
元素1 元素2{样式声明}
表示选择元素1里所有元素2（元素2为元素1的后代元素）
例如：
ul li {样式声明} 选择ul标签里的所有li标签
（1）元素1和元素2用空格隔开
（2）元素1是父级，元素2是子级最终选择的元素是元素2
（3）元素2可以是儿子，孙子都可以，只要是元素1的后代就行
例如：
.nav li a{color:red;}找类nav中li的标签a
具体的应用方式如下所示：
<style>
.nav li a{
color:red;
}
</style>
<body>
<ul class="nav">
<li>
<a href="#">我好想爱这个世界啊！！</a>
我好想爱这个世界啊！！
</li>
</ul>
</body>运行的结果如下所示，只有引用nav中的li标签中的a链接标签进行了变色：
子选择器只能作为某元素的最近一级子元素。简单的理解就是选择亲儿子元素
语法：
元素1 > 元素2 {样式声明}
表示 选择元素1里所有直接后代元素2
例如：
<div>
<p> 变 </p>
<p>变</p>
<ul>
<p>不变</p>
</ul>
</div>
（1）元素1和元素2 中间用大于号隔开
（2）元素1是父级，元素2是子级，最终选择的元素为元素2
（3）元素2必须是亲儿子，其他的都不可以
例如如下的代码：
<style>
div > p {
color:blueviolet;
text-align:center;
}
</style>
<div>
<p>
把我的明天都献给黑夜吧！
</p>
<ul>
<p>
把我的爱都献给你吧！！
</p>
</ul>
</div>运行的结果如下图所示：
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
并集选择器是个选择器通过，隔开连接，任何形式的选择器都可以作为并集选择器的一部分
元素1，元素2，元素3{样式声明}
表示选择了元素1，元素2，元素3
（1）元素之间用逗号隔开
（2）逗号可以理解为和
并集选择器喜欢竖着写，最后一个选择器不加逗号
进行一个实例操作，代码如下：
<style>
p,a,h4 {
color:blueviolet;
text-align:center;
text-decoration: none;
}
</style>
<a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank">
<h1>对角巷乐队</h1>
</a>
<p>6月12日，太合音乐集团旗下“在水星”厂牌服务艺人对角巷乐队全新单曲《我们》正式上线，这是他们继单曲《Hold You Tight》发行之后的又一温暖治愈系音乐作品。 如果说《Hold You
Tight》想表达的是只属于某一个人的专属情歌，那这首《我们》则是送给每一个努力生活的人。</p>
<img src="2.jpeg" height="650" width="1000" title="对角巷新专辑">
<h4> 一起去吧，更远的地方</h4>
运行结果如下图所示：
对角巷乐队标题本来是一个链接应该有下划线，但在样式声明中将其取消掉了
伪类选择器用于向某选择器添加特殊的效果
伪类书写的最大特点是用冒号（：）表示
| a:link | 选择所有未被访问的 |
| a:visited |
选择已经被访问过的 |
| a:hover | 选择鼠标指上的 |
| a:active | 选择鼠标长按尚未弹起的 |
链接伪类注意事项：
（1）为了确保生效，请按照link，visited，hover，active顺序书写
记忆口诀：LV包包真hao
（2）因为a链接在浏览器中具有默认样式，实际工作中都需要给链接单独指定样式
实际开发的写法：
a {
color:gray;
}
a:hover {
color:skybule;
}
一个实例的代码如下所示：
<style>
a {
color:gray;
}
a:hover {
color:blueviolet;
}
</style>
<a href="对角巷.html" target="_balnk">在日月的璀璨间闪耀</a>运行的结果如下图所示，当鼠标放在链接上时，颜色便会发生改变：
:focus伪类选择器
:focus伪类用于选择有光标的表单（input）元素
input:focus {
background-color:skybule;
}
| 选择器 | 作用 | 特征 | 使用情况 | 隔开及其用法 |
| 后代选择器 | 用来选择后代 | 可以是子孙 | 较多 | 符号空格 |
| 子代选择器 | 选择最近一级元素 | 只选择亲儿子 | 少 | 符号大于 |
| 并集选择器 | 选择样式相同的 | 用于集体 | 多 | 逗号 |
| 链接伪类 | 选择不同状态的链接 | 跟链接相关 | 多 | 正常写法 |
| ：focus | 获取光标处 | 跟表单相关 | 少 | input：focus |
今天的主要介绍就是css的一些基础语法学习，更新的有些慢望大家理解，期末了要复习三门数学课了，暑假会持续性更新新知识哒！