web程序设计(2)

CSS

• Cascading Style Sheet 层叠样式表

• 使用CSS

  • 行内式

    • 在html标签内的style属性内编写CSS代码,prototype,attribute

    • <P style="color:red(#FF0000);font-size:larger(30px);"></P>
      

  • 嵌入式

    • 在head头内编写css代码,要制定选择器，也就是规则施加的元素

    • <style type="text/css">
          div{
              background-color:white;
              color:red;
              font-size:32px;
      }
          @import "some.css"
      </style>
      

  • 链接式

    • 在head头内使用标签链接外部css文件，css文件放在content目录下

    • rel 属性用于指定当前文档与被链接文档的关系。

      rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以同时使用。

      rel 或 rev 属性的值都是以空格分隔的关系列表。实际的关系名和它们的含义取决于你自己：HTML 或 XHTML 标准并没有正式提出这两种属性。例如，一系列文档中的某个文档可能会在链接中包含它的关系：

      从源到目标的关系是移动到下一个文档，而从目标到源的关系则是返回前一个文档。

      rel是relationship的缩写,主要是方便浏览器看

    • <link type="text/css" rel="stylesheet" href="...css" />
      

  • CSS规则

    • CSS文档由一条条CSS规则组成
    • 选择器{属性:值;}

  • CSS选择器

    • 从一个html document文档中选择一个元素

    • 基本选择器

      • 在html元素的开始标记中，多个元素可以使用同一个自定义的css类，但不能有相同的id特性名

      • 如果在一个元素的样式定义中，既有元素选择器，又有类选择器和id选择器，则id选择器的优先级最高，其次时类选择器，最后才是元素选择器

      • ID

        • #footer{} footer就是我们定义的id

        • 当无法通过类选择器或者元素选择器区分要选择的元素时，或者只选择某一个元素时，可以先给该元素指定一个id特性

        • <p id="footer"></p>
          

      • 标记(tag){ex:p,h4},也叫做元素选择器

      • 类别(class)

        • .special{…}等价于*.special

        • E.classname选择E元素内所有class="classname"的元素

        • <p class="special" >...</p>
          

    • 组合选择器

      • 交集
        • p.special{…}
        • p#footer{…}
        • 同时筛选 ID,tag
      • 并集,群组选择器
      • div,.special,#footer{…}用逗号隔开各个选择器
        • 既作用div,也作用.special也作用#footer
      • *通配符选择器
        • 选择HTML文档里的所有元素

    • 关系选择器

      • E F
        • 选择后代元素，选择E元素的一个或多个和F相同的后代元素
        • 如果F为*表示选择所有后代元素
      • E>F
        • 选择子元素，选择E元素的子元素F,不包括孙子
      • E~F
        • 选择兄弟元素，选择E元素后面的所有兄弟元素F
      • E+F
        • 选择相邻兄弟元素，选择E元素和F元素相邻，而且F和E具有相同的父元素

    • 特性选择器

      • E[att]

      • 选择具有att特性的E元素

      • E[attribute=“value”]

        • 选择具有att特性且特性值等于val的E元素

      • E[att~=“val”]

        • 选择具有att特性且特性值为用空格分隔的字词列表，其中一个字词列表等于 “val" 的E元素

      • E[att|=“val”]

        • 选择具有att特性且特性值为val-开头的E元素

      • E[att^=“val”]

        • 选择具有att特性且特性值以val开头的E元素

      • E[att$=“val”]

        • 选择具有att特性且特性值以val结尾的E元素

      • E[att*=“val”]

        • 选择具有att特性且特性值包含val的E元素

    • 伪类选择器

      • 伪类选择器的选择符和伪类名称之间用:分隔
      • E时某个元素，如果省略表示任意元素和*一样
        • E:link
          • 设置未被访问时的E元素样式，（用于a)
        • E:visited
          • 设置已被访问过的E元素样式
        • E:hover
          • 设置鼠标悬停在E上的样式
        • E:active
          • 设置元素在被用户激活（在鼠标按钮按下与抬起之间）的样式
        • E:focus
          • 设置元素在成为输入焦点的样式
        • E:root
          • 匹配文档的根元素,在html文档里永远是html
        • E:first-child
          • 匹配第一个子元素
        • E:last-child
        • E:only-child
          • 匹配仅有的一个子元素
        • E:nth-child(n)
          • 匹配第n个元素
        • E:nth-last-child(n)
          • 匹配倒数第n个
        • E:first-of-type
          • 匹配同类型元素的第一个同级兄弟元素
        • E:last-of-type
        • E:only-of-type
        • E:nth-of-type(n)
        • E:nth-last-of-type(n)
        • E:checked
          • 匹配处于选中状态的元素（radio,checkbox)
        • E:enabled
          • 处于可用状态的元素
        • E:disabled
          • 处于禁用状态的
        • E:not(s)
          • 与s不匹配的元素

    • 位元素选择器

      • 一般用于控制所选元素的特殊样式，由::分隔
        • E::first-letter
          • 设置元素内容第一个字符的样式
          • 此位元素仅作用于块元素，内联元素必须先通过css的display属性将其设置为块级元素才可以使用该选择器
        • E::first-line
          • 设置元素内容第一行的样式
        • E::before
          • 设置在元素前发生的内容
        • E::after
          • 设置在元素后发生的内容
        • E::selection
          • 设置元素被选择时的颜色

