您的位置：首页 > Web前端 > CSS

CSS3：为内容设置样式

2016-03-18 15:14 976 查看

文本样式

对齐文本

text-align属性用于指定文本块的对齐方式，可选值包括：
1）start：内容对齐开始边界，默认；
2）end：内容对齐结束边界；
3）left：内容左对齐；
4）right：内容右对齐；
5）center：内容居中对齐；
6）justify：内容两端对齐。
当text-align属性使用了justify值时，可以使用text-justify属性指定文本添加空白的方式，这个属性的可选值如下；
1）auto：浏览器选择对齐规则，注意不同浏览器的呈现方式有细微差别；
2）none：禁用文本对齐；
3）inter-word：空白分布在单词之间，适用于英语等词间有空的语言；
4）inter-ideograph：空白分布在单词、表意字之间，且文本两端对齐，适用于汉语、日语和韩文等语言；
5）inter-cluster：空白分布在单词、字形集的边界，适用于泰文等无词间空格的语言；
6）distribute：空白分布在单词、字形集的边界，但连续文本或者草体除外；
7）kashida：通过拉长选定字符调整对齐方式（仅适用于草体）。

空白处理

当浏览器遇到多个空格时，会将它们压缩为一个空格；换行符、制表符等会被直接忽略。
使用whitespace属性可以指定空白字符的处理方式，允许的取值如下：
1）normal：默认值，空白符别压缩，文本行自动换行；
2）nowrap：空白符被压缩，文本行不换行；
3）pre：空白符被保留，文本只在遇到换行符的时候换行；
4）pre-line：空白符被压缩，文本会在一行排满或遇到换行符时换行；
5）pre-wrap：空白符被保留，文本会在一行排满或遇到换行符时换行。

指定文本方向

direction属性用于设置文本方向，允许的取值包括：
1）ltr：从左到右；
2）rtl：从右到左。

指定单词、字母、行之间的间距

相关的属性包括：
letter-spacing：设置字母之间的间距；
word-spacing：设置单词之间的间距；
line-height：设置行高。
属性的值可以为normal或指定的数值，line-height可以指定百分比。

控制断词

word-wrap属性告诉浏览器当一个单词的长度超出包含块的宽度时如何处理，可选值包括：
1）normal：单词不断开，即使无法完全放入包含块元素；
2）break-word：断开单词，使其放入包含块元素。

首行缩进

text-indent属性用于指定文本块首行缩进，值为长度值或百分比。

文本装饰

text-decoration属性用于装饰文本，可选的值包括：
1）none：定义标准的文本，默认；
2）underline：定义文本下的一条线；文
3）overline：定义文本上的一条线；
4）line-through：定义穿过文本下的一条线；
5）blink：定义闪烁的文本；
6）inherit：定义应该从父节点继承。

大小写转换

text-transform属性用于为文本转换大小写，可选值包括：
1）none：定义带有小写字母和大写字母的标准的文本；
2）capitalize：文本中的每个单词以大写字母开头；
3）uppercase：定义仅有大写字母；
4）lowercase：定义无大写字母，仅有小写字母；
5）inherit：继承。

文本阴影

text-shadow属性可以为文本块应用阴影效果，可选值包括：
1）h-shadow：阴影的水平偏移；
2）v-shadow：阴影的垂直偏移；
3）blur：阴影的模糊程度，可选；
4）color：阴影的颜色。

字体

选择字体

font-family属性指定使用的字体，值按照优先级排列，浏览器从字体表中的第一种开始尝试，直到发现合适的字体为止。
为了防止指定的字体在用户电脑上不存在，CSS定义了几种任何情况下都可以使用的通用字体，下面是这些通用字体：
1）serif：示例为Times
2）sans-serif：示例为Helvetica
3）cursive：示例为Zapf-Chancery
4）fantasy：示例为Western
5）monospace：示例为Courier
p {
padding: 5px;
border:medium double black;
background-color: lightgrey;
margin: 2px;
float: left;
font-family: "HelveticaNeue Condensed", monospace;
}
这里指定了HelveticaNeue Condensed字体，如果该字体不存在，则使用monospace字体。

设置字体大小

font-size用于指定字体大小，可选值为：
1）xx-small、x-small、small、medium、large、x-large和xx-large：字体大小从小到大，具体大小由浏览器决定；
2）smaller、larger：相对于元素默认字体大小；
3）<length>：使用CSS长度值精确设置字体大小；
4）<%>：将字体大小表示为父元素字体大小的百分数。

设置字体粗细

font-weight属性设置字体粗细，可选择为：
1）normal：默认值，标准字符；
2）bold：定义粗体字符；
3）bolder：定义更粗的字符；
4）lighter：定义更细的字符；
5）100～900（都是百为单位的整数）：定义由细到粗的字符，400等同于normal，而700等同于bold；

