一.前端开发语言介绍
html(Hypertext Markup Language)—— 结构 超文本标记语言css(Cascading Style Sheets)—— 样式 层叠样式表
js(javascript)—— 行为
二.html超文本标记语言
< 标记
<html> 标签
<html> </html> 标签对
<!DOCTYPE HTML> 声明文档类型
<meta charset="utf-8"/> 代码编码格式
单标签:直接在后面斜杠结束的标签叫做单标签
三.样式表出现的位置
行间样式表
<div style="……"></div>
内部样式表
<style>…………</style>
外部样式表
<link href="style.css" rel="stylesheet"/>
四.常见样式 一 background
属性:属性值;width 宽度height 高度background 背景background-attachment: fixed; 背景是否滚动background-color: gray; 背景颜色background-image: url(bg.jpg); 背景图background-repeat: no-repeat; 背景图是否重复background-position: center 0px; 背景图位置
五.常见样式 一 border
border 边框
border-width 边框宽度border-style 边框样式border-color 边框颜色
边框样式:solid 实线dashed 虚线dotted 点线(IE6不兼容)
六.常见样式 一 padding
padding-top 上边内边距
padding-right 右边内边距
padding-bottom 下边内边距
padding-left 左边内边距
padding: top right bottom left;
注意:内边距相当于给一个盒子加了填充厚度会影响盒子大小。
七.常见样式 一margin
margin 外边距外边距的问题:1、上下外边距会叠压;2、父子级包含的时候子级的margin-top会传递给父级;(内边距替代外边距)外边距复合:margin: top right bottom left;
八.盒模型
盒子大小 = border + padding + width/height
盒子宽度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border
九.常见样式 一结构
结构样式:
width 宽度
height 高度
background 背景
border 边框
padding 内边距
margin 外边距
十.复合属性:一个属性多个属性值的命令,叫做复合属性。
常见样式 —文本设置
font-size 文字大小(一般均为偶数)
font-family 字体(中文默认宋体)
color 文字颜色(英文、rgb、十六位进制色彩值)
line-height 行高
text-align 文本对齐方式
text-indent 首行缩进(em缩进字符)
font-weight 文字着重
font-style 文字倾斜
text-decoration 文本修饰
letter-spacing 字母间距
word-spacing 单词间距(以空格为解析单位)
十一.常见复合属性
复合属性:
background
border
padding
margin
font:font-style | font-weight | font-size/line-height | font-family;
十二.常见样式(17个)
width 宽度 height 高度
background 背景 border 边框
padding 内边距 margin 外边距
font-size 文字大小 font-family 字体
color 文字颜色 line-height 行高
text-align 文本对齐方式 text-indent 首行缩进
font-weight 文字着重 font-style 文字样式
text-decoration 文本修饰 letter-spacing 字母间距
word-spacing 单词间