HTML和CSS基础课程.docx
文本预览下载声明
#PS基础
##前端需要的PS技能 - PS技能（前端需要）：切图、修图、测量 - PS工具： - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓（快捷键：空格） - 缩放（快捷键：Ctrl + 和 Ctrl -） - 标尺（快捷键：Ctrl R，主要是拖出参考线。矩形区域选择的时候，按住Ctrl，就能贴合参考线） - 自由变换（快捷键 Ctrl T） - 盖印可见图层（Ctrl Alt Shift E） - 储存为web格式（Ctrl Alt Shift S）
##图片格式 - PSD（源文件） - JPG、GIF、PNG（导出图） - JPG：不支持透明半透明，所有空白区域填充白色（网页中的大图、高清图：体积大） - GIF：支持透明，不支持半透明（网页中的小图标、动态图片） - png8：支持透明，不支持半透明（网页中的小图标） - png24：支持透明，也支持半透明（图像中存在半透明效果的图片）
##PSD测量注意事项 - 文字右方和下方会有1像素的默认间隙
#代码初识
html 超文本标记语言（结构）
CSS 层叠样式表（样式）
js javascript（行为）
文件编码格式与代码编码格式一致的时候，网页才不会出现乱码，才可以显示正常。
GB2312 中文简体标准
utf-8 国际标准
样式的位置：
行间样式
内部样式
外部样式表
##background
background: {
url(bg.jpg) center top no-repeat gray fixed;
}
等价于：
#bg {
background-image: url(bg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-color: gray;
background-attachment: fixed;
}
##border
border-top/right/bottom/left
solid dash dotted(IE6不支持)
padding
padding-top/right/bottom/left
内边距相当于给一个盒子加了填充厚度，会影响盒子大小
##margin
margin-top/right/bottom/left
上下外边距会叠压
父子级包含的时候，子级的margin top会传递给父级；（内边距替代外边距）
如果给一个盒子仅设置margin-left: auto，那么盒子会跑到最右边；如果设置margin-right: auto，那么盒子就会跑到最左边。同时设置margin-left和margin-right为auto，可以使盒子居中。
##盒模型和结构样式
盒子大小 = border + padding + width/height
盒子宽度 = 左border + 左padding + width + 右padding + 右border
盒子高度 = 上border + 上padding + height + 下padding + 下border
常见样式——结构
width 宽度
height 宽度
background 背景
border 边框
padding 内边距
margin 外边距
复合属性：一个属性多个属性值的命令
##常见文本设置
font: font-stylefont-weightfont-size/line-heightfont-family;font-size（一般为偶数，中文最小号12px）
font-family（中文默认宋体、西文默认是arial，可用逗号分隔多种字体）
color（英文、rgb、十六位进制色彩值）
line-height（文字是在行高的上下居中）
text-align
text-indent（首行缩进，用em缩进字符）
font-weight
font-style
text-decoration：underline、overline、line-through
letter-spacing
word-spacing（以空格为解析单位）
##img
注意写img的alt属性
把img放到一个块里面，默认img与该块的下边框有几个像素的间距。为了解决这个问题，可以为img添加样式display: block;但是这种解决方法有局限性。另外一种方法是给图片添加vertical-align: top;也可以。
##a标签
target=”_self”/”_blank”
在head中添加如下代码，可以让页面中所有的链接都在新页面中打开，其中base代表默认
base target=_blank/
a标签的作用
链接
显示全部