热心市民の知识库

前端基础之 HTML/CSS 初接触

#HTML #CSS

HTML基本标签

<!DOCTYPE html> <!- 声明HTML文档 ->
<html>  <!- 网页内容 ->
    <head>
        <title>the title</title>  <!- 地址栏标题 ->
    </head>
    <body> <!- 网页主体 ->
        <header>
            网页顶部
        </header>
        <h1>h1</h1>  <!- 标题 h1-h6 从大到小 ->
        <p>paragraph 1</p> <!- 段落 ->
        <p>I am a <br> paragraph of text</p> <!- 换行 ->
        <p>I am a <strong>strong</strong> paragraph of text</p> <!- 加粗 ->
        <p>I am a <em>strong</em> paragraph of text</p>  <!- 加斜 ->
        <button>I'm a button</button>  <!- 按钮 ->
        <ul> 
        <li>an item</li>  
        <li>an item</li>
        <li>an item</li>
        </ul> <!- 被 ul 包裹的是无序列表，被li包裹的是有序列表，常在 ul 内 使用 li 实现顶部菜单栏等  ->
        <footer>
            网页底部
        </footer>
    </body>
</html>

CSS

层叠样式表

如何引用

  • 外部样式表
    <head>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
  • 内部样式表
    <head>
  <style type="text/css">
      body {
          background-color: red
      }
      p {
          margin-left: 20px
      }
  </style>
</head>
  • 内联样式
    <p style="color: red; margin-left: 20px">
This is a paragraph
</p>

语法

body {
    background-color: red
}
p {
    margin-left: 20px
}

CSS 规则由两个主要的部分构成：

  • 选择器
  • {一条或多条声明}

每条声明由一个属性和一个值组成

常见选择器

  • 元素选择器(element)

    body {
      /* element选择器可以设定某元素的样式。 */
  }

  • 类选择器(class)

    <h1 class="important">Welcome to FishC.com</h1>
  <p class="important">Welcome to FishC.com</p>

  .important {
      /* 类选择器允许以一种独立于文档元素的方式来指定样式,
      类选择器允许以一种独立于文档元素的方式来指定样式,
      该选择器可以单独使用，也可以与其他元素结合使用 */
  }

  • id 选择器

    #waleslau {
      /* id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
      注意：id 属性只能在每个 HTML 文档中出现一次。*/

  <p id="waleslau">Hi I'm waleslau</p>

  • 伪类选择器

    <!- 形似:xxx即伪类选择器
  :hover {
      /* :hover 选择器用于选择鼠标指针浮动在上面的元素。*/
  }

      <!- 比如我们希望当鼠标移到某<a>标签上时，它会自动加上红色背景，移开后恢复，就这样写：
      a:hover {
          background-color:red;
      }

CSS属性举例

  • background-color 背景颜色
  • font-family 规定元素的字体系列
  • width 元素的宽度
  • margin 外边距
  • padding 内边距 ... ...

更多信息参见HTML5&CSS3速查宝典

未完待续 。。。