如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。

              blablabla
              blablabla

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:

h2{ 
        color:red;font-size:10px;}

这条规则表明，页面中所有的一级标题都显示为红色，字体大小为10像数。
说明：
1.选择器是您需要改变样式的对象（上图的规则就二级标题生效）。
2.每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
3.属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

选择器种类众多，常见的有id选择器和class选择器

注意：元素的id值必须唯一，所以id选择器适用的范围只有一个。

/* 注意：id选择器前有 # 号。 */
#sky{ 
        
  color: blue;
}

这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色，如下所示的页面，蓝色的天空这几个字就将会是蓝色的。

"sky">蓝色的天空
"forest">绿色的森林

元素的class值可以有多个，也可以重复，所以应用实际中class选择器非常普遍。

/* 注意：class选择器前有 . 号。 */
.center{ 
        
  text-align: center;
}
.large{ 
        
  font-size: 30px;
}
.red{ 
        
  color: red;
}

以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。

"center">我会居中显示的
"red">我是红色的
"center large red">我又红又大还居中
"red">我也可以是红的

我们一般有三种方法：外部样式表，内部样式表，内联样式

在和要引用的HTML文件的同一目录新建一个样式表文件mycss.css（注意后缀名为css）
利用下面的语句写进在HTML的head标签中即可引入CSS样式。

  "stylesheet" type="text/css" href="mycss.css">

引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

我们也可以将样式放在 HTML 文件中，这称为内部样式表。

       


  
CSS用法总结
  

  
"title1">标题一

该例子与上述例子一样的效果，但注意在元素中引入了

上面例子中，段落1、2、3都将有黄色的背景，而段落4、5没有。

也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接

元素。

 


  
"haha">
    
Paragraph 1 in the div .haha.
    
Paragraph 2 in the div .haha.
    
        
Paragraph 3 in the div .haha - it is descendant but not immediate child.
     
  
  
Paragraph 4. Not in a div .haha.
  
Paragraph 5. Not in a div .haha.

虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：
1.visible 默认值，溢出部分不被裁剪，在区域外面显示
2.hidden 裁剪溢出部分且不可见
3.scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
4.auto 裁剪溢出部分，视情况提供滚动条

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。我们常用这种样式来使图像和文本进行合理布局。下面是将图片浮动在右边。文字在左边绕着图片显示：

  


  "https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="float-right" alt="">
  
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
  corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
  modi nam vero!

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。
一个元素浮动后，其后的元素将尽可能包围它，或者说出现在这个浮动元素的左或右方。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除

采用用opacity对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。例子如下：

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
比如我们可能有这样的需求：鼠标移到某元素上变换背景颜色、超链接访问前后访问后样式不同、离开必须填写的输入框时出现红色的外框进行警示等等。

如果在下面的例子的链接已被访问，它会显示为红色。

以上就是今天要讲的内容，本文仅仅简单介绍了HTML和CSS的基本使用。HTML 是构成 Web 世界的一砖一瓦，它定义了网页内容的含义和结构，而使用 CSS 我们可以大大提升网页开发的工作效率！除 HTML 和CSS以外的其它技术的功能与行为（如 JavaScript），在后续会逐渐讲解后者的基本用法。