1.前端开发语言介绍
HTML(Hypertext Markup Language)—— 结构—— 超文本标记语言
CSS(Cascading Style Sheets)—— 样式—— 层叠样式表
JS(javascript)—— 行为—— 客户端脚本语言
2.样式表出现的位置
行间样式表:<div style="……"></div>
内部样式表:<style>…………</style>
外部样式表:<link href="style.css" rel="stylesheet"/>
3.注释
<!-- html 注释 -->
/* css 注释 */
注意有空格
4.样式详解
属性:属性值;
width 宽度
height 高度
复合样式一:background 背景
background-color 背景颜色
background-image 背景图像
background-repeat 背景图是否重复
background-attachment 背景图是否固定
background-position 背景图显示的位置
复合样式二: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 外边距
外边距的问题:1、上下外边距会叠压;
2、父子级包含的时候子级的margin会传递给父级;(内边距替代外边距)
外边距复合:margin: top right bottom left;
5.盒模型(标准)
盒子大小 = border + padding + width/height
盒子宽度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border
6.常见样式 — 文本设置
font-size 文字大小(一般均为偶数)
font-family 字体(中文默认宋体)
color 文字颜色(英文、rgb、十六位进制色彩值)
line-height 行高
text-align 文本对齐方式
text-indent 首行缩进(em缩进字符,1em=[font-size] 相当于1个字)
font-weight 文字着重
font-style 文字倾斜
text-decoration 文本修饰
letter-spacing 字母间距
word-spacing 单词间距(以空格为解析单位)