【Web前端笔记04】CSS样式基础标签

1.CSS字体样式属性

1.font-size:字号大小（用于设置字号）具体为：

相对长度	说明
em	相对于当前文本的字体尺寸
px	像素，最常用（推荐）
相对长度	说明
in	英寸
cm	厘米
mm	毫米
pt	点

2.font-family：字体

设置字体时候，应该注意：

• 各字体直接必须使用英文状态下的逗号隔开
• 英文字体必须在中文字体前，并且中文字体必须加上英文状态下的引号。

body{ font-family:Arial,"宋体"，“黑体”；}/* 正确书写*/
body{ font-family:"宋体"，“黑体”，Arial；}/* 错误书写*/

2.CSS文本外观属性

1.color:文本颜色

color属性用于定义文本颜色，取值为：

• 预定义颜色值如：red，green，blue等等。
• 十六进制（常用）如：#FF0000,#F60,#29D745;
• RGB代码，如rgb（255,255,255）。

2.letter-spacing:字间距

3.word-spacing:单词间距

4.line-height：行间距

5.text-decoretion:文本修饰

• none：没有装饰
• undeline：下划线
• overline：上画线
• underline：下画线
• line-through：删除线

6.text-align：水平对齐方式

• left：左对齐
• right：右对齐
• center：居中对齐

h1{ text-align:center;}

7.text-indent：首行缩进（2em）

3.CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合成的，具体为：

1.标签指定式选择器

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格，如：

h3.one{ } p#two{ }

p{ color:red;}
.one{ color: blue;}
p.one{ color:green;}
中间略
<p class="one">这是绿色</p>
<p >这是红色</p>
<h1 class="one">这是蓝色</p>

2.后代选择器

后代选择器用来选择元素或元素的后代，其写法就是把外层标记写在前面。内层标记写在后面，中间用空格分隔。

p strong{} //p为外层标记，strong为内层标记

p strong{ color:red;}
strong{ color:blue;}
中间略
<p>文字<strong>嵌套在strong内（红色）</strong></p>`
<strong> 文本（蓝色）</strong>

3.并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分，如果某些选择器定义的样式完全相同或者部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

h1，h2，p{ color:red; font-size:14px;}/这里为不同标记组成的选择器/
h3, .one,#special{ text-decoretion:none;} /这里为标记，类，id选择器组成的/

h1，h2，p{ color:red; font-size:14px;}
h3, .one,#special{ text-decoretion:none; color:blue;} 
中间略
<h1> 文字（红色）</h1>
<h3> 文字（蓝色）</h3>
<a class="one" id="special">文字 (蓝色)</a>

注：CSS还具有继承性，但是下面属性无法继承

• 边框属性
• 外边距属性
• 内边距属性
• 背景属性
• 定位属性
• 布局属性
• 元素宽高属性