CSS3（一）

（一）CSS简介

CSS主要用来美化页面、布局页面

1.HTML的局限性

HTML主要是做结构，显示元素内容。只关注内容，但是丑。虽然可以做简单的样式，但是非常臃肿和繁琐

2.CSS网页的美容师

CSS是层叠样式表的简称，有时也称为CSS样式表或级联样式表，CSS也是一门标记语言

CSS主要用于设置HTML页面的文本内容（字体、大小、对齐方式）图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式

CSS最大的价值：由HTML专注去做结构呈现，样式交给CSS，即结构与样式分离

3.CSS语法结构

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

<style>
    /* 选择器 { 样式 } */
    /* 选择器：给谁改样式 { 样式：改什么样式 } */
    /* 选择器：p 段落 { 样式：字体颜色和大小 } */
    p {
        /* 修改文字的颜色为红色 */
        color: red;
        /* 修改字体大小为20像素 */
        font-size: 20px;
    }
</style>

PS：

1.选择器是用于指定CSS样式的HTML标签，花括号内是对该对象的设置的具体样式

2.属性与属性值之间以键值对的形式出现，用：分割

3.属性与属性之间用；分割

4.CSS代码风格

1）样式格式书写

利用展开式的风格书写

 <style>
     p {
		/* 展开式的风格 */
        color: red;
        font-size: 20px;
    }
</style>

2）样式大小写风格

利用小写来书写代码

3）样式空格风格

在属性值前面，冒号的后面，保留一个空格

选择器与 { }之间保留一个空格

（二）CSS基础选择器

1.CSS选择器的作用

选择器（选择符）的作用就是根据不同的需求把不同的标签选出来，简单来说就是选择标签用的

2.选择器的分类

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

基础选择器是由单个选择器组成的，包括标签选择器、类选择器、id选择器和通配符选择器

3.标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名分类，为页面中的某类标签指定CSS样式

标签选择器可以把某一类标签全部选择出来，比如所有的

优点：能够为页面中同类型的标签统一设置样式

缺点：不能差异化设置，只能选择同一类的全部的标签

标签名{
		属性1: 属性值1;
		属性2: 属性值2;
		...
}

4.类选择器

类选择器能够实现差异化选择，可以单独选择一个或者几个标签

类选择器需要用class属性来调用

