• 掌握表单标签

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

day02HTML_CSS的更多相关文章

随机推荐

  1. Python正则表达计算器

    Python学习笔记(十二): 计算器 利用Python的正则表达式写的简易计算器 # author : Ryoma # time : 17:39 import re def add(string): ...

  2. Java8 新特性之Stream----java.util.stream

    这个包主要提供元素的streams函数操作,比如对collections的map,reduce. 例如: int sum = widgets.stream() .filter(b -> b.ge ...

  3. LINUX 笔记-date命令

    显示当前时间: 命令: focus@ubuntu:~$ date Thu Aug 31 03:01:17 PDT 2017 focus@ubuntu:~$ date '+%x' 08/31/2017 ...

  4. JS中OOP之模拟封装和继承和this指向详解

    大家好,今天我带大家学习一下js的OOP, 大家都知道,面向对象有三个基本特征,继承,封装和多态,面向对象的语言有那么几种,C++,PHP,JAVA等,而功能强大的JS可以模拟实现面向对象的两大特征, ...

  5. Linux命令用法

    1.cut http://www.cnblogs.com/dong008259/archive/2011/12/09/2282679.html 2.sed http://www.cnblogs.com ...

  6. SSM框架+slf4j 以Gradle实现

    环境:win10+jdk8+tomcat9+Intellij IDEA 首先,作为一个喜欢偷懒的人,管理jar之类的的事情太累,所以用了Gradle项目管理器 第一步: 新建一个gradle-web项 ...

  7. python 带小数点时间格式化

    #获取带小数点的时间>>> import datetime #当前时间加3天 >>> t1 = datetime.datetime.now() + datetime ...

  8. web service实例

    一.准备工作(以下为本实例使用工具) 1.MyEclipse10.7.1 2.JDK 1.6.0_22 二.创建服务端 1.创建[Web Service Project],命名为[TheService ...

  9. fiddler学习资源

    小坦克   fiddler教程:http://www.cnblogs.com/TankXiao/archive/2012/04/25/2349049.htmlps:另外博主其他测试文章也值得一看 涂根 ...

  10. HDU 6140 Hybrid Crystals

    Hybrid Crystals Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...