HTML _ HTML CSS

HTML CSS

关于 HTML CSS 的案例

《风云雄霸天下》

金鳞岂是池中物，一遇风云变化龙。

九霄龙吟惊天变，风云际会浅水游。

运行一下

通过 CSS 设置HTML样式

CSS（Cascading Style Sheets）即层叠样式表。
CSS 是用来设置HTML元素的样式特性，从而浏览器、设备以及其他软件知道该如何显示这些元素。
使用CSS设置HTML样式可以事半功倍。

CSS有三种方式：内联样式、 内部样式表、 外部样式表

内联样式

应用场景：当某个元素要设置成一种相对特殊的样式，用内联样式最合适；反之如果这种样式将会重复被多个元素所应用，这时就最好别用内联样式。

金鳞岂是池中物，一遇<span style="color:#46acb6;">风云</span>变化龙。

运行一下

内部样式表

在HTML的页面源代码内直接使用CSS样式表来定义HTML元素的样式。（内部样式表会在<style>标签内，而该<style>元素大多会在<head>元素中被定义）

<!DOCTYPE html>
<html>

<head>
  <style>
    body {background-color: Black;}
    h1   {color: Tomato; font-weight:300;}
    p    {color: White; padding-left:10px;}
  </style>
</head>

<body>

  <h1>《风云雄霸天下》</h1>
  <p>九霄龙吟惊天变，风云际会浅水游。</p>

</body>

</html>

运行一下

外部样式表

<link rel="stylesheet" type="text/css" href="./static/ex.css">

与内部样式表相比，外部样式表就是把内部样式表单独做成一个.css文件。从而降低代码的耦合性，达到可以通过改变外部样式表的地址，而改变整个网站的外观风格。（一般放在<head>元素内）

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="./static/ex.css">
</head>

<body>

  <h1>《风云雄霸天下》</h1>
  <p>九霄龙吟惊天变，风云际会浅水游。</p>

</body>

</html>

运行一下

使用CSS设置文字样式

CSS中的 color 特性可用来定义文字颜色
CSS中的 font-family 特性可用来定义文字的字体
CSS中的 font-size 特性可用来定义文字大小
CSS中的 font-weight 特性可用来定义文字粗细

h1 {
  color: Tomato; 
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 28px;
  font-weight: 800;
  }

p {
  color: #46acb6; 
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 400;
  }

运行一下

CSS border 边框样式

CSS中的 border 特性用于定义HTML元素的边框样式。

h1 {
    border: 1px dotted Tomato;
    }

p {
    border: 1px solid Tomato;
    }

运行一下

CSS padding 内边距

CSS中的 padding 特性用于定义元素的内边距。

h1 {
    border: 1px solid Tomato;
    padding: 20px;
    }

p  {
    border: 1px solid Tomato;
    padding-top: 20px;
    }

运行一下

CSS margin 外边距

CSS中的 margin 特性用于定义元素的外边距。

h1 {
    border: 1px solid Tomato;
    margin: 66px;
    }

p  {
    border: 1px solid Tomato;
    margin-left: 66px;
    }

运行一下

根据id来定义元素样式

<p id="zhuanfou">九霄龙吟惊天变，风云际会浅水游。</p>

在样式表中除了根据元素类型来定义样式，还可以根据元素的属性id来定义具体的样式。

#zhuanfou {
    color: Tomato;
}

运行一下

根据class来定义元素样式

<p class="zhuanfou">九霄龙吟惊天变，风云际会浅水游。</p>

在样式表中还可以根据属性class（类）来定义具体的样式，在CSS中一般会把具有某些共同的组合样式归纳成一种类（class），从而更容易重复利用某一种特定的类，且条理更加清晰。

.zhuanfou {
    color: Tomato;
}

运行一下

HTML CSS

推广