.类名{
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

<!--类选择器的设置-->
<style>
    /* 类选择器口诀：样式点定义，结构类定义，一个或多个，开发最常用 */
    .red {
        color: red;
    }
</style>

<!--类选择器的调用-->
<!--无序列表-->
<ul>
        <li class="red">许嵩</li>
        <li>羽肿</li>
        <li class="red">新裤子</liclass>
        <li>许巍</li>
        <li>房东的猫</li>
</ul>

PS：

1.类选择器使用 . (英文点号) 进行标识，后面紧跟自定义的类名（不可以用标签名来命名）

2.可以理解为给标签起了一个名字来表示

3.长的名称或词组可以用-来为类选择器命名，例如 .red-bord{ }

4.不要使用纯数字或者中文来命名，尽量使用英文

5.命名要有意义，尽量让别人一眼就知道这个类名的目的

6.参考命名规则来命名

多类名

我们可以给一个标签指定多个类名，从而达到更多的选择的目的

可以把一些标签元素相同的样式放到一个类里面

这些标签可以调用这个公共的类，然后再调用自己独有的类

从而节省了CSS代码，统一修改也非常方便

<div class="red font">
    亚瑟
</div>

PS：

1.在标签class属性中可以写多个类名

2.多个类名之间要用空格分开

5.id选择器

id选择器可以标有特定的id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义

#id名{
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

<style>
     /* 口诀：样式#定义，结构id调用，只能调用一次，
    #nav {
        color: red;
    }
</style>

<div id="nav">迈克尔.杰克逊</div>

PS：

id属性只能在每个HTML文档中出现一次

id选择器与类选择器的区别

1.类选择器好比是人的名字，一个人可以有很多名字，同一个名字可以被多个人使用

2.id选择器好比是人的身份证号码，不得重复

3.id选择器与类选择器最大的区别是在使用次数上

4.类选择器在修改样式中最常用，id选择器一般是用于页面唯一性的元素上，经常和JavaScript配合使用

6.通配符选择器

在CSS中，通配符选择器使用“ * ”定义，它表示选取页面中所有元素，将页面中所有元素全部自动修改

*{
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

<style>
        * {
            color: red;
            font-size: 35px;
        }
/* *这里将html body div span ul li 全部改为了红色 */
</style>

PS：

1.通配符选择器不需要调用，自动就给所有元素修改使用样式

2.在特殊情况下才使用

（三）设置字体样式

CSSFonts属性用于定义字体系列、大小、粗细和文本样式（如斜体）

1.字体系列

CSS中使用font-family属性定义文本的字体系列

<style>
    h2 {
        color: red;
        font-family: 'Microsoft Yahei';
    }
    p {font-family: "微软雅黑";}
    div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
</style>

PS：

1.各个字体之间必须使用英文状态下的逗号隔开

2.一般情况下，如果有空格隔开的多个单词组成的字体，要加引号

3.尽量使用系统默认自带的字体，保证用户在任何浏览器中都能正确显示

4.在日常开发中通常是给body定义字体常见字体有'Microsoft YaHei' ，tahoma，Arial，'Hiragino Sans GB'

2.字体大小

CSS中使用font-size属性定义文本大小

px——像素

<style>
    body {
        font-size: 30px;
    }

    /* 标题标签比较特殊需要单独指定文字大小 */
    h2 {
        font-size: 40px;
    }
</style>

PS：

1.谷歌浏览器默认字体大小为16px

2.不同浏览器可能显示的字号大小不一致，我们尽量给一个明确的大小，不要默认大小

3.可以给body指定整个页面文字的大小

3.字体粗细

CSS中使用font-width属性定义文本粗细

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
"number"	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold，后面不加单位。
inherit	规定应该从父元素继承字体的粗细。

<style>
    .bold {
    /* font-weight: bold; */
    font-weight: 700;
    /* 700后没有单位，等价于加粗 */
	/* 实际开发中更提倡使用数字来表示加粗或者变细 */
    }
</style>

4.文字样式

CSS中使用font-style属性定义文本样式

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

<style>
    /* 让正常的文字倾斜 */
    p {
        font-style: italic;
    }

    /* 让倾斜的文字正常 */
    em {
        font-style: normal;
    }
</style>

5.字体的复合属性

字体属性可以综合来写，这样更加节约代码

<style>
    /* 想要div的文字变  倾斜 加粗 字号16px 微软雅黑 */
    div {
        /*
        一般写法
        font-style: italic;
        font-weight: 700;
        font-size: 16px;
        font-family: "Microsoft YaHei";
        */
        /* 复合属性 */
        /* 书写顺序格式   font: font-style font-weight font-szie/line-height font-family */
        font: italic 700 16px/20px "Microsoft YaHei";
    }
</style>

PS：

1.使用font复合属性时，必须按照上述语法格式书写，不能颠倒顺序，并且各属性间以空格隔开

2.不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则复合属性将不起作用

（四）设置文本样式

CSS text属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文字、文本缩进、行间距等

1.文本的颜色

color属性定义文本的颜色

值	描述
color_name	规定颜色值为颜色名称的颜色（比如 red）。
hex_number	规定颜色值为十六进制值的颜色（比如 #ff0000）。（最常用）
rgb_number	规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。

<style>
     div {
         /* color: deeppink; */
         /* color: #ff0000; */
         color: rgb(255,0,0);
     }
</style>

2.对齐文本

CSS text-align属性可以定义文本内容的水平对齐方式

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。

<style>
    h1 {
         /* 本质是让h1盒子里面的文字水平居中对齐 */
    	text-align: center;
    }
</style>

3.装饰文本

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

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。

 <style>
     div {
         /* 添加下划线 */
         /* text-decoration: underline; */
         /* 添加删除线 */
         /* text-decoration: line-through; */
         /* 添加上划线 */
         text-decoration: overline;
     }
     a {
         /* 取消链接默认的下划线 */
         text-decoration: none;
     }
</style>

4.文本缩进

CSS text-indent 属性规定文本块中首行文本的缩进。通常是段落的首行缩进。

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有指定文字大小，则会按照父元素的一个文字大小

<style>
    p {
        /*首行缩进35像素*/
        /*  text-indent: 35px; */
        /*首行缩进两字符*/
       text-indent: 2em;
    }
</style>

PS：允许使用负值。如果使用负值，那么首行会被缩进到左边。

5.行间距

CSS line-height 属性设置行间的距离（行高）。

行高由三部分组成：上间距，文本高度，下间距

改变行高时不会改变文本高度，上间距和下间距相等

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。

<style>
    p {
        line-height: 20px;
    }
</style>

6.单行文字的垂直居中，居上，居下

CSS中没有垂直居中的标签，但是只要让文字行高等于盒子行高就可实现垂直居中的效果，让文字行高小于盒子行高就可实现垂直居上的效果，让文字行高大于盒子行高就可实现垂直居下的效果

7.direction控制文字流向

• ltr 从左向右
• rtl 从右向左 + unicode-bidi(重写): bidi-override(按照direction的方式进行重写);

direction: rtl;

8.文字大小写

text-transform控制文字大小写

• capitalize 所有首字母大写
• uppercase 所有字母大写
• lowercase 所有字母小写

text-transform: lowercase;

9.字符间距

letter-spacing字符间距

letter-spacing: 0px;

10.字间距

word-spacing 字间距

word-spacing: 0px;

（五）CSS三种引入方式

1.CSS的三种样式表

按照CSS样式书写位置的不同，CSS样式表可分为三类：行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）

2.内部样式表

内部样式表是写到HTML页面的内部，是将所有的CSS代码抽取出来，单独放到一个style标签中

<style>
    /* 选择器 { 样式 } */
    /* 选择器：给谁改样式 { 样式：改什么样式 } */
    /* 选择器：p 段落 { 样式：字体颜色和大小 } */
    p {
        /* 修改文字的颜色为红色 */
        color: red;
        /* 修改字体大小为20像素 */
        font-size: 20px;
    }
</style>

PS：

1.style标签理论上可以放到HTML文档中的任何一个地方，但是通常会放到head标签中

2.这种方式可以方便控制当前整个页面的元素样式设置

3.代码结构非常清晰，但并没有实现结构与样式的完全分离

3.行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式，适合修改简单样式

<p style="color: red;font-size: 20px;">乱步老爷子一个很有趣的小短篇</p>

PS：

1.style其实就是元素标签的属性

2.属性值要写在双引号中间，写法要符合CSS规范

3.可以控制当前的标签设置样式

4.书写繁琐没有体现结构与样式分离的思想，不推荐大量使用

5.使用行内样式表设定CSS，通常也被称为行内式引入

4.外部样式表

实际开发中都是使用外部样式表，适合于样式比较多的情况。核心是将样式单独写到CSS文件中，之后把CSS文件引入HTML页面中使用

引入外部样式表

1.新建一个后缀名为.css的文件，把所有的CSS代码都放到此文件中

2.在HTML页面中，使用link标签引入这个文件

<link rel="stylesheet" href="CSS文件路径">

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

（六）使用chrome调试工具调试样式

chrome浏览器提供了一个非常好用的调试工具，可以用来调试HTML结构和CSS样式

1.打开调试工具

打开chrome浏览器，按下F12键或者右键选择检查

2.使用调试工具

CTRL+鼠标滚轮可以放大开发工具代码大小

左边是HTML元素，右边是CSS样式

右边CSS样式可以改动数值（左右箭头或者直接插入）和查看颜射

CTRL+0复原浏览器大小

如果点击元素，发现右侧没有引入样式，极可能是类名或者样式引入错误

如果由样式错误，但样式前面有黄色的感叹号，则是样式属性书写错误