zoukankan      html  css  js  c++  java
  • css的其他相关样式属性

    一、颜色

      1、预定义的表示颜色的单词

        red,black.gray,pink......

      2、16进制表示

        # + 6位16进制的数字0 1 2 3 4 5 6 7 8 9 a b c d e f 

        如果两两一样可以合并成3个数字

        #fff;

      3、rgb

        rgb(,,)0-255的数

      4、rgba

        rgba(,,,)前三个是0-255的数,最后一个是0-1的数

        有时候a不起作用,我们会用透明度来调节0是全透明1是不透明

    二、一些其他的相关属性

      line-height:20px;//指定每行的高度

      text-align:center;//文本对齐方式

      text-indent:2em;//缩进2倍的汉子宽度 控制文本首行的缩进,px或%都可;

      letter-spacing:2px;//汉字间距为2px(针对中文)控制字母之间的距离;

      word-spacing:8px;//单词间距为8px(针对英文)

      100px;//内容宽度

      height:299px;//内容高度

      font-size:18px;//字体大小

      font-family:"微软雅黑";//字体

      font-weight:700;//字体加粗

      text-decorarion:none;//文字的点缀none(无)underline(下划线)overline(上划线)line-through(中划线)

      font-style:设置字体倾斜,可能的属性有normal、italic、oblique;
      text-overflow:当文本溢出包含元素时发生的事情;可能的值有
          clip  修剪文本。
          ellipsis  显示省略符号来代表被修剪的文本。
          string  使用给定的字符串来代表被修剪的文本。
      text-transform :控制英文的大小,可能的值有
        capitalize  文本中的每个单词以大写字母开头。
        uppercase  定义仅有大写字母。
        lowercase  定义无大写字母,仅有小写字母。
      white-space:控制文本与文档源代码的关系,可能值有
        normal 默认,空白会被浏览器忽略。
        pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
        nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
        pre-wrap 保留空白符序列,但是正常地进行换行。
        pre-line 合并空白符序列,但是保留换行符。
        inherit 规定应该从父元素继承 white-space 属性的值。

    三、文字阴影(css3的一些新增属性)

      text-shadow: 水平位置 垂直位置 模糊距离 模糊颜色

      1》突出的字体

        text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;

      2》凹陷的字体

        text-shadow:-1px -1px 1px #000,1px 1px 1px #fff; 

    四、z-index

      当多个元素设置定位时,重叠的定位元素可以通过z-index来调整堆叠的顺序。默认为0;数值越大,越在上层,可正可负

      注意:1、只有定位元素才有该属性,其他的元素没有(porition:absolute;relative;fixed)

    五、鼠标的形状

      cursor:default;箭头pointer;指针text;文本move;移动箭头help;帮助wait;等候

    六、元素的显示隐藏

      1》display:none;这个是隐藏元素,但是会向后台传递值,只是看不见了,位置也不复存在了而已

      2》visibility:hidden;这个是和上述类似,但是还是占据原来的位置。

      3》还有一种方式是搞透明

    七、文字超出

       1、 overflow:wisible;超出部分显示hidden;超出隐藏auto;超出就显示滚动条scroll;超不超出都有滚动条

       2、文本溢出处理

          text-overflow:clip;溢出裁剪ellipse;省略号(需要和white-space:nowrap;overflow:hidden;搭配使用才能产生省略号)

       3、强制一行显示

          white-space:nowrap;强制一行显示normal;正常

       4、关于单词换问题

          word-break:浏览器默认break-all;允许在单词内换行keep-all;只在半角或者连字符处换行

    八、针对表单元素的轮廓

      1、一般设置为outline:0;    outline:4px solid red;

      2、textarea resize:none;不允许手动调整文本框的大小

    九、使文字与图片对齐的方式

        1、img{vertical-align:middle;}默认是基线对齐,top顶部对齐bottom底部对齐middle中部对齐

        2、一般图片默认底部会有3px的缝隙(下面说一下解决的方式)

          1》vertical-align:top;2》display:block;

    十、关于精灵图

      CSS精灵图是处理网页背景图的方式,它将网页涉及的所有零星的背景图集中到一张大图上,然后把大图放到网页作为背景,根据backgroun-position进行调整

        优势:提高网页的加载速度

    十一、字体图标

      1、优点:1》可以做出和图片一样的事情2》本质是文字,所以可以修改各种样式,不至于失真3》本身的体积小,携带信息完整4》几乎所有的浏览器都支持,是移动设备的必备良药

      2、使用(阿里巴巴)

        1》声明字体

          @font-face{font-family:....;.....}

        2》使用字体

          xxx{font-family:,,,,;}    

  • 相关阅读:
    算法系列(三)
    .net页面生命周期
    初级程序员的学习方法见解
    .net面向对象学习笔记(二)
    算法系列(二)
    “automation服务器不能创建对象”的问题的解决方案大全
    UNKNOWN.RPT 无法将请求提交后台处理
    水晶报表ActiveX控件打印
    .net中调用js乱码解决办法
    GridView自动序号
  • 原文地址:https://www.cnblogs.com/dhrwawa/p/10508534.html
Copyright © 2011-2022 走看看