zoukankan      html  css  js  c++  java
  • 文本格式化

    文本格式化一

    1、控制字体1、指定字体 font-family:"microsoft yahei",arial,"宋体";

    2、字体大小 font-size: px , pt 作为单位 30pt 16pt 常用字体大小:12px - 14px

    3、字体加粗 相当于 <b></b> font-weight : normal / bold ; 建议:通过 该属性取代 b 标签

    4、字体样式 斜体 font-style:normal / italic; 相当于<i></i>

    5、小型大写字母 font-variant : normal / small-caps;

    6、字体属性 font 将所有的属性设置在一个声明当中 font:font-style font-varaint font-weight font-size font-family; eg:font:italic small-caps bold 12px "microsoft yahei",arial; 常用写法: font :font-size font-family; font:bold 12px "microsoft yahei"; 其他写法: font : font-size/line-height font-family; font:12px/24px "microsoft yahei"; line-height : 行高

    文本格式化(二)

    2、文本属性 1、颜色 color : 颜色值 ; rgba(255,0,0,0.5);

    2、文本排列 text-align:left/right/center; 元素中的内容水平对齐方式,大部分主流浏览器,只对行内元素起作用,对块不起作用 vertical-align:top / bottom / middle / baseline; 文本内容垂直对齐方式 baseline : 基线对齐

    3、文字修饰(线条) text-decoration:none / underline none : 去除文本上的线条 underline : 下划线 overline : 上划线 linethrough : 删除线 <s></s>

    文本格式化(三)

    4、行高 每行文本所占据的高度。如果行高的值高于文本的高度,那么这段文本会在行高范围内垂直居中显示。 使用方式: 1、将行高与容器高度设置为一致,从而使容器内的文本垂直居中显示。(只针对一行数据) 2、如果想给文本增加上下的边距,也可以使用line-height 5、首行文本缩进 让元素内的首行文本,空出指定的像素值 text-indent:value; 6、文本阴影 text-shadow:h-shadow v-shadow blur color; 常用例子:text-shadow: 5px 5px 5px #FF0000;

    文本格式化(四)

    3、文本溢出处理 1、处理空白 white-space:normal / nowrap; 出现场合:配合着overflow:hidden;来对超出范围的内容进行隐藏。从而保证元素的高度 2、文本溢出 overflow:hidden; 元素对溢出后的处理 属性:text-overflow: 取值: clip : 裁剪、切割 ellipsis : 隐藏溢出内容并且显示 ... 注意:text-overflow 要 配合着 overflow:hidden;以及white-space:no-wrap一起使用 3、长单词换行 属性:word-wrap 值:normal / break-word(长单词换行)

  • 相关阅读:
    设计人员应该看的15个很酷的 iOS 8 设计
    jQuery 人脸识别插件,支持图片和视频
    无奇不有,20款国外便携式智能手机充电器
    CSS3 过渡特性创建信封效果的联系表单
    Converse.js – 开源的 XMPP 聊天客户端
    推荐12个创建响应式布局的优秀网格框架
    使用 jQuery & CSS3 实现优雅的手风琴效果
    Walkway.js – 用线条制作简约的 SVG 动画
    20套最新的扁平界面设计素材【免费下载】
    神奇的滚动动画,30个视差滚动网站设计
  • 原文地址:https://www.cnblogs.com/stylesu/p/7822057.html
Copyright © 2011-2022 走看看