day02HTML_CSS

2018-06-24 02:02:37来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  • 掌握表单标签

<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>

       

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:placeholder字体样式及兼容

下一篇:iframe的使用