CSS基础（一）day3_css h1-CSDN博客

本文链接：https://blog.csdn.net/laodaer/article/details/128192640

1. CSS初识

CSS(Cascading Style Sheets的缩写)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。、

1.1 CSS样式规则

使用CSS时，需要了解CSS样式规则，具体格式如下：

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

h1 {  /*选择器*/
    color: red;	/*声明*/
    font-size: 14px;  /*声明*/
}

一般都由键值对形势出现

在上面的样式规则中：

选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
属性和属性值之间以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“：”连接。
多个键值对之间使用英文“；”区分。

2. CSS引入方式

2.1 行内样式

直接在标签的属性中使用style声明，在style属性中添加css声明即可。

由于要将表现（样式）和内容（结构）混杂在一起，行内样式表会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

<p style="color: red;">买了很多的热狗！selfish</p>

直接在写在标签里面的样式，样式作用在标签上

2.2 内联样式

定义在head或body标签中,使用style标签.

当单个文档需要特殊的样式时，就应该使用内部样式表。

初学时常用内联样式

/*内部定义的style样式*/
<style type="text/css">
	h1 {
        background-color: deeppink;
        color: blue;
	}
</style>

2.3 外部样式表

定义在外部的css文件中，需要在head中引入相应的css文件

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link> 标签链接到样式表。

使用link来导入css文件：

/*关联外部的css样式文件*/
<link type="text/css" rel="stylesheet" href="../css/test.css" />

type:定义链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径。

css文件中：定义CSS样式

h1{
	background-color: rosybrown;
	color: #0000FF;	
}

三种样式的总结：

	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现结构与样式相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

3种样式表的优先级：

1、行内样式表 > 内部样式表 = 外部样式表

2、当内部样式表和外部样式表同时存在时，采用 就近原则 来使用样式

3. 文字属性

3.1 font-size：字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

tips:

现在网页中普遍使用14px+。

尽量使用偶数的数字字号，ie6等老式浏览器支持奇数会有bug。

代码如下

<style>
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 30px;
	}
	p {
		font-size: 14px;
        width: 2em
	}
</style>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

3.2 font-family：字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如将网页中所有段落文本的字体都设置为微软雅黑，可以使用如下CSS样式代码：

p {
    font-family:"微软雅黑";
}
/*可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体*/

我们经常使用微软雅黑 = Microsoft YaHei

常用技巧：

各种字体之间必须使用英文状态下的逗号“,”分隔。

中文字体需要加英文状态下的引号，英文字体一般不需要加引号。但如果多个英文单词则需要引号引起来，当需要设置英文字体时，英文字体名必须位于中文字体名之前。例如：font-family: Arial, "微软雅黑"; 。

如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-family: "Times New Roman";。

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

注：

在CSS中设置字体名称，是可以直接写中文的。但是在文件编码（GB2312、utf-8等）不匹配时会产生乱码的错误。xp系统不支持类似“微软雅黑”的中文。

方案一：可以使用英文来替代，比如：font-family:"Microsoft Yahei"; 。

方案二：在CSS中直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确解析的。比如：font-family:"\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。

在Unicode编码表中，中文的取值范围是\u4e00~\u9fa5

字体名称	英文名称	Unicode编码
宋体	Simsun	\5B8B\4F53
新宋体	NSimsun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼圆	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

3.4 font-weight：字体粗细

字体加粗除了用 b 和 strong 标签外，还可以使用CSS来实现，但CSS是没有语义的。

<style type="text/css">
	p {
		font-weight: normal;
	}
	div {
		font-weight: bold;
	}
	span {
		font-weight: bolder;
	}
</style>

<p>这是normal的文本</p>
<div>这是bold的文本</div>
<span>这是bolder的文本</span>

我们常用：

数字 400 等价于 normal，而 700 等价于 bold

3.5 font-style：字体风格

字体倾斜除了用 i 和 em 标签外，可以使用CSS实现，但CSS是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。

<!--
italic和oblique区别：
要搞清楚这个问题，首先要明白字体是怎么回事。一种字体有粗体、斜体、下划线、删除线等诸多属性。
但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用Italic，就没有效果了~这时候你就要用 Oblique.
可以理解成Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！

CSS2.0官网解释：
italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用 Oblique属性值来实现倾斜的文字效果.
-->

<style>
	p {
		font-style: normal;
	}		
	div {
		font-style: italic;
	}		
	span {
		font-style: oblique;
	}
</style>

