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 类型
<meta charset="utf-8" /> 代码编码格式
utf-8 国际标准
代码的编码格式要与文件的编码格式要统一!!
- CSS基础样式
1.行间样式
<!DOCTYPE html> <html> <head> <!--html注释--> <meta charset="utf-8" /> <title></title> <style> </style> </head> <body> <div style=“width: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{width:400px;height:200px;background-color:#5ee3e5;}
- 常见样式——background
#box
{ width: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 删除线