zoukankan      html  css  js  c++  java

  • web十二讲，CSS样式

    CSS属性值中的单位

    • 绝对单位
      • 绝对定位在网页中很少使用，一般多用在传统平面印刷中，但在特殊场合使用绝对单位是很有必要的。
      • 绝对单位包括：英寸、厘米、毫米、磅、pica(皮卡)，其对应的英文单位分别是in(1in=2.54cm)、cm、mm、pt(1pt=1/72in)、pica(pc，1pc=12pt)。
    • 相对单位
      • 相对单位与绝对单位相比显示大小不是固定的，它所设置的对象受屏幕分辨率、视觉区域、浏览器设置以及相关元素的大小等因素影响。
      • 经常使用的相对单位包括：em、ex、px、% 。
        • em ： 元素的字体高度
        • ex ： 字体x的高度
        • px ： 像素Pixels
        • % ： 百分比Percentage

    CSS属性命名规范

    • CSS样式属性由多个单词构成时，单词之间使用“-”连接。

    CSS颜色与背景

    • 颜色color属性

      color属性用于设置元素字体的色彩，该属性的语法比较简单，但取值比较多样，可以是颜色名称、函数、十六进制数等形式。

      1. 颜色名称：使用red、blue、yellow等CSS预定义的表示颜色的参数。CSS预定义了17种颜色。
        • 17种标准色：aqua浅绿色、black黑色、blue蓝色、fuchsia紫红色、gray灰色、 green绿色、lime石灰色、maroon栗色、navy藏青色、olive橄榄绿色、orange橙色、purple紫色、red红色、silver银色色、teal蓝绿色、white白色、yellow黄色。
        • 130多种混合色。
      2. RGB函数：使用rgb(RRR、GGG、BBB，或rgb(r%，g%，b%)，字母R或r、G或g、B或b分别表示颜色分量红色、绿色、蓝色，前者参数的取值为0到255，后者参数的取值为0到100.
      3. 十六进制数：使用“#RRGGBB”或“#RGB”的形式，其中每个位十六进制数从0到F取值，比如#FFC0CB表示pink。

    • CSS背景属性

      属性 描述
      background 简写属性，作用是将背景属性设置在一个声明中。
      background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
      background-color 设置元素的背景颜色。
      background-image 把图像设为背景。
      background-position 设置背景图像的起始位置。
      background-repeat 设置背景图像是否重复及如何重复。

    • 背景background属性

      用于设置指定元素的背景色、背景图案等。

      1. background-color：关键字|rgb值|transparent

        • background-color属性设置元素的背景颜色

        • 元素背景的范围：

          • background-color属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界(但不包括外边距)。如果包括有透明部分(如虚线边框)，会透过这些透明部分显示出背景色。

        • 可能的值：

          值 描述
          color_name 规定颜色值为颜色名称的背景颜色(例如red)。
          hex_number 规定颜色值为十六进制值的背景颜色(例如#ff0000)。
          rgb_number 规定颜色值为rgb代码的背景颜色(例如rgb(255,0,0))。
          transparent 默认。背景颜色为透明。
          inherit 规定从父元素继承background-color属性值

      2. background-image：url(*.jpg)|none

      3. background-attachment：scroll|fixed

      4. attachment-repeat：repeat|repeat-x|repeat-y|no-repeat

      5. attachment-position：百分比|长度|关键字

    • 背景图像

      • 要把图像放入背景，需要使用background-image属性。background-image属性的默认值是none，表示背景没有放置任何图像。

      • 如果需要设置一个背景图像，必须为这个属性设置一个url值。

        body{background-image:url(/i/eg_bg_04.gif);}

      • background-image属性为元素设置背景图像。

      • 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

      • 默认情况：背景图像位于元素的左上角，并在水平和垂直方向上重复。

      • 提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

      • background-image属性会在元素的背景中设置一个图像。

      • 根据background-repeat属性的值，图像可以无限平铺，沿着某个轴(x轴或y轴)平铺，或者根本不平铺。

        • 如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。

        • 属性值repeat导致图像在水平垂直方向都平铺。

        • repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。

          body{
    background-image:url(/i/eg_bg_03.gif);
    background-repeat:repeat-y;  /* 垂直重复 */
    background-repeat:repeat-x;  /* 水平重复 */
    background-repeat:repeat;  /* 水平、垂直都平铺 */
    background-repeat:no-repeat;  /* 不重复 */
}

      • 初始背景图像(原图像)根据background-position属性的值放置。

    • 背景定位

      • 利用background-position属性改变图像在背景中的位置。
      • background-position属性值有三种设置方式。
        • 使用关键字，如：top、bottom、left、right和center。
          • 关键字在水平方向有left、center、right。
          • 关键字在垂直方向有top、center、bottom。
          • 若只出现一个关键字，默认另一个关键字是center。
        • 使用长度值，如：100px或5cm。
          • 需要指定2个值，水平值和垂直值，并且2个值之间用空格隔开。
          • 长度值是元素距内边距区左上角的偏移。偏移点是图像的左上角。
        • 使用百分数值。
          • 需要指定2个值，水平值和垂直值，并且2个值之间用空格隔开。
          • 假如只提供一个百分数值，那么它被视为水平值；垂直值会默认为50% 。
          • background-position的默认值是0% 0%，在功能上相当于top left。所以背景图像总是从元素内边距的左上角开始平铺，除非设置了不同的位置值。

    • 背景关联

      • 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

      • 通过background-attachment属性防止这种滚动。通过这个属性可以声明图像相当于可视区是固定的(fixed)，因此不会受到滚动的影响：

        body{
    background-img:url(/i/eg_bg_02.gif);
    background-repeat:no-repeat;
    background-attchment:fixed;
}

    CSS字体

    • CSS字体样式

      • font-size数值字号

        • 绝对大小：in、cm、mm、pt、pc为单位，例如16pt。
        • 相对大小：em、ex、px、%，例如font-size:1.5em|150%
        • 使用关键字来指定大小：xx-small | x-small | small | medium | large |x-large | xx-large。

      • font-family专门用于设置字体名称系列。

        • 基本语法：font-family:字体1,字体2, … ,字体n

        • 语法说明：属性值为多个字体名称时，可使用逗号分隔。浏览器依次查找字体，只要存在就使用该字体，不存在就向后找，以此类推，直至最后一种字体，若仍不存在则使用默认字体。如果字体名称中有空格，必须使用双引号将字体名称括起来。

          #p4{font-size:xx-large;font-style:oblique;font-family:黑体,隶书;}

      • font-style设置字体样式，在HTML中可使用em标记和i标记将文字设为斜体，在CSS中可通过设置font-style属性来调整字体的风格，如显示斜体字样。

        • font-style:normal /* 正常样式 */
        • font-style:italic /* 斜体显示 */
        • font-style:oblique /* 倾斜字体显示，比斜体字更斜 */

      • font-weight设置字体加粗，在HTML中可使用strong标记和b标记设置字体加粗。在CSS中可通过设置font-weight属性来调整字体的粗细。

        • 基本语法：font-weight:normal | bold | bolder | lighter |100 | 200 | ... | 900
        • 语法说明：100-900(9个层次，数字越小字体越细，数字越大字体越粗)

      • font-variant设置字体变体，主要用于设置英文字体正常显示或全大写显示。

        • font-variant:normal，默认正常显示
        • font-variant:small-caps，英文字母大写显示

      • font设置字体的多个属性，包括字体粗细、风格、字体变体、大小/行高及字体名称。

        • 基本语法：font:font-style font-weight font-variant font-size/line-height font-family
        • 语法说明：利用font属性一次完成多个字体属性的设置，属性值之间用空格隔开。前3个属性值可以不分先后顺序，默认为normal。大小和字体名称系列必须显示指定，先设置大小，再设置字体系列。需要设置行高时，可以写在字体大小的后面，中间用/分隔，行高为可选的属性。font属性可以继承。

    • 使用em来设置字体大小

      • W3C推荐使用em尺寸单位。

      • 1em等于当前的字体尺寸。如果一个元素的font-size为16像素，那么对于该元素，1em就是16像素。在设置字体大小时，em的值会相当于父元素的字体大小改变。

      • 浏览器中默认的文本大小是16像素。因此1em的默认尺寸是16像素。

      • 可以使用下面这个公式将像素转换为em：pixels/16=em

      • 另外：16等于父元素的默认字体大小，若父元素font-size为20px，那么公式需改为：pixels/20=em

        h1{font-size:3.75em;} /* 60px/16=3.75em */
h2{font-size:2.5em;} /* 40px/16=2.5em */
p{font-size:0.875em;} /* 14px/16=0.875em */

    CSS文本

    • CSS文本属性可定义文本的外观。

    • 通过文本属性，可以设置文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等。

      属性 描述
      color 设置文本颜色
      direction 设置文本方向
      line-height 设置行高
      letter-spacing 设置字符间距，指字符之间的距离
      text-align 设置文本对齐方式
      text-decoration 向文本添加修饰，如下划线、删除线
      text-indent 缩进文本首行
      text-shadow 设置文本阴影
      text-transform 控制元素中的字母
      unicode-bidi 设置文本方向
      white-space 设置空白的处理方式
      word-spacing 设置字间距，指单词之间的距离

    • CSS文本样式

      1. letter-spacing：normal | 长度单位
      2. line-height：normal | 比例 | 长度单位 | 百分比
      3. text-indent：长度单位 | 百分比单位
      4. text-decoration:none | underline | overline | line-through
      5. text-transform：uppercase | lowercase | capitalize[首字母大写] | none
      6. text-align：left | right | center | justify
      7. vertical-align:top|middle|bottom

    • CSS列表样式

      1. list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
        对<ol> </ol> <ul> </ul>列表均有效。
      2. list-style-image : url(*.gif) | none
      3. list-style-position : inside | outside

    小结

    • 介绍了CSS的文字样式、文本样式、颜色、背景、列表等样式属性。
    • 这些属性有的具有子属性，从不同方面描述外观样式，因而比较灵活，可以使用单个子属性定义某一方面的样式，也可以使用复合属性定义整体的样式，在使用时应注意属性和属性之间的顺序及制约关系。
  • 相关阅读:
    Leetcode 121. Best Time to Buy and Sell Stock
    Leetcode 120. Triangle
    Leetcode 26. Remove Duplicates from Sorted Array
    Leetcode 767. Reorganize String
    Leetcode 6. ZigZag Conversion
    KMP HDU 1686 Oulipo
    多重背包 HDU 2844 Coins
    Line belt 三分嵌套
    三分板子 zoj 3203
    二分板子 poj 3122 pie
  • 原文地址：https://www.cnblogs.com/fz17/p/14123291.html
Copyright © 2011-2022 走看看