前端学习之CSS基础第二天

绝地灬酷狼 2022-05-10 05:04 189阅读 0赞

#                                                         CSS基础 #

--------------------

### 复习昨天知识 ###

1.  **Css层叠样式表（级联样式表）**

Css的作用就是美好html标签。

** 2.书写位置**

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> 属性 </td> 
 <td style="vertical-align:top;width:164.2pt;"> 解释 </td> 
 <td style="vertical-align:top;width:164.25pt;"> 值 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> font-style </td> 
 <td style="vertical-align:top;width:164.2pt;"> 文本风格 </td> 
 <td style="vertical-align:top;width:164.25pt;"> Normal&nbsp; |&nbsp;&nbsp; italic </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> font-weight </td> 
 <td style="vertical-align:top;width:164.2pt;"> 文本粗细 </td> 
 <td style="vertical-align:top;width:164.25pt;"> 700&nbsp;&nbsp; |&nbsp;&nbsp; bold </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> font-family </td> 
 <td style="vertical-align:top;width:164.2pt;"> 字体 </td> 
 <td style="vertical-align:top;width:164.25pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> font-size </td> 
 <td style="vertical-align:top;width:164.2pt;"> 文字大小 </td> 
 <td style="vertical-align:top;width:164.25pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> line-height </td> 
 <td style="vertical-align:top;width:164.2pt;"> 行高 </td> 
 <td style="vertical-align:top;width:164.25pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> color </td> 
 <td style="vertical-align:top;width:164.2pt;"> 文本颜色(前景色) </td> 
 <td style="vertical-align:top;width:164.25pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> Background-color </td> 
 <td style="vertical-align:top;width:164.2pt;"> 背景颜色 </td> 
 <td style="vertical-align:top;width:164.25pt;"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> text-align </td> 
 <td style="vertical-align:top;width:164.2pt;"> 内容的水平的对齐方式 </td> 
 <td style="vertical-align:top;width:164.25pt;"> Left&nbsp; |&nbsp; right&nbsp; | center </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> text-indent </td> 
 <td style="vertical-align:top;width:164.2pt;"> 首行缩进 </td> 
 <td style="vertical-align:top;width:164.25pt;"> 2em </td> 
 </tr> 
 </tbody> 
</table>

### 选择器 ###

选择器是一个选择器谁的过程。

**1、基础选择器**

◆标签选择器

标签(属性:值;)

◆类选择器

.    自定义类名(属性:值;)

特点:谁调用，谁生效.

一个标签可以多个类选择器。

多个标签可以调用同一个类选择器。

★类选择器命名规则：

不能用纯数字或者数字开头来定义类名。

不能使用特殊符号(\_ 除外)来定义类名。

不推荐使用汉字来定义类名。

不推荐使用标签名、属性、属性值来定义类名。

◆id选择器

\#自定义名\{属性:值;\}

特点:谁调用，谁生效。

一个标签只能调用一个id选择器。

一个id选择器在一个页面只能调用一次。

◆通配符选择器

\*\{属性:值；\}

**    2、复合选择器**

◆交集选择器

标签+类(id)选择器\{属性:值;\}

特点:即是某个标签，而且这个标签调用了类（id）选择器

◆后代选择器

选择器+空格+选择器\{属性:值;\}

后代选择器的基本要求：包含(嵌套)关系。

特点:  父在前,子在后。

无限制隔代。

只要能代表这个标签，可以是标签选择器、类选择器、id选择器自由组合。

◆子代选择器

选择器>选择器\{属性:值;\}

特点：选择的是直接下一代.

◆并集选择器

选择器+,+选择器+,+选择器\{属性:值;\}

**    3、样式表书写位置**

◆内嵌式写法

<head>
 <style type=”text/css”>
 样式表写法
 </style>
 </head>

◆外链式写法

写在head里，<link rel=”stylesheet” href=”1.css”>

![70][]

◆行内样式表

![70 1][]

◆三种写法特点:

★内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。

★外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。

★行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。  （不推荐使用）

### 4、标签分类(显示方式) ###

1.  **块元素**

典型代表,Div,h1-h6,p,ul,li

特点: ★独占一行

★可以设置宽高

★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。

**    2.行内元素**

典型代表 span  ,a,  ,strong , em,  del,  ins

特点：★在一行上显示

★不能直接设置宽高

★元素的宽和高就是内容撑开的宽高。

**    3.行内块元素(内联元素)**

典型代表  input  img

特点：★在一行上显示

★可以设置宽高

**    4.块元素、行内元素**

◆块元素转行内元素

display:inline;

![70 2][]

◆行内元素转块元素

display:block;

![70 3][]

◆块和行内元素转行内块元素

display:inline-block;

![70 4][]

### 5、css三大特性 ###

**    1.层叠性**

当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

![70 5][]

**    2. 继承性**

继承性发生的前提是包含（嵌套关系）

★文字颜色可以继承

★文字大小可以继承

★字体可以继续

★字体粗细可以继承

★文字风格可以继承

★行高可以继承

总结：文字的所有属性都可以继承。

◆特殊情况：

h系列不能继承文字大小。

a标签不能继承文字颜色。

**    3.优先级**

默认样式<标签选择器<类选择器<id选择器<行内样式<!important

0               1             10            100          1000      1000以上

![70 6][]

**◆优先级特点**

**★继承的权重为0**

**★权重会叠加**

### 六、链接伪类 ###

a:link\{属性:值;\}  a\{属性:值\}效果是一样的。

a:link\{属性:值;\}       链接默认状态

a:visited\{属性:值;\}     链接访问之后的状态

a:hover\{属性:值;\}      鼠标放到链接上显示的状态      a:active\{属性:值;\}      链接激活的状态

：focus\{属性:值；\}     获取焦点

![70 7][]

**    1、文本修饰**

text-decoration: none  |   underline   |     line-through

### 七、背景属性 ###

![70 8][]

★方位值只写一个的时候，另外一个值默认居中。

![70 9][]

★写2个方位值的时候，顺序没有要求。

![70 10][]

★写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。

5.Background-attachment   背景是否滚动   scroll  |  fixed

6.背景属性连写

![70 11][]

★：连写的时候没有顺序要求，url为必写项。

如果有疑问联系博主：y19970821ywty

![70 12][]

要用到的工具，视频教程，关注公众号（Java学习之乐）直接免费获取：

![70 13][]

[70]: /images/20220510/65b8489e52ad44a0944f14429e0e8931.png
[70 1]: /images/20220510/54df9482a47f4511b05da75c29a81785.png
[70 2]: /images/20220510/df7c951e922841d592c203033e558619.png
[70 3]: /images/20220510/f886d486d5ba4dff8fab27b552477acc.png
[70 4]: /images/20220510/61a575f08ab54bde918014c0630634a1.png
[70 5]: /images/20220510/4e5692df181e4ad983c75b11fd31fb3c.png
[70 6]: /images/20220510/fdd086674d2e4080a890997b261ac824.png
[70 7]: /images/20220510/c7db4c59f4274a139ac3f29a03296ccf.png
[70 8]: /images/20220510/0852d221f77f4085bb949e160377694c.png
[70 9]: /images/20220510/076a69de5f5e482fb3e3500c023b9337.png
[70 10]: /images/20220510/2cd82aeee22646adac9a731c4ca47655.png
[70 11]: /images/20220510/68514ed722d842d48dd04e6b8b06cfba.png
[70 12]: /images/20220510/443903917bd4429fb36d4720e91c05f1.png
[70 13]: /images/20220510/e2e95e8b3c76470aadd1fdc584e4b0db.png