zoukankan      html  css  js  c++  java
  • html+css学习笔记 [基础1]

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

    PSD (源文件)                                                   

    JPG/GIF/PNG  (导出图)                                    //网页大图高清图 体积大

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

    GIF:支持透明,不支持半透明                               //小图标、动画图片

    png8:支持透明,不支持半透明                            //小图标

    png24:支持透明,也支持半透明                          //半透明图片

    图片1

    文字右方和下方会有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;

    盒子模型

    图片1

    盒子大小 = 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…

  • 相关阅读:
    php省市联动实现
    json学习笔记
    ajax无刷新技术
    session和cookie
    缩略图,透明度,水印,图片合并
    PHP画矩形,椭圆,圆,画椭圆弧 ,饼状图
    PHP字母数字验证码和中文验证码
    PHP画图的基本步骤GD库
    文件上传和多文件上传
    js身份证验证
  • 原文地址:https://www.cnblogs.com/aix1314/p/3868203.html
Copyright © 2011-2022 走看看