CSS样式规则
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)希望设置的样式属性(style attribute)。
CSS加载的方式
1.引入外部文件
<link href="outer.css" rel="stylesheet" type="text/css"></link>
HTML文档中使用<link>
元素引入外部样式文件,引入外部样式文件应在<head>
元素中增加<link>
子元素。
2.导入外部样式单
<style type="text/css">
@import "../outer.css";
@import url('outer.css');
</style>
导入外部样式表单需要在<style>
元素中执行@import
进行导入。
3.使用内部CSS样式
一般来说我们不建议使用内部 CSS 样式:
- 复用性小。
- 导致HTML文档过大,会导致网络负载严重。
- 修改整站风格时,需要对每个网页文件进行样式修改。
<style type="text/css">
样式单文件定义
</style>
4.使用内联CSS样式
内联样式只对单个标签有效,不会影响整个文件。
在 HTML 元素中使用 style 属性定义内联样式。
<div style="property1:value1;property2:value2;"/>
内联元素和区块元素简介
我们在之前的练习中发现,HTML标签具有不同的特性。
实际上,我们可以将HTML元素分为两大类:区块元素和内联元素。
内联元素和区块元素
区块元素
总是在新的一行上显示。
高度、行高、宽度、内边距、外边距等都是可控制的。
高度默认为0,是根据元素内的内容而决定的,宽度是父元素的宽度,但是可以通过css控制它,显示的指定他的宽度和高度,可以利用浮动和定位来将他与其他的块元素也显示在一行上。
实例:
<h1>
,<p>
,<ul>
,<table>
。
内联元素
内联元素和其他的元素显示在一行上。
上下边距、高度,宽度都是不可改变的,他的宽度是根据他的显示文本和图像的宽度。
实例:
<b>
,<td>
,<a>
,<img>
。
常用的内联元素
- a - 锚点
- em - 强调
- img - 图片
<div>
元素
HTML
<div>
元素是块级元素,它可用于组合其他HTML元素的容器。<div>
元素没有特定的含义。由于它属于块级元素,浏览器会在其前后显示换行。如果与 CSS 一同使用,
<div>
元素可用于对大的内容块设置样式属性。
<span>
元素
- HTML
<span>
元素是内联元素,可用作文本的容器 <span>
元素也没有特定的含义。- 当与 CSS 一同使用时,
<span>
元素可用于为部分文本设置样式属性。