HTMLCSS学习笔记（一）----代码初识、盒模型

html 超文本标记语言 ---- 结构

css 层叠样式表 ---- 样式

js javascript ---- 行为

HTML 超文本标记语言

< 标记

<html> 标签

<html> </html> 标签对

保存的代码文件必须是 .html 才可以被浏览器识别！！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> ! 声明

doc document 文档

type 类型

utf-8 国际标准

代码的编码格式要与文件的编码格式要统一！！

CSS基础样式

1.行间样式

<!DOCTYPE html>
<html>
    <head> <!--html注释-->
        <meta charset="utf-8" />
        <title></title>
        <style>
        </style>    
    </head>
    <body>
        <div style=“300px;height="200px”;background:blue>块</div>
    </body>
</html>

2.内部样式

<!DOCTYPE html>
<html>
    <head> <!--html注释-->
        <meta charset="utf-8" />
        <title></title>
        <style>
            #box{width:400px;height:200px;background:blue;}
            /*内部样式表*/
             /*css注释*/
        </style>    
    </head>
    <body>
        <div id="box">块</div>
    </body>
</html>

用内部样式时，每个模块<div>要给它特定的name

3.外部样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>

    <link href="style.css" type="text/css" rel="stylesheet">

    </head>
    <body>
        <div id="box">块</div>
    </body>
</html>

CSS文件

#box{400px;height:200px;background-color:#5ee3e5;}

常见样式——background

#box
{ 400px;
 height:200px;
 background-color:#5ee3e5; }
属性：属性值
background 背景
/*
background-attachment：fixed；背景是否滚动
background-color：#gray；背景颜色
background-image: url(pp.jpg);背景图
background-repeat：no-repeat；背景图是否滚动
background-position：center top；背景图位置
*/  解析型语言，写代码时尽量避免，越精简越好
repeat 默认重复 background：blue url(xx.jpg) 
no-repeat 不重复background：blue url(xx.jpg)  no-repeat
repeat-x 横向重复 
repeat-y 纵向重复
向右（左）移动向下（上）移动background：blue url(xx.jpg) no-repeat (-)**px (-)**px
center center 水平居中 垂直居中
fixed 固定
背景background拥有复合属性，属性间无顺序，加空格即可识别。

常见样式——border边框

border-width 边框宽度

border-style 边框样式

border-color 边框颜色

border-top/right/left/bottom 上下左右边框

边框样式

soid 实线

dashed 虚线

dotted 点线（这两种兼容性可能存在问题）

常见样式——padding（内边距）

*内边距相当于给盒子加了填充厚度会影响盒子的大小

padding: top right bottom left

上右下左内边距，不可调换顺序！！

常见样式———margin（外边距）

1.上下外边距会叠压；

2.父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距）

margin：top right bottom left；不可换顺序！！

margin-left：auto ；单写一行板块会一直在右

margin-right：auto；单写一行板块会一直在左

两行一起写板块会一直居中，精简方式：

margin：0 auto

常见样式——结构（盒模型）

结构样式：

width 宽度

height 高度

background 背景

border 边框

padding 内边距

margin 外边距

复合属性：一个属性有多个属性值

background

border

padding

margin

文本设置

行高指的是文字在行高的上下居中

italic 斜体

normal 正常

text-deoration: none（无）

underline 下划线

overline 上边线

line-through 删除线