html 关于背景的属性 意义和设置

背景

background              背景
background-color        背景色 
background-image        背景图片
background-repeat       背景图片是否重复
background-position     背景图片的位置
background-attachment 背景图片是否滚动
  1. 背景色会铺满整个容器
  2. 背景不会占用容器的宽高(颜色和图片都不会)
    如果div没有宽高,内容可以把容器的宽高撑开
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-color:green;
background-color:rgba(255,107,35,1);
background-color:#008800; /* #080 */
background-color:transparece;
}
</style>

<div>

</div>
  1. 背景图片
    url(图片的地址)
    none:没有背景图(默认)
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-image:url(images/img.jpg);
background-image:none;
}
</style>

<div>

</div>
  1. 背景图平铺
no-repeat       不重复平铺
repeat-x        横向平铺
repeat-y        纵向平铺 
repeat          全部平铺 (默认)
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:repeat;`
  1. 背景图片位置
传数值 :       背景图片离左上角的距离
x           正值/负值
y           正值/负值

传关键字:   
x           left/right/center
y           top/bottom/center

如果只传一个值得话,那另一个值默认为center
如果两个值都不写的话,那默认为0, 0点,左上角
background-position: 50px 50px;
background-position: center 50px;
  1. 背景是否滚动
scroll      背景图片跟随滚动条滚动(默认)
fixed       背景图片不会跟随滚动条滚动
background-attachment:fixed;
  1. 背景复合样式
<style>
div{
background-image:url(images/img.jpg);
background-position:left top;
background-repeat:no-repeat;
background-attachment:scroll;

background:green url(images/img.jpg) no-repeat center top;
}
</style>

边框

边框

Border

Code示例1:

div{
border:10px dotted rgha(255,0,0,0);
}
  1. 粗细
    1px
  2. 样子
    solid 实线
    dashed 虚线
    dotted 点画线(不同浏览器显示的不一样)
  3. 颜色
    red 颜色的英文单词
    #f00 16进制
    rgb(255,0,0) rgb的表示
    rgba(255,0,0,0.5) rgba的表示(CSS3内容)
  4. 设置样式
    • 复合样式(三个值合起来) border:10px dotted rgha(255,0,0,0);
    • 单一 样式

一个值:

div{
<!-- width style color -->
border-width:1px;
border-style:solid;
border-color:red;
}

四个值:

div{
<!-- 上 右 下 左 -->
border-width:1px 2px 3px 4px;
border-style:solid dashed dotted solid;
border-color:red green blue black;
}

两个值:

div{
<!-- 上下 左右 -->
border-width:1px 2px;
border-style:solid dashed;
border-color:red green;
}

三个值:

div{
<!-- 上 左右 下 -->
border-width:1px 2px 3px;
border-style:solid dashed dotted;
border-color:red green black;
}
div{
<!-- top right bottom left -->
border:1px solid red;
border-top:3px solid green;<!-- 覆盖以前的效果 -->
border-bottom-width:10px;<!-- 覆盖一个属性 -->
}
  1. 特征
    边框是一个非矩形
div{
<!-- 实现倒三角 -->
width:0px;
height:0px;
border:20px solid #fff;
border-top-color:blue;
}

CSS三种样式

三种样式

行间样式表

内部样式表

  • 出现位置:出现在html里,通常放在head里面
  • 作用范围:当前页面

外部样式表

  • 出现位置:出现在外部文件
  • 引用方式:link标签

index.css文件:

div {
width:200px;
height:300px;
}

html文件

<link rel="stylesheet" href="index.css" /> 

行为,结构,样式相分离

  • HTML 结构
  • CSS 样式
  • JS 行为

WEB(二)–PS

PS简单操作

  1. 清除参考线

    视图菜单下,清除参考线

  2. 面板显示

    窗口菜单下,各种面板如:信息面板、历史记录面板
    Tab键可以隐藏窗口

  3. 图层的概念

  4. 移动工具

    自动选择
    配合图层选择,只能移动当前现在图层内容

  5. 选区工具

    蚂蚁线
    可以在信息面板中,看到选区大小
    在信息面板中,下拉菜单中,选择“面板选择”,可以切换单位
    选择区域,并选择对应的图层,可以通过Ctrl+C进行复制内容
    通过Ctrl+R调出标尺来,可以拖拽冲辅助线,按住Ctrl键,进行选择区域会自动贴合辅助线

  6. 裁切工具

    可以调整区域,也可以旋转选区
    使用Ctrl+D来取消选区
    选择好了后,按Enter键完成裁剪

  7. 吸管工具

    拾色器,前景色

  8. 文字工具

    选择文字后,可以显示字体,字号,颜色等
    也可以通过字符面板查看属性
    ESC退出

  9. 抓手工具

    用来移动画布的
    可以进行实际像素,合适像素等切换
    快捷键为空格键

  10. 放大镜工具

    快捷键为Ctrl+ +/-
    配合抓手工具快捷键Space键一起操作很好

  11. 切图

    选择对应的图层,使用选区工具,选择对应内容,Ctrl+C,Ctrl+N,Ctrl+V
    可以存储图片,文件菜单,存储为Web格式,有四种格式gif,jpeg,png-8,png-24

    • gif 只支持全透明,动图
    • jpeg 大图清晰
    • png-8 只支持全透明,文件比gif小
    • png-24 支持全透明和半透明
  12. 截图

    Windows下用PrtSc键
    Mac下用Command+Shift+3/4
    QQ截图,百度测网速

  13. 清除按钮上文字(抠图技巧)

    选区工具,选择背景区域
    Ctrl+T切换,拖动选区,覆盖文字后,按Enter确认,Ctrl+D清除