• 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的文字样式、文本样式、颜色、背景、列表等样式属性。
    • 这些属性有的具有子属性，从不同方面描述外观样式，因而比较灵活，可以使用单个子属性定义某一方面的样式，也可以使用复合属性定义整体的样式，在使用时应注意属性和属性之间的顺序及制约关系。
  • 相关阅读:
    LUA 协程
    LUA GC 简单测试
    软件重构-笔记
    托管执行过程
    文件夹 加密
    db 文件 查看 打开 工具 db 中文 版 navicat 中文
    qq sid qq sid 是什么 qq sid 怎么用
    windows系统，联系人文件。个性化。
    csdn 音乐 怎么拦截 提交后的程序 csdn 栏目 音乐 csdn 添加 音乐
    CSDN博客栏目设置个性化
  • 原文地址：https://www.cnblogs.com/fz17/p/14123291.html
Copyright © 2020-2023  润新知