肉渣教程

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

上一节 下一节