CSS基础｜青训营笔记包括了CSS的一些基本的语法以及字体属性，文本属性和一些基础的选择器等还有就是CSS的引用以及

一、CSS的语法规范

1.语法规范：

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器：是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性和属性之间用英文：分开
尽量用展开式的风格，每一个属性占一行
空格
1. 属性前，：后要有一个空格
2. 选择器与花括号之间要保留一个空格

2.书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow (先写display)
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / white-space / break-word
其他属性：content / cursor / border-radius / border-shadow / background:linear-gradient...

二、选择器

1.选择器的作用

根据不同的需求把不同的标签选出来

2.选择器的分类

分为基础选择器和复合选择器两个大类

·基础选择器：

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器，类选择器，id选择器，通配符选择器
1. 标签选择器：标签选择器：某一类全选
2. 类选择器：单独选一个或几个标签
```
<style> 
    .red {
        color: red;
    }
</style>    
<body>
    <div class="red">
        红色
    </div>
    <div>
        没有特殊颜色
    </div>
</body>
```
  类选择器要用"."定义类名，后面跟着类的名字，调用时用class="类名"
  
  类名可以用"-"连接 .super-red
  
  一个标签可以调用多个类选择器---- >开发过程中尽量多开类，然后后期有问题修改时只改变一个类选择器就能将一个属性同一修改了
3. id选择器：
```
<style>
    #red {
        color: red;
    }
</style>    
<body>
    <div id="red">
        红色
    </div>
    <div>
        没有特殊颜色
    </div>
</body>
```
  id选择器要用"#"定义，后面跟着id选择器的名字，调用时用id="id选择器名字"
  
  特点：只能调用一次，也就是说是一次性的，一个标签调用过后别的标签就不允许使用了。一般与js搭配
4. 通配符选择器
  
  在css中，通配符选择器使用"*"定义，它表示选取页面中所有元素（标签）
```
* {
    属性1：
    属性2：
    ......
}
```

三、字体属性

1.字体font-family

font-family: 'Micorosoft Yahei'

font-family: '微软雅黑'

font-family: '微软雅黑' '宋体' '黑体'

注意：

字体可以加多个，其使用规则是优先前面的使用，如果电脑中没有装前面的字体，就用后面的，以此类推，直到找到电脑装有的字体或者全部没装就用浏览器的默认字体。

2.字体大小font-size

font-size: 20px

注意：

别忘了加px

3.字体粗细font-weight

font-weight: bold

其属性有：normal, bold, lighter, bolder

还有100~900的整百

400表示normal 700表示bold 注意不加单位

4.文字样式font-style

font-style: normal

其属性有：normal (标准)，italic (斜体)

5.font的复合写法

注意： 一定要按照规定的顺序写

即： font: font-style font-weight font-size/line-weight font-family;

例：font: italic 700 16px 'MIcrosoft Yahei';

line-weight 是行于行之间的间距，px是单位

四、文本属性

CSS Text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

1.文本颜色color

color 属性用于定义文本的颜色

cllor: pink;

颜色表示： 英文单词、十六进制、rgb码(red, green, blue)

2.对齐文本text-align

text-align 属性用于定义文本的水平对齐方式（当然，图片等居中也用这个）

text-align: center; 或 text-align: right

3.装饰文本text-decoration

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线，上划线，删除线等

text-decoration: underline
text-decoration: overline
text-decoration: line-through
text-decoration: none 表示没有任何修饰

4.缩进文本text-indent

文本第一行缩进多少像素（px）或多少个文字（em）的大小

text-indent: 20px;

text-indent: 2em;

5.行间距line-height

line-height 属性用于设定行高文字的高度默认为16px，当行高大于文字高度时，多出的行高就变成了空白，均匀分布在文字上下，也就变成了行间距。

line-height: 16px;

五、CSS引入方式

1.CSS的三种样式表

按照CSS样式书写的位置（或者引入的方式），CSS杨样式表可以分为三大类：

行内样式表（行内式）:<div style="color: pink; font-size: 10px;"> 粉红色的回忆 <div> 直接在标签中搞一个style属性
内部样式表（嵌入式）: 写到html文件内部，将所有的css代码抽取出来，单独放到<style>标签中。理论上css代码可以放在HTML中的任何地方，但是一般放在<head>中。
外部样式表（链接式）: 在外面单独创建一个css文件，之后把css文件引入HTML文件中。要用link标签引入css文件 <link rel="stylesheet" href="css文件路径">

六、element语法

1.快速生成HTML结构语法

标签名+tab	生成对应标签
*标签名n+tab**	生成n个标签
标签名>标签名	生成父子关系标签
标签名+标签名	生成兄弟关系标签
标签名.类选择器名或标签名#id选择器名	生成对应选择器的标签
*$自增符号，在n的式子中，第n个这个就是n**
标签名{文本内容}	含有文本内容的标签

2.快速生成CSS语法

宽：w100+tab 高：h100+tab 等等

七、CSS的复合选择器

1.什么是复合选择器

复合选择器建立在基础选择器之上，对基本选择器进行组合形成的

复合选择器可以更精准，更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

2.后代选择器

作用：如其名，选择某个选择器的后代

语法：父亲选择器儿子选择器 {......}

当然，后代选择器可以是所有基础选择器的组合

比如这为类选择器与标签选择器组合
<style>
    .aaa li{
        color: red;
    }
</style>
<ul class = "aaa">
    <li>132</li>
    <li>123</li>
    <li>123</li>
</ul>
<ul>
    <li>12346</li>
</ul>


当然，后代选择器会考虑所有后代，例： 下面会把两个a标签都变红，而子选择器则不会选择孙子
<style>
    div a {
        color: red;
    }
</style>
<div>
    <a>123123</a>
    <div>
        <a>1231231</a>
    </div>
</div>

3.子选择器

作用：如其名，选择某个选择器的亲生儿子，注意与后代选择器区分，子选择器不会考虑孙子等

语法：选择器名>选择器名 {......}

4.并集选择器

作用：可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

语法：选择器1,选择器2 {.......}

当然，并集选择器可以选择五数组选择器去定义，不一定是两个。

5.伪类选择器

作用：伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或者选择第1个，低n个元素。

语法：用：表示

链接伪类选择器

名字	作用
a:link	选择所有未被访问过的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标所悬停在的链接
a:active	选择鼠标正在按下的链接

注意： 为了确保生效，请按照LVHA的顺序声明：link visited hover active

focus伪类选择器

作用：foucs伪类选择器用于选取获得焦点的表单元素。(哪个表单有光标就选择哪个)

焦点就是光标，一般情况下类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus {......}

-------->想要input text输入时没有黑框直接用

outline: none; 就行，不用focus味蕾选择器

八、CSS的元素显示模式

1.什么是元素显示模式

元素显示模式就是元素（标签）以什么样的方式进行显示，比如
自己占一行，比如一行可以放福哦个。
HTML元素一般分为块元素和行内元素两种类型。

2.元素显示模式转换dispaly

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性

比如想要增加链接的触发范围。

把元素转换成块元素： display:block;
把元素转换成行内元素： display: inline;
把元素转换成行内块元素：dispaly: inline-block;

CSS基础 ｜ 青训营笔记