你的位置:首页 > 网页设计

[网页设计]day02HTML_CSS

  • 掌握表单标签

<form action="http://www.baidu.com" method="post"> ...</form>
  • 了解CSS的概念

    • 英文缩写 Cascading Style Sheet
    • 层叠样式表
    • 层叠:层层叠加
    • 样式表:样式的集合(属性的集合),不是html的属性,而是CSS的属性
  • 掌握CSS的引入方式(heml和css)

    • 通过style标签的属性
      <!--通过style属性--> <div style="border: 1px solid red;">div一</div>
    • 通过style标签
      <head> <!--通过style标签--> <style>  div {   border: 1px solid red;  } </style></head>

       

    • 通过link标签结合(外部引入)
      <link rel="stylesheet" href="../../css/divcss.css" />

       

  • 了解CSS的基本语法和常用的选择器

    • 语法规范

  {

         属性:属性值 属性值

            属性:属性值 属性值

        }

    • 常用选择器
      • 标签选择器; 语法: 标签名{css代码}
        <style>/*标签选择器*/div{ border: 1px solid red;}</style>

         

      • 类选择器语法: .类名{css代码}
        <style> /*类选择器*/ .divClass{  border: 1px solid red; } </style>

         

      • id选择器;语法: #id名{css代码}
        <style> /*id选择器*/ #divId{  border: 1px red solid; } </style>

         

      • 组合选择器 语法:选择器,选择器{css代码}
        /*组合选择器*/div,span{ border: 1px solid red;}

         

      • 后代选择器 语法:选择器1 选择器2 {css 代码}
      • 子代选择器 语法:选择器1>选择器2 {css 代码}:
  • 了解CSS的盒子模型,浮动.

    • 设置浮动
      <div style="float:left;"></div>

       

  •  css盒子模型
    • margin:外边距
    • padding:内边距,里面的元素和边框之间的距离
      <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  </head> <body>  <div style="height: 300px; width: 300px ;border: red solid 1px;">   <div style="background-color: blue; height: 100px;text-decoration: underline; width: 100px; border-style: dashed; margin: 35px; padding: 20PX;">        BBB    中国   </div>  </div> </body></html>