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>

相关文章