CSS 的介绍

- 日理万妓 2022-01-07 15:27 276阅读 0赞

## 第一章 **的介绍** ##

1.CSS：“层叠样式表”，它是cascading style sheets的缩写，作用就是给HTML标签加表现形式（样式\-显示），如：字体，图片，列表，位置等。

![1508289-20181105160138518-336880416.png][]

在浏览器中可以看到部分：

HTML：“超文本标记语言”，主要作用把内容（文字、图片、视频等）放入网页中\--结构

CSS：“层叠样式表”，主要作用给HTML进行样式的显示，如何的布局\--样式

Javascript：“浏览器的脚本语言”，主要作用给HTML加动态效果（特效）\--行为

CSS特点：

可以非常精准的定位，定位某个或某些标记，给这些标记加样式

HTML和CSS代码分离，减少后期工作量

## 第二章 CSS 基础 ##

2.1 CSS 的基本语法

![1508289-20181105160334771-815375038.png][]

CSS样式表由语法规则组成，由多个语法规则组成样式表

一个CSS语法规则由“选择器”和“声明语句”组成

选择器：如何的精准定位选择到某一个或某些HTML标记的方法，选择器有很多方式

声明语句：就是如何去给HTML标记加样式的属性和值，每个声明语句用分号结束，多个声明语句用花括号扩起来，这个时候就是给某个或某些标记加这个里面的所有样式（属性和值）

案例：

![1508289-20181105160400616-2042658426.png][]

2.2CSS的引入方式

1. 内嵌方式：把CSS样式表通过一对标签写在HTML文件的head标签中，当成HTML的标记来使用，一般情况都是写到head中，不推荐写到别的地方：

语法：

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp;&nbsp;&lt;style type=:”text/css”&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;语法规则 &lt;style&gt; </td> 
 </tr> 
 </tbody> 
</table>

案例：

![1508289-20181105160512691-1487968073.png][]

2.行内方式：把CSS样式成html的一个属性来写，如：<div style=”值”></div>

语法：

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp;&nbsp;&nbsp;&lt;h1 style=”color:red; font-size:50px”&gt;KKK&lt;/h1&gt; </td> 
 </tr> 
 </tbody> 
</table>

案例

![1508289-20181105160717225-216600388.png][]

3.外链方式：把CSS样式表写到一个以css（indx.css)为结尾的文件中，把这个文件引入到某个html文件中，当前文件就会有CSS的效果实现，好处：一个css文件可以给多个HTML文件使用。

语法：

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp;&nbsp;&nbsp;&lt;link rel=”stylesheet”&nbsp;type=”text/css”&nbsp;href=”具体的css文件路径”/&gt; </td> 
 </tr> 
 </tbody> 
</table>

案例：

![1508289-20181105160828838-186022257.png][]

4. @import:可以在一个CSS文件中再次引用CSS

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp;&nbsp;&nbsp;@import url(“要引入的文件”) </td> 
 </tr> 
 </tbody> 
</table>

![1508289-20181105160911414-652393586.png][]

2.3选择器

标准选择器：通配符选择器，标记选择器，类选择器，id选择器

1. 通配符选择器

语法：\*\{color：red\}

注意：通配符是选择上所有的标记，但是少用，ie6不兼容

案例

![1508289-20181105161035963-1843940369.png][]

2. 标记选择器：

说明：直接写标记名来当成选择器来使用，选择器那个标记当前这个页面所有的都会发生改变

语法：标记名\{color：red\}

案例

![1508289-20181105161053823-2137804278.png][]

3. 类选择器：又称“class”选择器

说明：每个HTML标记都有一个公共属性，class属性配合使用的就，这个CSS属性就是给某些某个标记加一类样式

语法：.class属性的值\{color\}

注意：类名可以给不同的标记加上，这时候这些标记统称为一类

再写css选择器是必须加（.）

建议不管是某个或某些标记都是用类的方式

案例：

![1508289-20181105161110552-12546054.png][]

