CSS 基础篇 （二） web 前端基础

1. CSS 外观属性

1.1 CSS 文本颜色

color属性用于定义文本的颜色，
语法如下：

选择器 {
color: 属性值; 
}

其取值方式有如下3种：

表式	属性值
预定义的颜色值	如red，green，blue等。
十六进制	如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
RGB代码	如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

注意

• 如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
• 开发中最常用的是十六进制。

1.2 行间距

ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
其基本语法如下：

选择器 {
line-height: 3px;
 }

解释：

1. line-height常用的属性值单位有三种：像素px，相对值em和百分比%
2. 行间距包括：上间距 、 下间距 和 文本高度。
   

1.3 文字对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。
其基本语法：

选择器 {
text-align: left  right  center ;
}

属性值：

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

1.4 首行缩进

text-indent 属性用于设置首行文本的缩进。
属性值可用: 1. em字符宽度的倍数, 2.相对于浏览器窗口宽度的百分比% 可以是负值。

选择器 {
text-align: 属性值;
 }

1.5 字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。
其属性值可为不同单位的数值，允许使用负值，默认为normal。

1.6 单词间距 （字母单词间距）

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。

字间距和单词间距的区别：
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

1.7 文本装饰

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

选择器 {
text-decoration: none;  /*取消下划线*/
 }

1.8 颜色半透明(css3)

文字颜色我们可以设置半透明，有4个取值，其基本语法如下：

 color: rgba(r,g,b,a) 
 /*  a 是alpha  透明的意思  取值范围 0~1之间  */   
  color: rgba(0,0,0,0.3)  /* 也可以设置成.3，把0省略 */

也可以直接使用文字不透明底：opacity

div
{
opacity:0.5;
}

1.9 文字阴影

文字可设置阴影效果。

text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;

注意
水平位置 ，垂直位置 ：两项是必须写的。 后两项可以选写。

2. 引入CSS样式表（书写位置）

按照CSS样式书写的位置（或引入的方式）
CSS样式表可分为 行内样式表（行内式） 、 内部样式表（嵌入式） 和 外部样式表（链接式）

2.1 行内样式表（内联样式）

内部样式表是写在HTML文档的内部，是通过标签的style属性来设置元素的样式，通常在HTML文档的标签中，单独放到一个

• 特点：
  语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。不影响样式效果

  2.3 外部样式表（外链式）

  特点：链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中。
  把html与CSS分开文件保存，HTML只放结构，CSS只放样式，通过link标签将外部样式，css文件链接到当前的html当中。
  其基本语法如下：

  
    "CSS文件的路径" type="text/CSS" rel="stylesheet" />
  
  

  注意

  1. 是个单标签。
  2. 需要写在 和头部标签中，并且必须指定link标签的三个属性，具体如下：

  属性	描述
  link	链接，把外面的CSS引入到html中
  href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
  type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表
  rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

  其具体如下：

  < link rel='stylesheet' type='text/css'  href='css 外部样式表.css' />
  

  三种样式表总结：

  引入方式	优点	缺点	控制范围
  行内样式表	书写方便，权重高	结构样式不分离	控制一个标签
  内部样式表	部分结构和样式相分离	没有彻底分离	控制一个页面
  外部样式表	完全实现结构和样式相分离	需要引入	控制整个站点

  3. CSS 的标签元素显示模式

  HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

  3.1 块级元素

  每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
  常见的块元素有

  ~

  、

  、

  、

  、
  、
  1. 等，其中
     标签是最典型的块元素。
     1. 块级元素的特点：
     （1）总是从新行开始
     （2）高度，行高、外边距以及内边距都可以控制。
     （3）宽度默认是容器的100%
     （4）可以容纳内联元素和其他块元素。
     2. 注意：
     1. 文字类的元素内不能使用块级元素
     2.

     标签主要用于存放文字，因此

     内不能放块级元素，特别是不能放

     
     3. 同理，

     ~

     等都是文字类块级标签，里面也不能放其他块级元素

     3.2 行内元素

     行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

     常见的行内元素有、、、、、、、、、等，其中标签最典型的行内元素。
     

     1. 行内元素的特点：
     （1）和相邻行内元素在一行上。
     （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
     （3）默认宽度就是它本身内容的宽度。
     （4）行内元素只能容纳文本或则其他行内元素。（a特殊）

     2. 注意：
     1. 链接里面不能再放链接
     2. 特殊情况链接里面可以放块级元素，但是需要将转换成块级模式

     3.3 行内块元素

     在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，它们同时具有块元素和行内元素的特点。被称为行内块元素。

     1. 行内块元素的特点：
        （1）和相邻行内元素（行内块）在一行上，他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
        （2）默认宽度就是它本身内容的宽度。 （行内元素特点）
        （3）高度，行高、外边距以及内边距都可以控制。（块级元素特点）

     3.4 元素显示模式总结

     元素模式	元素排列	设置样式	默认宽度	包含
     块级元素	一行只能放一个块级元素	可以设置高度、宽度 边距	容器的100%	除文字类元素外，可以包含任何元素
     行内元素	一行可以放多个行内元素	不可以直接设置高度、宽度，可设置内外边距	它本身内容的宽度	除外，只能容纳文本或其他行内元素
     行内块元素	一行可以放多个行内块元素	可以设置高度、宽度	它本身内容的宽度

     3.5 元素显示模式转换 （display）

     元素中的三个模式可以相转换，需要到display

     1. 转换为块级元素 ：display:block；
     2. 转换为行内元素 ：display:inline；
     3. 转换为行内块元素：display:inline-block；