HTML和样式表



HTML和样式表

CSS 是 Cascading Style Sheets的缩写,即级联样式表的意思。

CSS描述HTML元素将显示在屏幕上,纸上,或在其他媒体。

CSS可以节省大量的工作。它可以同时控制多个网页的布局。

CSS可以通过3种方式添加到HTML:

  • Inline(内联) - 在HTML元素中使用样式属性
  • Internal(内部) - 在 <head> 部分使用<style>元素
  • External(外部) - 使用外部CSS文件

添加CSS的最常见的方式, 是保存样式在单独的CSS文件中.

然而,在这里,我们将使用内联和内部样式,因为这是更容易阅读, 和更容易为你自己测试.

提示:你可以学习更多关于CSS在我们的CSS教程。


Inline(内联)

Inline(内联)CSS 应用一种样式到一个HTML元素上.

内联CSS使用HTML元素的样式属性。

这个实例设置元素的文本颜色为蓝色,例如:

<h1 style="color:blue;">这是蓝色标题</h1>

让我试试


Internal(内部) CSS

Internal(内部) CSS 用于定义一个HTML页面风格.

Internal(内部)CSS 在 <head> 部分使用<style>元素来定义,例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
    body {background-color: powderblue;}
    h1   {color: blue;}
    p    {color: red;}
  </style>
</head>
<body>

  <h1>编程字典</h1>
  <p>超级编程字典,高效编程利器!</p>

</body>
</html>

让我试试


External(外部) CSS

外部样式表是用来定义许多HTML页面风格。

使用外部样式表,您可以通过更改一个文件来更改整个网站的外观!

使用外部样式表,在HTML页面的<head>部分给它添加一个链接,例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <link rel="stylesheet" href="tryhtml_css_external.css">
</head>
<body>

  <h1>编程字典</h1>
  <p>超级编程字典,高效编程利器!</p>

</body>
</html>

让我试试


外部样式表可以使用任何文本编辑器编写。文件不能包含任何HTML代码, 必须保存为一个.css为扩展名的文件。

css样式如下:

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

CSS 字体

CSS color 属性定义要使用的文本颜色.

CSS font-family 属性定义要使用的字体.

CSS font-size 属性定义要使用的文本大小,例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
    h1 {
      color: blue;
      font-family: verdana;
      font-size: 300%;
    }
    p  {
      color: red;
      font-family: courier;
      font-size: 160%;
    }
  </style>
</head>
<body>

  <h1>编程字典</h1>
  <p>超级编程字典,高效编程利器!</p>

</body>
</html>

让我试试


CSS 边框

CSS 边框属性定义一个HTML元素的边框,例如:

p {
    border: 1px solid powderblue;
}

让我试试


CSS 内边距(Padding)

The CSS 内边距属性定义文本和边框之间的填充(空格),例如:

p {
    border: 1px solid powderblue;
    padding: 30px;
}

让我试试


CSS Margin(外边距)

CSS margin(外边距) 性定义边界外的边距(空间),例如:

p {
    border: 1px solid powderblue;
    margin: 50px;
}

让我试试


id 属性

若要为特定元素定义特定样式,请向该元素添加id属性,例如:

<p id="p01">我就是我...</p>

然后为具有特定id的元素定义样式,例如:

#p01 {
    color: blue;
}

让我试试


注意: 一个元素的ID在一个页面中应该是唯一的,所以id选择器用来选择一个唯一的元素!

class 属性

要为特殊类型的元素定义样式,请向元素添加类属性,例如:

<p class="error">我就是我...</p>

然后为特定类定义元素的样式,例如:

p.error {
    color: red;
}

让我试试


外部样式引用

外部样式表可以引用完整的URL或与当前网页相对应的路径.

此示例使用完整的URL链接到样式表,例如:

<link rel="stylesheet" href="http://www.CodingDict.com/html/styles.css">

这个例子的链接样式表位于HTML文件夹在当前网站:

<link rel="stylesheet" href="/html/styles.css">

此示例链接到位于当前页相同文件夹中的样式表:

<link rel="stylesheet" href="styles.css">

本章小结

  • 使用HTML行内样式属性
  • 使用 HTML <style> 元素定义内部样式表
  • 使用 HTML <link> 元素引用一个外部CSS文件
  • 使用 HTML <head> 元素去存储<style><link> 元素
  • 使用CSS color 属性设置文本颜色
  • 使用CSS font-family 属性设置文本字体
  • 使用CSS font-size 属性设置文本大小
  • 使用CSS border 属性设置边框
  • 使用CSS padding 属性设置内边距
  • 使用CSS margin 属性设置外边距