`

css基础--文字与排版样式

阅读更多

长度font-style字体效果属性:

● 相对类型:是指相对于该属性前一个属性的单位值为基础,来完成目前的设置。而

    浏览器内常用且支持的两种长度单位,是以相对类型出现。

    ◆em相对于字符的高度

设置以目前元素所使用字体的高度为单位,例如:H1{margin:2em}是目前字符高度的两倍。

    ◆Px像素(piexl)

      设置以象素为单位,例如:H1{font-size:20px}

● 绝对类型:绝对类型所使用的单位,将不会随着显示设备的不同而改变,换句话说,

    属性值使用绝对单位时,不论在哪种设备上显示都是一样的,如:屏幕上的1cm与

    打印机上的1cm是一样长的。浏览器所支持的绝对类型的长度单位:

    In     Inches,英寸。        1 in =2.54 cm

   Cm   Centimeters,厘米。

 Mm   Millimeters,毫米。

 Pt     Points,点数。        1 pt=1/72 in

    Pc    Pocas,为印刷单位。1 pc =12 pt

 

文字样式

font-family字体设置属性:

    font-family: 宋体,楷体。。。。。, <st1:country-region w:st="on"><st1:place w:st="on">Georgia</st1:place></st1:country-region>, 'Times New Roman', Times,serif

     font-style: normal | italic(斜体) | oblique(歪斜体)

font-variant文字变体属性:

       font-variant:normal | small-caps(第一个显大)

font-weight字体粗细属性:

       font-weight:normal|bold|bolder|lighter|100-900

font-size文字大小属性:

       font-size:绝对大小|相对大小

    eg)绝对大小

       {font-size:30pt}

       {font-size: xx-small | x-small | small | medium | large | x-large | xx-large}

    eg)相对大小

       {font-size:200%}

       {font-size:2em}

font文字属性:

       font: font-family ||font-style ||font-variant ||font-weight ||font-size

 ("||"表示同时的意思)

eg) {font: font-style:20pt;font-size:italic}

 

text-decoration文字效果属性:

       text-decoration: underline | overline | line-through | blink(闪烁) | none

text-transform文字转换属性:

       text-transform: capitalize(用大写书写)|uppercase(大写字母的)|lowercase( 小写字体的) | none

 

排版样式

text-indent首行缩进 属性  

       text-indent:长度单位|百分比单位

letter-spacing字符间距属性

       letter-spacing:normal|长度单位

     eg){letter-spacing:5pt}加宽5pt

           {letter-spacing:-1pt}紧缩1pt

Word-spacing 单词间距属性

     eg)word-spacing: .15em; 加宽0.15em

style=”line-height:180%; word-spacing:.15em; letter-spacing:.1em;”

line-height行距属性

       line-height:normal|比例|长度单位|百分比

text-align水平对齐属性

       text-align:left |right |center |justify(左右对齐)

vertical-align垂直对齐属性

       vertical-align:baseline(默认)|sub(文字以下标显示)|super(文字以上标显示)|top(垂直向上对齐)|text-top(文字垂直向上对齐)|middle(垂直居中对齐)|bottom(垂直向下对齐)|text-bottom(文字垂直向下对齐)

分享到:
评论

相关推荐

    CSS图片和文字排版教程

    CSS图片和文字排版教程 本教程旨在帮助初学阶段的学员掌握CSS图片和文字排版的知识,通过详细讲解...通过掌握这些CSS文字样式设置,学员可以轻松地实现各种图像与文字的混合排版方式,提高自己的设计能力和排版技巧。

    jQuery和css3文字排版动画效果

    本文将深入探讨如何使用jQuery和CSS3来实现动态的文字排版动画效果。 首先,jQuery是一个轻量级的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果的创建。通过使用jQuery,开发者可以编写简洁、易于理解...

    「HTML+CSS」--自定义按钮样式【002】

    5. **自定义字体和排版**:调整字体、行高和字母间距,使按钮的文字更易读且更具个性。 总结,自定义HTML+CSS按钮样式是一种展示网页设计技巧和创新思维的方式。通过理解和掌握这些基本原理,你可以创造出符合品牌...

    3种jQuery和css3精美文字排版特效插件

    这是一款使用jquery.lettering.js和CSS3制作的精美的文字排版特效插件。该文字排版特效共有3种效果,通过jQuery和css3将文字渲染为各种不同的样式,在进行组合排版,排版效果非常精美。

    css3 文字效果

    5. **文字阴影效果** (text-decoration-color, text-decoration-line, text-decoration-style): 除了基础的下划线,还可以自定义线条颜色、样式和位置。 6. **文字旋转** (transform): `transform`属性可以实现文字...

    CSS--网页使用代码.pdf

    可以使用CSS实现各种效果,如设置背景颜色、更改文字样式、创建悬停效果、调整布局等。例如,要设置所有链接在鼠标悬停时变为蓝色,可以使用以下CSS代码: ```css a:hover { color: blue; } ``` 通过理解并熟练...

    css中文排版心得

    在CSS世界中,中文排版是一项特殊的挑战,因为中文字符的特性与西文有很大区别。以下是一些关于CSS中文排版的重要知识点: 1. **文字属性设置**:要设定中文文字的样式,可以使用`font`属性。例如,`font-style`...

    jQuery CSS3文字排版效果.zip

    《jQuery与CSS3结合实现的文字排版效果探析》 在网页设计中,文字的排版效果对于用户体验和页面美观性具有举足轻重的作用。"jQuery CSS3文字排版效果.zip"这个压缩包文件正是专注于这一领域的实践案例集,其中包含...

    使用CSS text-emphasis对文字进行强调装饰的实现代码

    【CSS text-emphasis属性详解与应用】 在网页设计中,我们常常需要对某些文本进行强调,传统的做法通常是通过加粗字体或使用高亮颜色。随着CSS的发展,现在有一种新的方式——使用`text-emphasis`属性来实现更具...

    Html5+Css3-手机App实例

    CSS3是层叠样式表的最新版本,它极大地扩展了样式设计的可能性,特别是对于响应式布局和动画效果: 1. 响应式设计:通过媒体查询(Media Queries)实现不同设备上的适配,让网页能在手机、平板和桌面电脑上自适应...

    ZhuoZhuoCrayon#my-Nodes#7-CSS格式化排版1

    7-CSS格式化排版文字排版字体设置推荐使用前者(左一)用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体字号、颜色设置设置网页中文字的字

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

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

    HTML5+CSS3网页设计基础-第一章-网页设计基础.pptx

    HTML5+CSS3网页设计基础-第1章-网页设计基础 本章主要介绍网页设计的基础知识,包括网页的基本元素、网页的布局结构、创建HTML5页面、HTML5基础等内容。...CSS样式可以被层叠到多个选择器上,可以继承父元素的样式等。

    CSS基础学习胶片

    CSS允许我们定义文字大小、颜色、行高、字体类型,设置背景色或图片,以及控制边框的宽度、样式和颜色。 总的来说,这份CSS基础学习胶片将带你从零开始学习CSS,包括选择器的应用、布局技术、样式控制和最新的CSS3...

    jQuery+CSS3文字排版效果.zip

    《jQuery与CSS3在文字排版效果中的应用》 在现代网页设计中,优秀的文字排版不仅能够提升网站的美观度,还能增强用户体验,使信息传递更为清晰、有效。jQuery和CSS3作为Web开发中的重要工具,它们在文字排版方面的...

    精通CSS+DIV网页样式与布局

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

    精通CSS.DIV.网页样式与布局 源码

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

    CSS的writing-mode文字排版属性使用教程

    CSS的writing-mode属性是一个用于控制文字书写方向的样式属性,它常用于实现文字的竖排效果,尤其在处理亚洲语言文本布局时非常有用。该属性定义了文本是在垂直方向还是水平方向上流动,以及后续行文本相对于前一行...

    棕色灯塔类企业CSS模板-棕色 web20 企业 展示 黑色.rar

    3. **字体和排版**:定义文字的字体家族、大小、行高、颜色和对齐方式,以及段落间距等。 4. **响应式设计**:为了适应不同的设备和屏幕尺寸,可能会包含媒体查询(media queries),确保在手机、平板电脑和桌面电脑...

Global site tag (gtag.js) - Google Analytics