热心市民の知识库

前端基础之 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速查宝典

未完待续 。。。