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

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…

html+css学习笔记 [基础1]的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  3. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  4. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  5. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  6. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  7. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  8. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  9. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

随机推荐

  1. Struts2_概述

  2. 关于div 浮动在select，或table控件之上

    <div style="position:absolute; display:none; z-index:99999" id="d3" onmouseov ...

  3. 路由器之VPN应用与配置指南

    应用背景 近日,公司需要在外人员通过直接访问连接到公司内网,实现办公等一系列操作,这个时候就需要通过配置路由器VPN实现该需求了. 无线企业路由器可以帮助中小型企业搭建高性价比.稳定的企业办公网络,灵 ...

  4. 20150301—ASP.NET的Repeater

    Repeater与GridView等数据列表一样,都是用来显示数据库的信息的,其中Repeater是最基本的列表形式,其用法也比较灵活. 一.Repeater的位置: 工具箱-数据-Repeater ...

  5. 9款精美别致的CSS3菜单和按钮

    1.超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...

  6. 分布式PostGIS系列【2】——pgpool-II

    一.pgpool-II简介 二.pgpool-II安装与配置 三.分布式Postgis性能测试

  7. 真正明白C语言二级指针（转载）

    指针是C语言的灵魂,我想对于一级指针大家应该都很熟悉,也经常用到:比如说对于字符串的处理,函数参数的“值,结果传递”等,对于二级指针或者多级指针,我想理解起来也是比较容易的,比如二级指针就是指向指针的 ...

  8. USB时钟为什么是48MHz

        在学习2440的USB配置时钟中,发现它的时钟需要设置成48MHz固定的,这个我就来兴趣了,为什么这里面USB的时钟一定要是48M呢?在网上找了众多文章,都是讲解如何配置2440的MPLL和U ...

  9. 卡通投掷游戏ios源码

    卡通投掷游戏源码,一款基于cocos2d很有意思的卡通投掷游戏源码,使用重力感应摇动手机让猴子打转,然后点击屏幕任何地方将猴子抛出去,抛出去的过程中会收集星星,游戏的规则就是抛得越远越好,收集的星星最 ...

  10. 2015.1写留言板的时用的 知识点和函数 --->总结

    一:时间函数和uniqid() 1:uniqid():生成唯一的id, 无参数返回的字符串的长度为13,有参数为23 2:时间和时间戳相互转换的php函数 ①:time()  返回当前unix的时间戳 ...