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标签的作用 链接