• CSS单位表示

  • 长度单位

    • px,%百分比
    • em.相对于父元素的字体大小比例，一般用来表示一行文字的高度，在默认字体大小的情况下，1em=100%=14px=10.5pt
    • 控制字间距和行间距时，多数情况下都是使用em作为长度单位

  • 颜色单位

    • HEX,用16进制表示#FF0088,如果对于一个颜色通道值一样，可以简写成#F08

    • RGB,用十进制表示颜色，格式为rgb(R,G,B),取值在0-255或者0%-100%

    • RGBA,rgba(R,G,B,A),多了一个alpha通道，（透明度),该值为0-1,包括0,1或者是0%-100%,0表示完全透明，1表示完全不透明

    • transparent是全透明黑色的速记法，效果与rgba(0,0,0,0)相同，

      .test
      {
          color:red;
          background:transparent;
      }
      

  • 角度，时间和频率

    • deg度，rad弧度，turn旋转圈数，grad梯度，一圈为400grad
      • 30deg表示顺时针转30度，-30deg表示逆时针
    • ms,s
    • hz,khz

• css的盒模型

  • content:显示元素内容的区域，外边界包围的矩形区域称为content-box
  • padding:,内边距，padding的外边界包围的矩形区域称为padding-box,内边距是padding-box减去content-box构成的矩形环区域
  • border:边框，border的外边界包围的矩形区域称为border-box,边框区域是指border-box减去padding-box的矩形环区域
  • margin:外边距，图中虚线包围的矩形区域减去border-box构成的矩形环区域

• 外边距

  • margin属性用于设置元素边框4个方向的外边距属性，控制环绕某元素的矩形区域与其他元素之间的距离，包括margin-top,margin-right,margin-bottoom,margin-left

  • 左右的外边距对所有元素都起作用，但上下的只对块元素起作用

  • 如果提供全部4个参数值，将按照上右下左顺序作用

  • 如果只提供一个参数值，将作用于全部的4条边

  • 如果提供两个，第一个作用于上下，第二个作用于左右

  • 如果提供三个，第一个作用于上，第二个左右，第三个下，

  • 如果希望块级元素居中显示，只需要将左右的外边距设置为auto即可

  • <div style="margin:10px auto 5px auto;width:200px;height:100px"
    

• 内边距

  • padding用于控制元素内部与元素边框之间的间隔，padding-top,padding-right,padding-bottom,padding-left,可以使用长度值或者百分比
  • 用法与margin相似