<p>这是一个段落,正常。</p>
<div>这是一个段落,斜体。</div>
<span>这是一个段落,斜体。</span>

注：

平时我们很少给文字加斜体，反而是给斜体标签（i，em）改为普通模式。

3.6 font综合设置字体样式

font属性用于对字体样式进行综合设置，其基本语法如下：

注意：

使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。其中不需要的属性可以省略（取默认值），但必须保留font-size、font-family属性，否则font属性将不起作用。

<style type="text/css">
	p{
		font: italic bold 12px/30px Georgia, serif;
	}
</style>

<p>这是一个设置了字体样式的文本</p>

4.文本样式

4.1 color 文本颜色

color属性用于指定文本的颜色，有3种表现形式。

color-name：使用颜色名称，如：red, transparent
hex-number：使用十六进制数表示，取值是0~f，每个颜色使用两位表示，如：#ff0000表示红色 0-9 a:10 b:11 c:12 d:13 e:14 f:15
rgb-number：使用rgb颜色值表示，取值0~255，如rgb(255,0,0)，rgba(100%, 0%, 0%, .5)

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。a的值使用小数表示
rgba：在rgb上多了一给a，表示透明度，取值0~1 完全透明~完全不透明
CSS3的hsl：使用色相、饱和度、亮度来定义颜色。

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。
- 色相（H）基本属性，就是平常所说的颜色名称，如红色等，取值： (0 ~360) ，0 / 360)为红色, 120 为绿色, 240 为蓝色
- 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取值： 0-100% 。
- 亮度（L）增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化，取值：0-100%。

<style type="text/css">
	h1 {
		color: red;
	}
	h2 {
		color: #00ff00;
	}
	h3 {
		color: rgb(0, 0, 255);
	}
    h3 {
		color: ;
	}
</style>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

4.2 text-align 文本对齐方式

text-align用于指定元素文本的水平对齐方式，取值有left、right、center、justify（两端对齐文本）

<style type="text/css">
	h1 {
		text-align: left;	/*左对齐*/
	}
	h2 {
		text-align: center;	/*居中对齐*/
	}
	h3 {
		text-align: right; /*右对齐*/
	}
	p {
		text-align: justify; /*分散对齐，主要针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化*/
	}
</style>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

<p>当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>

4.3 text-decoration 文本修饰

text-decoration用于对文本添加修饰，如下划线、删除线等。有如下取值：

none：默认，定义标准的文本，没有任何修饰。
underline：定义在文本下方的一条线
overline：定义在文本上方的一条线
line-through：定义穿过文本的一条线

<style type="text/css">
	h1 {
		text-decoration: none;
	}
	h2 {
		text-decoration: overline;
	}		
	h3 {
		text-decoration: line-through;
	}		
	h4 {
		text-decoration: underline;
	}
	h5 {
        /* 文字闪烁，只在火狐中支持 */
		text-decoration: blink;
	}
</style>

注：

我们经常在a标签上作用text-decoration

4.4 text-transform 文本转换

text-transform用于转换文本的大小写（主要用于英文），其取值有：

none：默认
capitalize：文本中每个单词以大写字母开头
uppercase：所有单词字母都大写
lowercase：所有单词字母都小写

<style>
	h1 {text-transform:uppercase;}
	h2 {text-transform:lowercase;}
	h3 {text-transform:capitalize;}
</style>

4.5 text-indent 文本缩进

text-indent 属性规定文本块中首行文本的缩进。取值有：

数值：表示像素值
百分比：基于父元素宽度的百分比的缩进。

注意： 负值是允许的。如果值是负数，将第一行左缩进。

<style>
	p {
        text-indent:50px;
    }
</style>

<!-- 小技巧： 首行缩进2字符使用 2em -->

4.6 text-shadow 文本阴影

text-shadow用于设置文本的阴影效果。语法格式是

text-shadow: h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值
v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值
blur：可选。模糊的距离。
color：可选。阴影的颜色。

<style type="text/css">
	h1 {
		text-shadow: 2px 2px #FF0000;
	}	
	h2 {
		text-shadow: 2px 2px 8px #FF0000;
	}		
	h3 {
		color: white;
		text-shadow: 2px 2px 4px #000000;
	}		
	h4 {
		text-shadow: 0 0 3px #FF0000;
	}
</style>

4.7 direction 文本方向

direction 用于指定文本的方向。取值如下：

ltr：默认的，文本方向从左到右 left to right