4. id选择器

说明：每个HTML标记都有一个公共的属性id，每个id必须是唯一的

语法：\#id的值\{color：red;\}

注意：id选择器只是给一个标记加样式，一般用于js的动态效果使用。

Id和class是分开使用的，id是js使用的，class是给css使用的

案例：

![1508289-20181105161147475-137458477.png][]

复杂选择器：多元素选择器，后代选择器，子类选择器，伪类选择器

5. 多元素选择器：

说明：把CSS多个基本选择器进行组合，组合成多种的选择方式

语法：div,p,ul,li,class,my\{color:red\}

注意：大型的网站一般都是用多元素来替代通配符

每个选择器都用（,）隔开

![1508289-20181105161218363-1010566749.png][]

6. 后代选择器

说明：在制作网站时会出现“嵌套”的形式，有可能是多级，而且每个多级标记相同，这个时候就可以选择某个标记中的某个内容

语法：第一代 第二代 第三代\{color:red;\}

注意：如果某一代有相同的标记，需要每代都写清楚

p标签中不能嵌套一些块元素

案例：

![1508289-20181105161240616-331988731.png][]

1. 子类选择器

说明：就是选择一代（或者子孙）

语法：父类 （选择器）>子类 （选择器）

案例：

![1508289-20181105161310400-744896441.png][]

7.伪类选择器

说明：就是给超链接加样式的方法<a href=”\#”></a>

Link:：默认状态

Hover:放上状态

Active：当点击时的状态（不放手）

Visited：访问过的状态

语法： 选择器：状态\{color :red;\}

注意：一般是默认状态和访问过的状态设置成一样的效果

所有的标记都可以加伪类选择器

案例：

![1508289-20181105161336975-1432804316.png][]

**第三章：CSS常用的属性**

一：文字属性

<table style="width:592px;"> 
 <tbody> 
 <tr> 
 <td> 属性名 </td> 
 <td> 描述 </td> 
 <td> 属性值 </td> 
 </tr> 
 <tr> 
 <td> Font-size </td> 
 <td> 文字大小 </td> 
 <td> 像素（px)em(倍数)百分比（%） </td> 
 </tr> 
 <tr> 
 <td> Font-family </td> 
 <td> 字体类型 </td> 
 <td> 宋体，微软雅黑，黑体等 值可以是一个或多个，用逗号隔开 </td> 
 </tr> 
 <tr> 
 <td> font-style </td> 
 <td> 斜体 &nbsp; </td> 
 <td> Italic（斜体） </td> 
 </tr> 
 <tr> 
 <td> Font-weight </td> 
 <td> 加粗 </td> 
 <td> Bold（加粗）100-900 </td> 
 </tr> 
 </tbody> 
</table>

案例：

![1508289-20181105161528598-1994631769.png][]

二：文本属性

<table> 
 <tbody> 
 <tr> 
 <td> 属性名 </td> 
 <td> 描述 </td> 
 <td> 属性值 </td> 
 </tr> 
 <tr> 
 <td> Color </td> 
 <td> 文本颜色 </td> 
 <td> 3种 rgb（255，255，255） 十六进制（#cccccc) 单词(yellow) </td> 
 </tr> 
 <tr> 
 <td> Text-align </td> 
 <td> 文本水平对齐方式 </td> 
 <td> Left|center|right </td> 
 </tr> 
 <tr> 
 <td> Text-decoration </td> 
 <td> 文本修饰线 </td> 
 <td> Underline(下划线)overline(上划线)line-through（删除线） none(无 ) </td> 
 </tr> 
 <tr> 
 <td> line-height </td> 
 <td> 行高 </td> 
 <td> 设置当前行的高度，目的的就是让网文本上下居中，高度和行高一致 </td> 
 </tr> 
 <tr> 
 <td> Text-indent </td> 
 <td> 首行缩进 </td> 
 <td> 数值（px）如果是12号字，基本是翻倍 </td> 
 </tr> 
 <tr> 
 <td> Letter-spacing </td> 
 <td> 字符间距 </td> 
 <td> 数值（px） </td> 
 </tr> 
 <tr> 
 <td> Word-spacing </td> 
 <td> 单词间距 </td> 
 <td> 数值：(px) </td> 
 </tr> 
 </tbody> 