• box-sizing

  • 用于设置元素的边界盒宽度和高度计算方式，以便让其以合适的大小适应某个区域的内容

    • content-box

      • 默认，表示元素的宽度和高度仅指content的宽和高，而padding,border不包含在内

      • .tl{box-sizing:content-box;width:200px;padding:10px;border:15px solid #eee;}
        

        设置元素内容和的宽度是200px,边框为15px,形状为实现，颜色为16进制的eee,其效果是在页面的实际宽度是左边框15+左内边距10+内容200+右内边距10+右边框15=250px

    • border-box

      • content,padding,border都被包含在元素的width和height之内了，元素的实际高度和宽度就等于设置的width和height

      • .t2{box-sizing:border-box;width:200px;padding:10px;border:15px solid #eee;}
        

        元素在页面中实际显示的宽度为200px,但元素内容的宽度只有200-20-30=150px

      • 假设我们需要将两个div横向排列在同一行，而且让每个div的宽度都是50%，应该设置为border-box,这样只会改变内部的内容大小

• 盒阴影

  • box-shadow用于设置边框盒的阴影效果

  • box-shadow:none/*默认，无阴影*/
    box-shadow:inset <dx>,<dy>,[n1],[n2] <color> 外阴影
    box-shadow:inset <dx>,<dy>,[n1],[n2] inset <color>内阴影
    

    dx,dy表示对象的阴影水平偏移值和阴影的垂直偏移值，两个值都可以是负数，

    n1表示对象的阴影模糊值，n2表示对象的阴影扩散至，这两个值都不允许为-，可省略

    color表示外延阴影的颜色

  • box-shadow:20px 20px;水平偏移，垂直偏移
    box-shadow:20px 20px 30 px 水平偏移，垂直偏移 模糊值
    box-shadow:20px 20px 30 px 30px 水平偏移，垂直偏移 模糊值 扩散至
    box-shadow:20px 20px 30 px gray 水平偏移，垂直偏移 模糊值 颜色
    box-shadow:20px 20px 30 px 30px gray 水平偏移，垂直偏移 模糊值 扩散值 颜色
    

• CSS样式控制

  • 背景图和背景渐变控制

    • background

      • background:[background-color]||[background-image]||[background-repeat]||[background-attachment]||[background-position]

      • background:url(/Areas/Chaptor/border.png) #faf6df no-repeat center 5%
        /*显示背景色为#fafdf,背景图片为.png,不平铺，图像随对象滚动，位置为center 5%*/
        

      • background-color

        • 用于设置或检索对象的背景色，默认为transparent(透明的),当同时定义背景颜色和背景图像，背景图像会覆盖在背景颜色上
        • 如果设置了background-image建议同时设置background-color以便当背景图像不可见时用背景色来填充

      • background-image

        • url指定背景图像
        • linear-gradient使用线性渐变创建背景图像
          • linear-gradient([[| to <side-or-corner],]?[,]+)
          • 第一个参数指定渐变的方向，省略时默认从上到下，该参数可以时渐变角度，（正顺负逆）（90）表示从左向右,(-90)从右向左，也可以是to top,to right,to left,to bottom,to left top,to left bottom,to right top,to right bottom
        • radial-gradient使用放射性渐变创建背景图像
        • repeating-linear-gradient使用重复的…
        • repeating-radial-gradient
        • 如果将多个图像组合在一起作为背景，url之间用逗号分隔

      • 定位控制

        • background-repeat
          • 设置或检索背景图像的平铺方式
          • no-repeat不平铺
          • repeat(默认）图像在横向和纵向平铺，即图像沿水平和垂直重复排列
          • repeat-x,横向上平铺
          • repeat-y
        • background-attachment
          • 指定图像时随内容滚动还是位置固定
          • fixed秃顶
          • scroll(defualt)背景图像相对于元素固定，当元素内容滚动时，背景图像不会跟着滚动，但会跟着元素的祖先元素或窗体滚动
        • background-position
          • 若设置position不设置repeat则背景图像固定在指定位置
          • 若都设置，则该位置作为background-repeat的起点
          • 如果指定两个值，第一个用于横坐标，第二个纵坐标
          • 一个值作用两个
        • background-size
          • auto图像的实际大小（默认
          • cover等比例缩放到完全覆盖容易，此时可能超出容易
          • contain等比例缩放到宽度或高度与容器的相等，背景图像始终在容器内
          • 如果给两个值，第一个宽度，第二个高度
          • 只给一个，表示宽度，高度默认为auto即等比缩放
        • background-origin
          • 指定从哪个区域位置开始显示背景图像
          • padding-box默认，从padding包含padding开始
          • border-box,从border开始
          • content-box,
        • background-clip
          • 可以只将背景的某一部分作为背景

  • 取值有:border-box,padding-box,content-box

• 显示样式控制

  • CSS的display属性用于控制元素是否显示以及是作为块元素显示还是作为内联元素显示，块元素指从新行开始显示，且块的大小不能大于其父容器，内联元素不从新行开始，而是根据其自身内容的高度和宽度调整大小

    • none
      • 隐藏对象，与visibility的hidden不同，该隐藏对象不保留物理空间
    • block
      • 将对象作为块级元素，该元素前后会自动添加换行符
    • inline
      • 作为内联元素，即行内元素，类似span,元素前后没有换行符
    • inline-block
      • 作为内联块元素，即行内块元素
    • list-item
      • 作为列表项显示
    • table
      • 将对象用块级表格来显示，（类似table),表格前后带有换行符
    • inline-table
      • 内联表格，前后没有换行符
    • table-caption
      • 表格标题显示，类似caption
    • table-row
      • 表格行显示，类似tr
    • table-cell
      • 作为表格单元格显示，类似td
    • table-row-group
      • 作为一个或多个行的分组显示，类似tbody
    • table-column
      • 作为表格列显示，col
    • table-column-group
      • 作为一个或多个列的分组，colgroup
    • table-header-group
      • 作为表格的标题分组显示，thead
    • table-footer-group
      • 作为表格的脚注分组，tfoot
    • run-in
      • 根据上下文自动将对象作为块级元素或内联显示
    • inherit
      • 从父元素继承

  • 水平居中

    • .h-center{text-align:center;border:1px solid red}
      

  • 水平垂直都居中

    • 适用于不超过一行的文字

    • <div style="line-height:100px;vertical-align:middle;text-align:center;">
         something
      </div>
      

    • 如果是块级元素如div,img，可将父元素的display设置为table-cell(td),同时设置父元素得到text-align属性为center,vertical-align的值为middle,并指定父元素的宽和高，然后将块级元素的display设置为inline=block

    • <div style="display:tabel-cell;vertical-align:middle;text-align:center;width:200px;height:200px;border:1px solid red">
          <div style="display:inline-block;width:100px;">
      somethin        
          </div>
      </div>
      

  • 可见性(visibility)

    • 控制元素在页面中是否隐藏，但始终保留物理空间，取值有visible,hidden,collapse
    • collapse
      • 隐藏表格的行或列
    • 如果希望某个元素可见，其父元素也必须是可见的

• 字体控制

  • font
    • 复合属性，设置对象的文本特性，如font:15px 宋体
  • font-style
    • 字体样式，有italic(斜体)，oblique(倾斜)，normal(正常)
  • font-variant
    • 设置对象中的文本是否为小型的大写字母
  • font-weight
    • 字体的粗细
    • normal(标准),bold(粗体),bolder(更粗)，lighter(更细),和100-9009个数字值，100-900定义从细到粗的字体，400相当于normal,700等价于bold
  • font-size
    • 字体尺寸
  • font-family
    • 字体
    • 中文网页设置字体的排序方式,宋体，Arial,Helvetica,sans-serif
  • font-stretch
    • 文字是否横向拉伸变形
    • normal(正常),semi-expanded(比normal宽一个基数)

• 文本控制

  • 控制文本字符串的对齐方式，缩进

  • text-indent(首行缩进)

    • 默认单位是pt,默认值是0,内联元素要使用该属性必须让该元素表示为block或者inline-block

    • .inline-demo span{text-indent:30px;}
      .inline-block-demo span{display:inline-block;text-indent:30px;}
      .block-demo span{display:block;text-indent:30px;}
      

  • text-overflow(文本溢出)

    • 是否使用省略标记(…)标示对象内文本的溢出

    • 默认值为clip,当对象内文本溢出时不显示…,而是将溢出部分裁剪掉

    • ellipsis:显示…

    • .clip{overflow:hidden;width:200px;white-space:nowrap'text-overflow:clip;}
          p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;}
      

  • text-align

    • 对齐方式
    • center(居中),left(左对齐)，right(右对齐),justify(两端对齐)

  • text-transform

    • 大小写
    • none(无转换)
    • capitalize(将每个单词的第一个字母转化成大写)
    • uppercase(转化成大写)
    • lowercase(转换成小写)

  • text-decoration

    • 装饰，（下划线，闪烁)
    • none
    • underline
    • line-through(删除线)
    • overline

  • text-shadow

    • 是否有阴影及模糊效果

  • letter-spacing(字间距)

    • 设置文本字符框之间插入的空格数

    • normal正常间距

    • length,设定字符与字符之间的间隔大小,允许为负长，但会更挤

    • p{letter-spacing:10px;}
      

  • word-spacing(词间距)

    • 单词之间插入的空格数

  • vertical-align

    • 垂直对齐方式

  • word-wrap(自动换行)

    • 当当前行超过指定容器的边界时是否断开转行

    • normal(允许溢出)

    • break-word(边界换行)

    • p{word-wrap:break-word;}
      

  • white-space

    • 设置对象内空格的处理方式
    • normal(默认)，空白会被浏览器忽略
    • pre，用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行，类似

    • nowrap,强制在同意行内显示所有的文本，直到文本结束或者遭遇br对象为止
    • pre-warp用等宽字体显示预先格式化的文本，不合并文字间的空白距离，边界换行
    • pre-line保持文本的换行，不保留文字间的空白距离，碰到边界换行

  • direction

    • 设置文本流的方向

  • unicode-bidi

    • 用于同一个页面里存在从不同方向读进的文本显示

  • line-height（行间距)

    • 指字体最底端与字体内部顶端之间的距离，可以来控制文本 行与行之间的距离

    • normal(允许内容顶开或溢出指定的容器边界)，length(用长度值指定行高，可以为负值)，percentage(用百分比指定行高，百分比是基于字体的高度尺寸，可以是是负值),number(用乘积因子指定行高，可以为负值)

    • div{line-height:1.5;}
      

  • tab-size

    • 检索或设置对象中的制表符长度

