HTML5技术

重温CSS之背景、文本样式 - jerrylsxu

字号+ 作者:H5之家 来源:博客园 2016-02-19 14:00 我要评论( )

CSS背景样式: ①.使用关键字来设定值:center、top、bottom、left、right;如:background-position:top; ②.使用百分比来设定值:如:background-position:50%;这个表现方式比较复杂,background-position的默认值是0% 0%,在功能上相当于top left;如果你

CSS背景样式:

      ①.使用关键字来设定值:center、top、bottom、left、right;如:background-position:top;

      ②.使用百分比来设定值:如:background-position:50%;这个表现方式比较复杂,background-position的默认值是0% 0%,在功能上相当于top left;如果你  想把一个图像放在水平方向       2/3、垂直方向 1/3 处,可以这样声明:

body { background-image:url('img.gif'); background-repeat:no-repeat; background-position:66% 33%; }

      ③.使用长度值来设定值:长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

body { background-image:url('img.gif'); background-repeat:no-repeat; background-position:150px 30px; }

  5.背景关联(设置背景图像是否固定或者随着页面的其余部分滚动)background-attachment属性,默认值:scroll;设置背景图像固定,值:fixed;如:background-attachment:fiexd;

CSS文本样式:

通过文本属性,可以改变文字的颜色、字符间距、对齐样式、装饰文本、对文本缩进等。

  • 文本缩进:使用text-indent属性,用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值,这会产生一种“悬挂缩进”的效果。如:p {text-indent:5em;},这个让p标签内的文本首行缩进5em;
  •                    text-indent属性还可以使用负值,不过在为text-indent设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:p{text-indent:-5em;padding-left:5em;};

     text-indent属性使用百分比表示,百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为5%,所影响元素的第一行会缩进其父元素宽度的5%。

     注意:text-indent属性是可以继承的,一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

      2.文字对齐方式:text-align属性来设置某个元素中的文本对齐方式

    h1 { text-align: left; } h2 { text-align: center; } h3 { text-align: right; } h4 { text-align: justify; }

      3.   文字的间距:letter-spacing属性可以改变文字之间的标准间距,默认值是:normal,等同于0。letter-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为letter-spacing设置一个负值,会把它拉近:

    .positive { letter-spacing: 5px; } .negative { letter-spacing: -0.2em; }

      4.   行与行之间的间距:使用line-height属性设置行间距(行高),默认值是:normal,设置百分比,基于当前字体尺寸的百分比行间距;设置数字,行距将等于数字乘以当前字体大小的值;设置长度,为固定的行间距;设置inherit 规定应该从父元素继承 line-height 属性的值。

    line-height:150%; /*行间距为当前字体的一半*/ Line-height:2;/*如果当前字体为12px,则文本的行距为24px*/ Line-height:5px;/*使用固定长度*/

    注:为保证重新设置文本大小时,行距能正常调整,建议采用相对较灵活的长度单位,如em和百分比。

      5. 字符转换:使用text-transform属性处理文本的大小写,默认值是none,显示为标准文本,不做任何转换。

    h2 { /*文本中每个单词首字母大写*/ text-transform: capitalize; } h3 { /*只有大写字母*/ text-transform: uppercase; } h4 { /*无大写字母,只有小写字母*/ text-transform: lowercase; }

      6.       文本修饰:使用text-decoration属性来修饰文本,默认值是none,不做任何修饰。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • Hero Patterns - 聚合各种 SVG 背景纹理素材的网站 - 梦想天空(山边小溪)

      Hero Patterns - 聚合各种 SVG 背景纹理素材的网站 - 梦想天空(山边

      2017-05-02 12:00

    • 《人民的名义》---简单的文本分析 - 视野

      《人民的名义》---简单的文本分析 - 视野

      2017-04-22 18:00

    • 多行文本溢出显示省略号(…)全攻略 - 兰梓

      多行文本溢出显示省略号(…)全攻略 - 兰梓

      2017-03-08 14:02

    • 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应) - h

      使用div模拟textarea,实现文本输入框高度自适应(附:js控制textare

      2017-01-12 12:10

    网友点评