设置字体样式

font-style属性用于为字体设置样式，可选值为：
1）normal：默认值，浏览器显示一个标准的字体样式；
2）italic：浏览器会显示一个斜体的字体样式；
3）oblique：浏览器会显示一个倾斜的字体样式；

Web字体

CSS字体的问题是用户机器上可能并未安装你想使用的字体，使用Web字体可以解决这个问题，我们可以直接下载Web字体并使用在自己的页面上，而不需要用户做什么。使用@font-face指定Web字体：
@font-face {
font-family: 'MyFont';
font-style: normal;
font-weight: normal;
src: url('http://titan/listings/MyFont.woff');
}
你可以在网上下载现成的字体包，例如：Font Squirrel。

font属性

font属性是设置字体的简写属性，格式如下；
font: <font-sytle> <font-variant> <font-weight> <font-size> <font-family>

元素的前景色和透明度

使用color属性可以设置元素的前景色，opacity属性设置颜色的透明度。
#banana {
font-size: x-large;
border: medium solid white;
background-color: green;
color: rgba(255, 255, 255, 0.7);
}
a:hover {
color: red;
opacity: 0.4;
}

设置表格样式

设置边框处理样式

border-collapse属性用于设置相邻单元格的边框处理样式：
1）separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性；
2）collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性；

处理空单元格

empty-cells属性告诉浏览器如何处理空单元格：
1）hide：不在空单元格周围绘制边框；
2）show：在空单元格周围绘制边框，默认。

设置标题的位置

table元素的caption默认会显示在表格的顶部，可以使用caption-side属性改变这种默认行为：
1）top：顶部，默认值；
2）bottom：底部。

指定表格布局

table-layout属性决定了浏览器显示表格采用的方法，支持的值包括：
1）auto：默认，浏览器会根据表格每一列中最宽的单元格设置整列单元格的宽度，这意味着在确定页面布局之前，浏览器必须获取所有的表格内容；
2）fixed：表格的大小由表格自身和单独每列的width值设定，如果没有列宽值可用，浏览器会设置等距离的列宽，因此，只要获取了一行的数据，浏览器就可以确定列宽，其他行内的数据会自动换行以适应宽度。

设置列表样式

设置列表标记类型

list-style-type属性用来设置标记的样式，允许值如下：
1）none：没有标记；
2）box、check、circle、diamond、disc、dash、square：使用指定形状标记；
3）decimal：使用十进制数字作为标记；
4）binary：使用二进制数作为标记；
5）lower-alpha：使用小写字母字符作为标记；
6）upper-alpha：使用大写字母字符作为标记。
<head>
......
<style>
ol {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
......
<ol>
<li>bananas</li>
<li>mangoes</li>
<li>plums</li>
</ol>
</body>

使用图像作为列表标记

list-style-image属性可以将图像用作列表标记。
ul {
list-style-image: url('banana-vsmall.png');
}

设置列表标记的位置

list-style-position属性可以指定标记相对于li元素内容框的位置。支持的值如下：
1）inside：标记位于内容框的内部；
2）outside：标记位于内容框外部。
li.inside {
list-style-position: inside;
}
li.outside {
list-style-position: outside;
}
li {
background-color: lightgray;
}

简写方式

list-style属性是设置列表样式的简写方式，格式如下：
list-style: <list-style-type> <list-style-position> <list-style-image>

设置光标样式

cursor属性用来改变光标的外形，支持的值如下：
1）auto：默认，浏览器设置的光标；
2）crosshair：光标呈现为十字线；
3）default：默认光标（通常是一个箭头）；
4）help：此光标指示可用的帮助（通常是一个问号或一个气球）；
5）move：此光标指示某对象可被移动；
6）pointer：光标呈现为指示链接的指针（一只手）；
7）progress：表示正在处理中；
8）text：此光标指示文本；
9）wait：此光标指示程序正忙（通常是一只表或沙漏）；
10）n-resize：此光标指示矩形框的边缘可被向上（北）移动；
11）s-resize：此光标指示矩形框的边缘可被向下移动（南）；
12）e-resize：此光标指示矩形框的边缘可被向右（东）移动；
13）w-resize：此光标指示矩形框的边缘可被向左移动（西）；
14）ne-resize：此光标指示矩形框的边缘可被向上及向右移动（北/东）；
15）nw-resize：此光标指示矩形框的边缘可被向上及向左移动（北/西）；
16）se-resize：此光标指示矩形框的边缘可被向下及向右移动（南/东）；
17）sw-resize：此光标指示矩形框的边缘可被向下及向左移动（南/西）。
<span style="cursor:progress">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 web html web设计 css3
相关文章推荐
新的分享
章节导航