`

css 文字样式

    博客分类:
  • CSS
阅读更多
css 通过 font-family
h2{font-family:黑体,幼圆;}                                   
意思:如果有黑体就用黑体,幼圆有幼圆就用幼圆       
p{font-family:Arial, Helvetica, sans-serif;}
意思:字体中没有Arial,就用Helvetica,没有sans-serif,都没有就用浏览器默认字体

文字的颜色
h2{ color:rgb(0%,0%,80%); }  //rgb(红0%,绿0%,蓝80%)
 
p{
    color:#333333;                    //数字控制方式
    font-size:13px;
}
p span{ color:blue; }            //英文单词控制方式

文字的粗细
span.one{ font-weight:100; }
span.two{ font-weight:200; }
span.three{ font-weight:300; }   
//100 200 300 文字粗细和文字大小基本没有什么区别

h1 span{ font-weight:lighter;}  //font-weight 是定义文字粗细的 lighter 为正常文字,bold表示粗体normal,表示细体

文字下划线,顶划线,删除线
p.one{ text-decoration:underline; }            /* 下划线 */
p.two{ text-decoration:overline; }            /* 顶划线 */
p.three{ text-decoration:line-through; }    /* 删除线 */
p.four{ text-decoration:blink; }            /* 闪烁 */

文字斜体
h1{ font-style:italic; }            /* 设置斜体 */
h1 span{ font-style:normal; }        /* 设置为标准风格 */
p{ font-size:18px; }
p.one{ font-style:italic; }
p.two{ font-style:oblique; }

英文字母大小写
p{ font-size:17px; }
p.one{ text-transform:capitalize; }        /* 单词首字大写 */
p.two{ text-transform:uppercase; }        /* 全部大写 */
p.three{ text-transform:lowercase; }    /* 全部小写 */

css 段落文字(段落水平对齐,垂直对齐,行间距,子间距,首字放大)

td.top{ vertical-align:top; }            /* 顶端对齐 */
td.bottom{ vertical-align:bottom; }        /* 底端对齐 */
td.middle{ vertical-align:middle; }        /* 中间对齐 */

垂直对齐
<!--
span.zs{ vertical-align:10px; }
span.fs{ vertical-align:-10px; }
-->

首字下沉
p span{
    font-size:60px;                /* 首字大小 */
    float:left;                    /* 首字下沉 */
    padding-right:5px;            /* 与右边的间隔 */
    font-weight:bold;            /* 粗体字 */
    font-family:黑体;            /* 黑体字 */
    color:yellow;                /* 字体颜色 */
}

字体间距
p.one{
    font-size:10pt;
    letter-spacing:-2pt;    /* 字间距,绝对数值,负数 */
}
p.second{ font-size:18px; }
p.third{ font-size:11px; }
p.second, p.third{
    letter-spacing: .5em;    /* 字间距,相对数值 */
}

行间距
p.one{
    font-size:10pt;
    line-height:8pt;    /* 行间距,绝对数值,行间距小于字体大小 */
}
p.second{ font-size:18px; }
p.third{ font-size:10px; }
p.second, p.third{
    line-height: 1.5em;    /* 行间距,相对数值 */
}






分享到:
评论

相关推荐

    CSS表格样式1

    3. **表头样式**:`th`元素可以使用`text-align`、`font-weight`等属性调整文字对齐方式和粗细。例如: ```css th { text-align: left; font-weight: bold; } ``` 4. **单元格内边距**:使用`padding`属性...

    CSS3文字特效艺术文字样式代码.zip

    "CSS3文字特效艺术文字样式代码.zip"这个压缩包文件显然是为了展示如何利用CSS3来创建各种炫酷的艺术文字效果。 这个代码集合可能包含了多个示例,每个示例都是一个独立的文字特效,如动画、阴影、渐变、旋转、缩放...

    CSS样式初始化commonInitialize.css

    在网页设计中,CSS(Cascading Style Sheets)样式被广泛用于定义页面元素的外观、布局和结构。CSS样式初始化是开发过程中一个重要的步骤,它旨在消除浏览器之间的默认样式差异,确保网页在不同浏览器上的一致性表现...

    Qt css样式大全+详细书签pdf.zip

    本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料,旨在帮助开发者深入理解和掌握Qt界面美化技术。 首先,"Qt css样式大全(整理版) - wang13342322203的博客 - CSDN博客.html"是王...

    常用控件CSS样式

    "常用控件CSS样式"是一个集合,包含了各种经典且美观的CSS样式,适用于多种常见的网页控件,这些样式可以自定义并应用于项目中,以提升用户体验和界面美观度。 "设计模edo-Flat-UI-c4d26b2"这个文件很可能是这个...

    birt公用CSS样式

    在创建BIRT报表时,CSS(Cascading Style Sheets)样式起到了至关重要的作用,它们用于控制报表的外观和布局,使其符合用户界面的需求。本主题将深入探讨“birt公用CSS样式”,并结合提供的文件内容进行详细说明。 ...

    10款很棒的菜单CSS样式

    这些CSS样式可能会结合Web字体服务或本地字体,为菜单文字带来个性化的视觉效果。 10. **触摸友好**:考虑到触摸设备的广泛使用,这些CSS样式应确保菜单在触屏上的操作同样流畅。触摸友好的菜单通常有较大的点击...

    《精通CSS+DIV网页样式与布局》光盘源码

     3.1 CSS文字样式  3.2 文字实例一:模拟Google公司Logo   3.3 文字实例二:制作页面的五彩标题   3.4 CSS段落文字  3.5 段落实例:百度搜索   第4章 用CSS设置图片效果   4.1 图片样式   4.2 ...

    CSS层叠样式表介绍

    **CSS层叠样式表简介** ...以上就是关于CSS层叠样式表的基本介绍,包括其概念、特点、类型和基本写法,以及常用的字体属性和值。通过熟练掌握这些知识,开发者可以更好地控制网页的样式,创建出美观且易于维护的网页。

    各种CSS按钮样式

    3. **文字样式**:`font-family`、`font-size`、`font-weight`和`text-align`属性可控制按钮上的文本样式。`text-decoration`用于添加下划线、删除线等装饰。 4. **按钮状态**:通过`:hover`、`:active`和`:focus`...

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    4. **颜色和字体**:CSS允许设置文字颜色、背景色、边框颜色等,可以使用颜色名称、十六进制、RGB、RGBA、HSL、HSLA等方式表示。同时,可以定义字体家族、大小、样式(粗体、斜体)和行高,以优化文本可读性。 5. *...

    CSS按钮样式大全(精选)

    3. **文字样式**:使用`font-size`、`font-family`、`text-align`等控制文字的大小、字体和对齐方式。`letter-spacing`调整字符间距,`line-height`控制行高。 4. **悬停、激活和聚焦状态**:利用`:hover`、`:...

    css表格样式打包下载

    - `th`:为表头单元格设置样式,通常使用`font-weight`加粗字体,`text-align`控制文字对齐,还可以使用`background-color`设置背景色。 - `td`:处理普通数据单元格的样式,与`th`类似,但通常不需要加粗字体。 ...

    CSS层叠样式表

    CSS样式的定义主要涉及样式规则的创建,包括属性和值的配对,用于控制元素的样式,如颜色、字体大小、布局等。样式规则可以被定义在不同的地方,包括内部样式表(位于HTML文档的`&lt;head&gt;`部分)、外部样式表(单独的....

    css高端样式精华手册

    9. **文本和字体**:调整文本样式,如字体大小、颜色、行高、字母间距等,以及使用网络字体服务和自定义字体。 10. **颜色和背景**:掌握颜色模式(RGB、RGBA、HSL、HSLA),以及如何设置背景图片、渐变和背景重复...

    css2.0样式表中文手册

    CSS2.0允许定义字体家族、大小、样式(粗体、斜体等)、颜色、行高、对齐方式、间距等。还可以通过`@font-face`规则引入自定义字体,实现跨浏览器的字体效果。 **6. 浮动和定位** 浮动(`float`)用于创建流式布局...

    CSS3卡片折叠样式3D文字标题特效

    "CSS3卡片折叠样式3D文字标题特效"就是一个利用CSS3的强大功能,结合JavaScript来实现的动态网页设计。这个特效使得页面标题在鼠标悬停时能够呈现出3D折叠效果,增加了用户体验的互动性和视觉吸引力。 首先,我们要...

    css样式表代码

    字体是 CSS 样式表中一个非常重要的属性,它可以确定文本的字体、大小和样式。常见的字体有: * serif:衬线字体 * sans-serif:无衬线字体 * monospace:等宽字体 设 定 字 号 字号是 CSS 样式表中一个非常重要的...

    50个css button样式

    3. **字体**:`font-size`、`font-weight`和`font-family`可以改变按钮上的文字大小、粗细和字体类型。 4. **尺寸**:`width`和`height`可以控制按钮的尺寸,而`padding`则可以增加内边距,使文字与边框之间有适当...

    CSS3样式表- 层叠样式表种类.pptx

    CSS3的主要作用是定义网页元素的布局、颜色、字体、尺寸等视觉表现。通过使用CSS3,开发者可以精确控制网页元素的位置和排列,实现响应式设计,适应不同设备的屏幕大小。此外,CSS3还支持样式层叠,这意味着可以从多...

Global site tag (gtag.js) - Google Analytics