</table>

案例：

![1508289-20181105161549914-1244525466.png][]

三：尺寸使用

说明：其实就是元素的宽和高，任何标记元素都有宽和高

<table> 
 <tbody> 
 <tr> 
 <td> 属性名 </td> 
 <td> 描述 </td> 
 <td> 属性值 </td> 
 </tr> 
 <tr> 
 <td> width </td> 
 <td> 宽 </td> 
 <td> 像素（px）百分比（%） </td> 
 </tr> 
 <tr> 
 <td> Height </td> 
 <td> 高 </td> 
 <td> 像素（px）百分比（%） </td> 
 </tr> 
 <tr> 
 <td> Px </td> 
 <td> 像素 </td> 
 <td> 浏览器都是由像素点（显示贞） </td> 
 </tr> 
 <tr> 
 <td colspan="3"> 注意：块元素可以设置宽和高，行内元素设置宽和高是不起作用的，高不设内容自动撑出来 </td> 
 </tr> 
 </tbody> 
</table>

案例：

![1508289-20181105161610325-205815574.png][]、

四：列表属性

说明：对ul,ol,li,dl,dt,dd进行样式的设置

<table> 
 <tbody> 
 <tr> 
 <td> 属性名 </td> 
 <td> 描述 </td> 
 <td> 属性值 </td> 
 </tr> 
 <tr> 
 <td> last-style-type </td> 
 <td> 列表的符号样式类型 </td> 
 <td> None </td> 
 </tr> 
 <tr> 
 <td colspan="3"> <img src="https://img2018.cnblogs.com/blog/1508289/201811/1508289-20181105162126495-589609969.png" alt=""> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> List-style-type </td> 
 <td> 列表图片 </td> 
 <td> Url 如 list-style-type：url(../01.jpg) </td> 
 </tr> 
 <tr> 
 <td> List-style-position </td> 
 <td> 列表符号的位置只对li </td> 
 <td> Inside &nbsp;outside </td> 
 </tr> 
 <tr> 
 <td> list-style </td> 
 <td> 把三个属性的值都放到一个属性中 </td> 
 <td> None url &nbsp;inside 如果三个属性都有按照上面的顺序 没有的可以不写 &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

案例

![1508289-20181105161720937-230412526.png][]

TIP：边框

Border 粗细 样式 颜色 如：border：1px dashed red

Border-bottom: 下边框

五：背景属性

<table> 
 <tbody> 
 <tr> 
 <td> 属性名 </td> 
 <td> 描述 </td> 
 <td> 属性值 </td> 
 </tr> 
 <tr> 
 <td> Background-color </td> 
 <td> 背景颜色 </td> 
 <td> 16进制 </td> 
 </tr> 
 <tr> 
 <td> Background-image </td> 
 <td> 背景图片 </td> 
 <td> Url </td> 
 </tr> 
 <tr> 
 <td> Backtround-repeat </td> 
 <td> 背景平铺方式 </td> 
 <td> no-repeat repeat-x repeat-y </td> 
 </tr> 
 <tr> 
 <td> Background-position </td> 
 <td> 内景定位 </td> 
 <td> x轴和Y轴定位 如position：left top 设置左右和上下 </td> 
 </tr> 
 <tr> 
 <td colspan="3"> 定位方式： 1.&nbsp;单词定位方式：left|center|right &nbsp;top|center|bottom 单词定位可以理解为九宫格 
 <table> 
 <tbody> 
 <tr> 
 <td> Left top </td> 
 <td> Center top </td> 
 <td> Right top &nbsp; </td> 
 </tr> 
 <tr> 
 <td> Left center </td> 
 <td> Center center </td> 
 <td> Right center </td> 
 </tr> 
 <tr> 
 <td> Left bottom </td> 
 <td> Center &nbsp;bottom </td> 
 <td> Right bottom </td> 
 </tr> 
 </tbody> 
 </table>&nbsp; 2.&nbsp;像素定位方式：background-position：50px 100px; &nbsp;离左边50 离上面100 3.&nbsp;百分比方式：background-position：10% 20% 离左边 离右边 4.&nbsp;混合方式： background-position：center 100px &nbsp; </td> 
 </tr> 
 <tr> 
 <td> Background-attachment </td> 
 <td> 背景固定 </td> 
 <td> Scroll（滚动 默认）fixed（固定） </td> 
 </tr> 
 <tr> 
 <td> Background </td> 
 <td> 简写形式 </td> 
 <td> 颜色 图片 平铺 定位固定 其中的选项可以不写 </td> 
 </tr> 
 </tbody> 
