CSS入门基础学习（上）
时间：2023-01-27 03:00:00
css它是层叠式表的缩写，有时被称为css样式表或级联样式表。
css用于设置标记语言HTML页面中的文本内容、图片的形状、布局和外观显示风格。可以美化HTML外观页面看起来更漂亮（HTML是结构的呈现，css是风格的实现)。
css由选择器和一个或多个声明两部分组成。
语法：
（1） 用于指定选择器HTML标签，花括号是设置对象的具体形式
(2)在属性和属性位置之间使用英语:分
(3)多个键单独使用多个键值；
CSS 代码风格
1.样式格式
一般情况下大多用于展开类型的模式。
如下所示：
2.风格大小写
小写字母全部使用，特殊情况除外。
3.空格规范
(1)属性值前面，冒号后面需要保存空间
(2)在选择器和大括号之间保留空间
CSS 选择器的作用
根据不同的需要选择不同的标签
选择器分类：
选择器分为两类：基本选择器和复合选择器
基本选择器由单个选择器组成
基本选择器还包括：标签选择器、类选择器id选择器和通配符选择器
标签选择器(按标签名分类)
格式：
标签名 {
属性1：属性值1；
属性2：属性值2；
...
}
例如，将会有以下代码h标题变成紫色
类选择器：
可以单独选择一个标签或多个标签发生相应的表格
语法格式：
.类名 {
属性1：属性值1；
属性2：属性值2；
}
应用在HTML结构形式如下：
内容 需要调用结构class调用相关属性class类
风格点定义，结构类（class）常用于一个或多个开发。
注意：
使用(1)类选择器.标记(英文形式)，跟随类名(自定义)
(2)可以理解为给这个标签起一个名字
(3)长名或短语可以用横线命名选择器
(4)不要用纯数字和中文命名，尽量用英文字母表示
（5）命名要有意义，尽量要是读代码的人可以看到懂以下是在写什么东西
(6)命名格式规范应遵循
使用单个类名如下：
让我们在山顶相遇吧
如下图所示，运行后的结果仅为h4标签中的一个改变了颜色：
多类名:(一个标签可以使用多个类名)
使用方法如下：
内容 （1）债标签class在属性中，可以在多个类名之间使用空间
(2)这个标签可以分别有这些类名
使用多种名称的场景：
(1)可以将一些标签元素的标签元素放入一个类中
(2)这些标签可以调用公共类，然后调用独特类
（3）节省了CSS空间也使整体格式的修改变得简单
如下代码所示：
千年前，千里之外的星星，发出的光，跨越时空，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。留下时间长河和漫漫宇宙的痕迹。
此时此刻，我们在人群中所做的每一件微不足道的小事，都会在这个世界上留下它的痕迹，或深或浅，或长或短。
此时此刻，我们在人群中所做的每一件微不足道的小事，都会在这个世界上留下它的痕迹，或深或浅，或长或短。
操作结果是改变其中一个字的大小，即变色，而一个字段只改变大小而不改变颜色。操作结果如下图所示:
id选择器：
HTML元素以id设置选择器的属性，CSS中id定义为#
语法：
具体使用方法如下：
代码如下所示：
千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。
此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。
此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。
单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。
color 这个id选择器只能使用一次
样式#定义，结构id调用，只能调用一次，一旦被调用之后其他标签则不可调用
与class之间的区别：
（1）类相当于人的名字，可以进行重复使用
（2）id则相当于人的身份证号码，一个人只能有一个
通配符选择器：
用“*”来定义，它表示选择页面中所有元素（标签）
语法：
通配符选择器不需要调用，自动给所有元素格式，只有在特殊情况下才会被使用。
例如：清除内外边距
* { margin:0; padding:0; }对所有的文字进行更改颜色的代码如下所示:
CSS字体属性：
CSS Font（字体）属性用定义字体系列、大小、粗细和文字样式（如斜体）
字体系列：
CSS使用 font-family属性定义文本的字体系列
（1）各种字体之间必须使用的英文逗号分开
（2）一般情况下，如果有空格隔开的多个单词组成的字体加引号
（3）尽量使用系统自带的字体，保证在每个用户处可以正常显示
（4）最常见的几个字体：Microsoft YaHei、tahoma,arial、Hiagino Sans
如果一个font-family有多个字体，那么先观察第一个字体是否在系统中存在，存在则应用第一个，不存在则依次向后寻找存在的字体。
使用方式如下:
字体大小：
CSS使用font-size定义字体大小
p { font_size:20px; }（1）px（像素）大小是我们网页最常用的一个单位
（2）谷歌浏览器默认字体大小为16px
（3）不同浏览器可能的默认显示的字号大小不同，我们尽量给一个明确值大小，不要默认其大小
（4）可以给body指定整个页面文字的大小
标题、标签比较特殊，需要单独指定文字大小
字体粗细:（直接写数字，不用加像素值px）
使用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）
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 右对齐 举一个实例，代码如下所示（将一个文本居中对齐）：
让我们在山的顶峰相遇吧
一起去吧，更远的地方
代码运行的结果如图所示：
装饰文本（text-decoration）
text-decoration属性规定添加到文本的修饰，可以给文本加下划线，删除线，上划线等等。
div {
text-decoration:underline;
}
属性值如下表所示：
属性值 描述 none 默认无装饰（可以使有下划线的不存在下划线） underline 下划线，链接a自带下划线 overline 上划线（几乎不用） line-through 删除线（不常用） 举一个实例，如下所示将链接a的下划线去掉，代码如下：
对角巷乐队
运行的结果如下图所示：
文本缩进（text-indent）
text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进
div {
text-indent: 20px;
}
通常设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至长度可以是负值
p {
text-indent:2em;
}
em是一个相对单位，就是当前元素一个文字的大小的距离，如果当前元素没有设置大小，则会按照父元素的一个文字大小。
一般常用em设置缩进，它只管缩进几个字对于开发人员来说很方便
我们已经学了这一部分内容了，那我们做一个让所有段落缩进的操作吧，代码如下：
千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。
此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。
此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。
单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。
运行之后的结果如下所示：
行间距（line-height）
line-height属性用于设置行间的距离（行高）
p {
line-height:26px;
}
CSS引入方式
内部样式表：
内部样式表是写到HTML页面内部，是将所有css代码抽取出来，单独放到一个
（1）
运行的结果如下所示，只有引用nav中的li标签中的a链接标签进行了变色：
子选择器
子选择器只能作为某元素的最近一级子元素。简单的理解就是选择亲儿子元素
语法：
元素1 > 元素2 {样式声明}
表示 选择元素1里所有直接后代元素2
例如：
变
变
不变
（1）元素1和元素2 中间用大于号隔开
（2）元素1是父级，元素2是子级，最终选择的元素为元素2
（3）元素2必须是亲儿子，其他的都不可以
例如如下的代码：
把我的明天都献给黑夜吧！
把我的爱都献给你吧！！
运行的结果如下图所示：
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
并集选择器是个选择器通过，隔开连接，任何形式的选择器都可以作为并集选择器的一部分
语法：
元素1，元素2，元素3{样式声明}
表示选择了元素1，元素2，元素3
（1）元素之间用逗号隔开
（2）逗号可以理解为和
并集选择器喜欢竖着写，最后一个选择器不加逗号
进行一个实例操作，代码如下：
对角巷乐队
6月12日，太合音乐集团旗下“在水星”厂牌服务艺人对角巷乐队全新单曲《我们》正式上线，这是他们继单曲《Hold You Tight》发行之后的又一温暖治愈系音乐作品。 如果说《Hold You
Tight》想表达的是只属于某一个人的专属情歌，那这首《我们》则是送给每一个努力生活的人。
一起去吧，更远的地方
运行结果如下图所示：
对角巷乐队标题本来是一个链接应该有下划线，但在样式声明中将其取消掉了
伪类选择器：
伪类选择器用于向某选择器添加特殊的效果
伪类书写的最大特点是用冒号（：）表示
链接伪类：
| a:link | 选择所有未被访问的 |
| a:visited |
选择已经被访问过的 |
| a:hover | 选择鼠标指上的 |
| a:active | 选择鼠标长按尚未弹起的 |
链接伪类注意事项：
（1）为了确保生效，请按照link，visited，hover，active顺序书写
记忆口诀：LV包包真hao
（2）因为a链接在浏览器中具有默认样式，实际工作中都需要给链接单独指定样式
实际开发的写法：
a {
color:gray;
}
a:hover {
color:skybule;
}
一个实例的代码如下所示：
在日月的璀璨间闪耀运行的结果如下图所示，当鼠标放在链接上时，颜色便会发生改变：
:focus伪类选择器
:focus伪类用于选择有光标的表单（input）元素
input:focus {
background-color:skybule;
}
复合选择器的总结：
| 选择器 | 作用 | 特征 | 使用情况 | 隔开及其用法 |
| 后代选择器 | 用来选择后代 | 可以是子孙 | 较多 | 符号空格 |
| 子代选择器 | 选择最近一级元素 | 只选择亲儿子 | 少 | 符号大于 |
| 并集选择器 | 选择样式相同的 | 用于集体 | 多 | 逗号 |
| 链接伪类 | 选择不同状态的链接 | 跟链接相关 | 多 | 正常写法 |
| ：focus | 获取光标处 | 跟表单相关 | 少 | input：focus |
今天的主要介绍就是css的一些基础语法学习，更新的有些慢望大家理解，期末了要复习三门数学课了，暑假会持续性更新新知识哒！