rtl：文本方向从右到左。right to left

<style type="text/css">
	p {
		direction: ltr;
	}		
	div {
		direction: rtl;
        unicode-bidi: bidi-override;
	}
</style>

4.8 letter-spacing 字符间距

letter-spacing 属性增加或减少字符间的空白（字符间距），使用数值表示，可以是负数。主要用于汉字

<style>
	h1 {
        letter-spacing:2px;
  	}
	h2 {
      	letter-spacing:-3px;
  	}
</style>

4..9 word-spacing 字间距

word-spacing属性增加或减少单词与单词之间的空白，允许使用负值。主要用于英文段落

<style>
  p { 
      word-spacing:30px;
  }
</style>

4.10 line-height 行高

line-height 用于设置文字行与文字行之间的距离。取值如下：

number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length：设置固定的行间距 px em 。
%：基于当前字体尺寸的百分比行间距。

注意：一般情况下，行距比字号大7 8像素即可。

<style>
    span {
    	line-height:2;
    }
    p {
        line-height:20px;
    }
    div {
        line-height:100%;
    }
</style>

使用技巧：在一行的盒子内，我们设定行高等于盒子的高度，就可以是文字垂直居中。只适用于单行文本

单行文字垂直居中的原理

5 基本选择器

5.1 标签选择器（元素选择器）

标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

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

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

示例：

h1 {
    color: red;
}

p {
    color: green;
}

5.2 id选择器

id选择器使用“#”进行标识，后面紧跟id名，基本语法格式如下：

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

<标签名 id="id值"></标签名>

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本与类选择器相同。

<div class="lin">林黛玉</div>	<!-- 使用类选择器 -->
<div id="xue">薛宝钗</div>		<!-- 使用id选择器 -->

5.3 类选择器

类选择器使用“.”（英文点）进行标识，后面紧跟类名，其基本语法格式如下：

定义：
.类名{属性1：属性值1; 属性2：属性值2; ...}

调用：
<标签名 class="类名"></标签名>

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

示例：

小技巧：

长名称或词组可以使用中横线来为选择器命名。text-color-red

不要纯数字、中文等命名，尽量使用英文字母来表示。见名知意

5.4 多类名选择器

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

<!--在class属性中使用多个类名，表示同时满足多个样式 -->
<div class="font20 red fontWeight">西游记</div> 
<div class="font20">红楼梦</div>
<div class="font14 fontWeight">三国演义</div>
<div class="font14">水浒传</div>

如图：

注意：

样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。

各个类名中间用空格隔开

多类名选择器在后期布局较为复杂的情况下使用较多。

5.5 id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，可以重复使用，如：李伟、张伟

id选择器（id）好比人的身份证号，是唯一的，不允许重复，只能使用一次。

5.6 通配符选择器

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

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

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML元素的默认边距。

* {
margin: 0; /*定义外边距*/
padding: 0; /*定义内边距*/
}

注意：

通配选择器较少使用。

5.7 伪类选择器

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

伪类选择器使用“:”冒号来表示，比如 :link{}

(1) 链接伪类选择器

链接伪类选择器主要针对于a标签

a:link       /*未访问的链接*/
a:visited   /*已访问的链接*/
a:hover       /*鼠标移动到链接上*/
a:active   /*选定的链接*/

注意：

a:hover 必须在 a:link 和 a:visited 之后。

a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。

所以，写的时候顺序尽量不要颠倒，按照l o v e h a t e来记忆

<style>
	a:link {		/*未访问的链接*/
		font-size: 16px;
		color: grey;
		font-weight: 700;
	}
	a:visited {		/*已访问的链接 表示已经点击过一次的状态*/
		font-size: 16px;
		color: orange;
		font-weight: 700;
	}
	a:hover {		/*鼠标移动到链接上*/
		font-size: 16px;
		color: red;
		font-weight: 700;
	}
	a:active {		/*选定的链接  鼠标点击不松开的状态*/
		font-size: 16px;
		color: blue;
		font-weight: 700;
	}
</style>

实际工作中，链接伪类选择器使用简写即可。

a {       /*a是标签选择器，所有的链接*/
   font-weight: 700;
   font-size: 16px;
   color: grey;
}
a:hover {   /*:hover 是链接伪类选择器鼠标移动到链接上*/
   color: red;       /*鼠标经过时，文本由原来的灰色变为红色*/
}

小米：#ff6700

京东：#f10215

支付宝：#00bbee

微信：#348903