您的位置：首页 > Web前端 > CSS

html+css学习笔记 [基础1]

2014-07-25 15:39 736 查看

-------------------------------------------------------------------------------------------------------------

PSD （源文件）

JPG/GIF/PNG （导出图）                                    //网页大图高清图体积大

JPG：不支持透明半透明，所有空白区域填充白色

GIF：支持透明，不支持半透明                               //小图标、动画图片

png8：支持透明，不支持半透明                            //小图标

png24：支持透明，也支持半透明                          //半透明图片

文字右方和下方会有1像素的默认间隙；

------------------------------------------------------------------------------------------------------

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 内边距

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；

常见样式

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 单词间距

开发环境

Photoshop（切图、修图、测量）
Dreamweaver

浏览器（两大类）：
IE浏览器：    IETester（IE6、IE7、IE8）、IE9、IE10……
标准浏览器：firefox（fireBug）、chrome、safari、oprea…

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航