zoukankan      html  css  js  c++  java
  • Css文字效果

    1.文字样式:font-family

    字体:sans-serif(字体醒目);serif(笔画的开始和结束有额外的修饰部分,易读性较强)

    *页面设计最好有多个备选字体

    2.文字大小:font-size

    分绝对大小和相对大小,采用相对大小px,%,em(%,em相对于父标记而言,没有设定父标记则用浏览器默认值)。

    不同浏览器采用相对字体大小。

    3.字体颜色:color

    span标记,可以针对某些具体字体来做改变,行内元素

    4.文字粗细:font-weight

    5.文字斜体:font-style

    normal,italic,oblique

    6.上下划线,删除线:text-decoration

    blink闪烁,ie不支持,ff可以

    7.英文字母大小写:text-transform

    capitalize首字母大写;uppercase大写;lowercase小写

    8.段落对齐方式

    水平:text-align;垂直:vertical-align,对于文字本身而言,该属性对于块级元素不起作用,对于表格有用。

    9.行间距:line-height 字间距:letter-spacing

    10.首字放大:float和span,通过span标签对首字进行特殊的样式控制,然后float:left突出显示

    伪类:first-letter,也可以实现类似首字放大,但该属性的文字对一些其他的CSS样式支持的不好,不推荐使用。

    例子:百度搜索内容显示

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>百度搜索页面</title>
     6 <style type="text/css">
     7 body{
     8     margin:0px;
     9     padding:0px;}
    10 p{
    11     margin:0px;
    12     font-family:Arial, Helvetica, sans-serif;}
    13 p.title{
    14     padding-bottom:0px;
    15     font-size:16px;}
    16 p.content{
    17     padding-top:3px;
    18     font-size:13px;
    19     line-height:18px;}
    20 p.link{
    21     font-size:13px;
    22     padding-bottom:25px;
    23     color:#008000;}
    24 span.search{
    25     color:#c60a00;}
    26 span.quick{
    27     color:#666666;
    28     text-decoration:underline;}
    29 p.title span.search{
    30     text-decoration:underline;}
    31 
    32 </style>
    33 </head>
    34 
    35 <body>
    36  <p class="title"><a href="#">中国<span class="search">春节</span>网欢迎您</a></p>
    37  <p class="content">在中国传统的节日中,最热闹。最受人们重视的节日是<span class="search">春节</span><span class="search">春节</span>,是农历的元旦,是... 送压岁钱是潮汕春节习俗中重要的一项,长辈要分钱给后辈,能挣钱的后辈也要送...</p>
    38  <p class="link">www.chunjie.net.cn 2012-11-08  - <span class="quick">百度快照</span></p>
    39 </body>
    40 </html>
    You are never too old to set another goal or to dream a new dream!!!
  • 相关阅读:
    Qt Release 构建时强制包含调试信息
    Spring Kafka(二)操作Topic以及Kafka Tool 2的使用
    PostgreSQL全文检索简介
    qcow2虚拟磁盘映像转化为vmdk
    Nodejs-JWT token认证:为什么要使用token、token组成(头部、载荷、签名)、jwt使用过程以及token对比session的好处(单点登录、减轻服务器压力、存储信息等)
    [Kotlin] Multi ways to write constuctor in Kotlin
    [CSS] Use CSS Transforms to Create Configurable 3D Cuboids
    [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
    [Kotlin] Typecheck with 'is' keyword, 'as' keyword for assert type
    [Kotlin] When to add () and when not to
  • 原文地址:https://www.cnblogs.com/youguess/p/4224279.html
Copyright © 2011-2022 走看看