</table>

案例：

![1508289-20181105161755025-668582871.png][]

精灵图：

说明：就是把很多的小图片放入到一个大的背景图中，这个图称为“精灵图”。

在制作网页时必须是背景图

![1508289-20181105161820222-429204249.png][]

案例：

转载于:https://www.cnblogs.com/yueyuez/p/9909775.html

[1508289-20181105160138518-336880416.png]: /images/20211220/89c81e7ae03f42dd98c2b4d4a171a647.png
[1508289-20181105160334771-815375038.png]: /images/20211220/599e591e6372485f9464bd2899a4dd88.png
[1508289-20181105160400616-2042658426.png]: /images/20211220/68fc11cbc2d74831b1cf16e1193b9caf.png
[1508289-20181105160512691-1487968073.png]: /images/20211220/1aac8958466f43a08035583ee63c92b7.png
[1508289-20181105160717225-216600388.png]: /images/20211220/d59146f4cb434301b28f380a336d850c.png
[1508289-20181105160828838-186022257.png]: /images/20211220/aad1f6c542894eb39e8a1b53516b4e67.png
[1508289-20181105160911414-652393586.png]: /images/20211220/56b3858f6d204f36a27e7db313e99412.png
[1508289-20181105161035963-1843940369.png]: /images/20211220/323563d9203a4982a2dda6016fa3f732.png
[1508289-20181105161053823-2137804278.png]: /images/20211220/ca4fd2b44b0b48aea95b0e3311b6d00b.png
[1508289-20181105161110552-12546054.png]: /images/20211220/f9ba131be5d543beb39b57e4e568c942.png
[1508289-20181105161147475-137458477.png]: /images/20211220/46a1e3ef083b4be6ba18df223945f4f1.png
[1508289-20181105161218363-1010566749.png]: /images/20211220/7cab491fb1394ad58d83047d387885ba.png
[1508289-20181105161240616-331988731.png]: /images/20211220/b92a6863c21348268f4ec2741a556bec.png
[1508289-20181105161310400-744896441.png]: /images/20211220/c0f40bcd0e7e46b8b9e8b4b021773509.png
[1508289-20181105161336975-1432804316.png]: /images/20211220/3388f4c5ad2a46229893c06ce280e20a.png
[1508289-20181105161528598-1994631769.png]: /images/20211220/8c2db865afbd4aae8e0e62520f404975.png
[1508289-20181105161549914-1244525466.png]: /images/20211220/e9aa0031c2d544efa6324d037e1dc2b4.png
[1508289-20181105161610325-205815574.png]: /images/20211220/3e976a00f18c462c9654771aac09e541.png
[1508289-20181105161720937-230412526.png]: /images/20211220/0a5e3b949b8b4e9cab08d2c67628bde9.png
[1508289-20181105161755025-668582871.png]: /images/20211220/7169cf69bf5b4fc1b96b3220066d5399.png
[1508289-20181105161820222-429204249.png]: /images/20211220/0613fc77601e4ec4879d6d713d768851.png