文字与排版样式

``font`文字样式

属性 描述 属性值
font-family 字体族科 任意的字体族科名称,如果有多个中间用逗号隔开,以防止该浏览器无法解析
font-size 字体大小 可以使用绝对大小、相对大小、长度和百分比
font-style 字体样式 normal(普通),italic(斜体)或oblique(倾斜)
font-weight 字体加粗 normal、bold或lighter
font-variant 字体变形 normal(普通)或small-caps(小型大写字母)

注意:使用font同时设置多个文字属性时,属性之间用空格隔开。

排版样式(text)

属性 描述 属性值
letter-spacing 字母间隔 必须符合长度格式,运行使用负值
word-spacing 文字间隔 必须符合长度格式,运行使用负值
text-decoration 文字修饰 underline(下划线),overline(上划线),line-through(删除线),blink(闪耀)或默认无
text-transform 改变大小写 uppercase(大写),lowercase(小写),capitalize(首字母大写)或者none(默认值)
text-align 横向排列 left,right,center或justify
text-indent 文字缩进 一个长度或者百分比
line-height 行高 数字或者百分比,允许负值,当取值和盒子高度一样时,则居中
vertical-align 垂直方式 baseline,top,middle或bottom

文字半透明

color: rgba(r,g,b,a); a 是alpha 透明的意思 取值范围 0~1之间

文字阴影

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

  • h-shadow:必需,水平阴影的位置,运行负值
  • v-shadow:必需,垂直阴影的位置,运行负值
  • blur:可选,模糊的距离
  • color:可选,阴影的颜色

背景和颜色

基本

属性 描述 属性值
background-color 背景颜色 与color设置相同,也可以使用transparent(透明)值,必须设置高(宽),要不然无法显示
background-image 背景图片 图片URL
barkground-repet 背景重复 repeat(默认),repeat-x,repeat-y,no-repeat
barkground-attachment 背景附件 scroll(滚动),fixed(固定)
barkground-position 背景位置 横向的关键字(left、center或right),纵向的关键字(top、center或bottom)百分比和长度也可以用做安排背景图像的位置

背景位置使用

background-position : length || length
background-position : position || position

先指定background-image属性。默认值为:(0% 0%)。

如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%,第二个值将用于纵坐标。position 后面是x坐标和y坐标,且如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

背景附着

background-attachment : scroll | fixed

基本参数:

  • scroll:背景图像是随对象内容滚动
  • fixed:背景图像固定

背景简写

background属性的值的书写顺序官方并没有强制标准的,不过我们这样建议:

background: transparent url(image.jpg) repeat-y  scroll 50% 0;

背景透明

background: rgba(0,0,0,0.3); /*最后一个参数是alpha 透明度  取值范围 0~1之间*/
border: 1px solid rgba(0,0,0,0.3);

背景缩放

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain;会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏 */
/* background-size: cover; 会自动调整缩放比例,保证图片始终完整显示在背景区域*/

列表样式

属性 描述 属性值
list-style-type 列表样式 disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha或none
list-style-image 图像列表 url或none
list-style-position 列表符号的缩进 inside或outside

表格样式

表格边框样式

我们可以使用如{border:1px solid red;}tablethtd设置边框。

折叠边框

{border-collapse:collapse(合并边框)|separate(默认,边框独立)|inherit(继承父级样式)}

设置宽度和高度

通过widthheight这两个属性定义,可以是百分比也可以是绝地值

表格对齐方式

我们使用text-alignvertical-align来设置表格中文本的对齐方式

定义表格标题位置

caption-size:top|bottom|left|right|inherit|

设置表格布局

使用label-layout属性来设置是否保证单元格宽度不被改变,其属性值如下:

  • auto:当内容超过宽度是能自动换行则自动换行,不能自动换行则增加宽度(默认值)
  • fixed:无论内容是否超过宽度,都保持原来的宽度
  • inherit:继承父级样式

元素的隐藏和显示

display显示

设置或检索对象是否及如何显示,且隐藏之后,不再保留位置。

  • none:隐藏对象
  • block:显示元素

visibility可见性

设置或检索是否显示对象,隐藏之后,继续保留原有位置。

  • visible:对象可见
  • hidden:对象隐藏

overflow溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

属性 含义
visible 不剪切内容也不添加滚动条
auto 超出自动显示滚动条,不超出不显示滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll 不管超出内容否,总是显示滚动条

用户界面样式

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状,语法如下:

 cursor :  default默认|pointer手形|move移动|text文本光标

轮廓outline

是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,语法如下:

outline : outline-color ||outline-style || outline-width

不过我们平时都是使用outline:0或者outline:none来去掉。

防止拖拽文本域resize

resize:none这个单词可以防止火狐、谷歌等浏览器随意的拖动文本域。

溢出的文字隐藏

word-break:自动换行

属性值 含义
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行

white-space:设置或检索对象内文本显示方式

  • normal:默认处理方式
  • nowrap:强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。

text-overflow:文字溢出

设置或检索是否使用一个省略标记...标示对象内文本的溢出:

  • clip:不显示省略标记,而是简单的裁切
  • ellipsis:对象内文本溢出时显示省略标记

其他特殊技术

精灵图技术

CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图。最后,我们使用CSS的background-imagebackground-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。

滑动门技术

为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。其技术核心就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

字体图标技术

字体图标是一种特殊的字体,它看起来像图标,但是却有着字体的各种功能,能自由的改变大小和颜色。

首先,我们要在样式里面声明字体:

@font-face {
font-family: 'icomoon'; //可改变的值,用于命名
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

然后我们给盒子使用字体:

span {
font-family: "icomoon"; //对于曾经申明的名字
}

最后给盒子里面添加结构:

<span></span>

css文字与排版的更多相关文章

  1. CSS样式案例(1)-文字的排版

    本篇介绍的是小窗文字内容的排版,通过该篇文章可以让小伙伴们熟悉以下几个知识点: word-space.overflow.text-overflow. 最终的展示效果如下: 参考步骤: 1. 建立htm ...

  2. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  3. css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  4. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  5. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  6. CSS文字大小单位px、em、pt详解

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  7. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  8. 通过HTML及CSS模拟报纸排版总结

    任务目的 深入掌握CSS中的字体.背景.颜色等属性的设置 进一步练习CSS布局 任务描述 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致 页面中的各字体大小, ...

  9. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

随机推荐

  1. android gradle NDK简介

    本章介绍在Android开发中,关于NDK,gradle相关的知识点. 1.NDK简介 (1)NDK是一系列工具的集合 NDK提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将s ...

  2. 30分钟LINQ教程(转)

    在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有关的语言特性 1.隐式类型 (1)源起 在隐式类型出现之前, 我们在声明一个变量的时候, 总是要为一个变量指定他的类型 甚至在fore ...

  3. Best Time to Buy and Sell sock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  4. 基于visual Studio2013解决算法导论之049活动选择问题

     题目 活动选择问题 解决代码及点评 // 活动选择问题.cpp : 定义控制台应用程序的入口点. // #include<iostream> #define N 100 using ...

  5. js实现文字逐个显示

    先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...

  6. [Java][Android][Process] 分享 Process 运行命令行封装类型

    我在以前的文章中提到,使用Java不会有一个问题,创建运行命令来创建太多进程后创建进程行语句. [Android] ProcessBuilder与Runtime.getRuntime().exec分别 ...

  7. android bitmap compress(图片压缩)

    android bitmap compress android的照相功能随着手机硬件的发展,变得越来越强大,能够找出很高分辨率的图片. 有些场景中,需要照相并且上传到服务,但是由于图片的大小太大,那么 ...

  8. Sql 的 RAISERROR用法

    http://www.yesky.com/imagesnew/software/tsql/ts_ra-rz_5ooi.htm RAISERROR 返回用户定义的错误信息并设系统标志,记录发生错误.通过 ...

  9. python运算符——逻辑运算符

    not命令是取反命令,真的变成假的,假的变成真的(True是真的,False是假的) b = Trueprint(not b) 原本是真的,但是加了“not”指令就变成了假的,not指令是一元运算符, ...

  10. Linux 关机、重启 命令

    重启命令:1.reboot2.shutdown -r now 立刻重启(root用户使用)3.shutdown -r 10 过10分钟自动重启(root用户使用) 4.shutdown -r 20:3 ...