• 定位控制

  • 定位属性(position)
    • static（流布局,按照从左向右，从上到下的顺序依次显示,各元素之间不会发生重叠,),默认
    • 绝对定位(absolute)
    • relative,
    • 固定布局(fixed)
  • z-index

• 溢出

  • overflow设置当元素的内容溢出区域，如何处理
    • auto自定判断是否显示滚动条
    • hidden剪切掉
    • scroll始终显示滚动条
    • visible默认，溢出部分自动呈现在元素框之外

• 浮动和清除

  • float定义元素往哪个方向浮动
    • none，默认值，不浮动
    • left向左浮动,其他元素流向该元素的右边
    • right向右浮动，其他元素流向该元素的左边
  • clear定义哪个方向不允许出现浮动元素
    • none两边都可以由
    • right清楚右边
    • left清楚左边
    • both

• clip剪切

  • 定义一个剪切矩形，按上右下左的顺序提供从元素左上角(0,0)坐标计算的4个遍的偏移值，其中任何一个值都可以用auto替换，auto表示此边不剪切

  • clip:rect(auto 50px 20px auto);
    /*上边和左边不剪切，右边第50个像素，下边第20个像素
    

• 边框控制

  • border

    • 复合属性，用于一次性设置边框的宽度样式颜色

    • border:[border-width]||[border-style]||[border-color]
      

  • border-width

    • 用于设置元素的边框宽度，上右下左定义，也可以用
    • border-top-width,border-right-width,border-bottom-width,border-left-width
    • medium默认宽度，thin更细，thick更粗

  • border-style

    • 也可以用border-top-style
    • none无边框
    • hidden隐藏
    • dotted点状
    • dashed虚线
    • solid实现
    • double双线
    • groove 3d凹槽边框
    • ridge 3d 凸槽边框
    • inset 3d凸便边框
    • outset

  • border-color

    • 也可以border-top-color

  • border-radius

    • 设置边框圆角

    • 提供两个参数

    • 第一个表示水平半径

    • 第二个表示垂直半径

    • 这两个参数以/分隔

    • 其中每个参数允许设置1-4个值，如果省略第二个参数，默认等于抵押给

    • 设置水平半径时，如果提供4个值，按照上左，上右，下右，下左作用域4个角

    • 提供1个作用all

    • 2个，第一个作用与上左下右

    • 3个，第一个作用域上座，第二个作用上右下左，第三个下右

    • border-top-width,border-right-width,border-bottom-width,border-left-width

    • medium默认宽度，thin更细，thick更粗

  • border-style

    • 也可以用border-top-style
    • none无边框
    • hidden隐藏
    • dotted点状
    • dashed虚线
    • solid实现
    • double双线
    • groove 3d凹槽边框
    • ridge 3d 凸槽边框
    • inset 3d凸便边框
    • outset

  • border-color

    • 也可以border-top-color

  • border-radius

    • 设置边框圆角
    • 提供两个参数
    • 第一个表示水平半径
    • 第二个表示垂直半径
    • 这两个参数以/分隔
    • 其中每个参数允许设置1-4个值，如果省略第二个参数，默认等于抵押给
    • 设置水平半径时，如果提供4个值，按照上左，上右，下右，下左作用域4个角
    • 提供1个作用all
    • 2个，第一个作用与上左下右
    • 3个，第一个作用域上座，第二个作用上右下左，第三个下右