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

CSS样式二--字体、文本样式

2016-04-21 22:38 609 查看

字体

font-size:bold   //粗体，normal常规
font-style:italic   //斜体
font-family:"Microsoft Yahei"   //字体（微软雅黑、宋体、Microsoft Yahei等）
font-color:red        //颜色，或者这种写法：#666代表灰色

文本

text-decoration:underline       //下划线
text-decoration:line-through     //删除线
text-indent:2em                   //首行缩进，2em表示2个字符
lint-height:1.5em                 //行间距
letter-spacing:50px               //文字间的间隔（中文汉字的间距、英文字母的间距）
word-sapcing:20px                 //英文单词之间的间距
text-align:center                 //文字或图片或段落居中（左、右）对齐
background:pink                   //背景色，粉色

定宽块状元素水平居中显示的方法

当元素被设置为块状元素时，用text-align：center就不起作用了，满足宽度和块状两个条件的元素可以通过设置“左右margin”值和“auto”来实现居中的，代码如下：

<style>
duv{
border:1px solid red;
width:200px;
margin:20px auto;
}
</style>

<body>
<div>
我是块状元素，我要居中显示。
</div>
</body>

不定宽块状元素水平居中显示的方式

不定宽块状元素的居中方式用三种：

* 加入table标签。

为什么加入table标签就可以是不定宽块状元素居中呢？它主要是利用了table标签的长度自适应性—-即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽块状元素，然后利用定宽块状元素居中的margin方法，使其水平居中显示。步骤如下：

为需要设置为居中显示的元素外边加一个table标签。包括:table,tr,td,tbody。

为这个table社会“左右margin居中”。

代码如下：

<style>
table{
border:1px solid;
margin:0 auto;
}
</style>

<body>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</tr></td>
</tbody>
</table>
</div>
</body>

设置display：inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置。

改变元素为行内元素显示（inline），然后使用text-align:center来实现居中的效果，代码如下：

<style>
.container{
text-align:center;
}
.container{
list-style:none;
margin:0;
padding:0;
display:inline;
}
</style>

<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
//这种方法相对于第一种方法的优势是不用增加无语义标签，但也存着一些问题：它将块状元素改为inline类型，就变成了行内元素，所以少了一些功能，比如说设定长度值。

设置position：relative和left50%：利用相对定位的方式，将元素向左偏移50%，即达到居中的目的。

通过给父元素设置float（浮动），然后给父元素设置position：relative和left：50%，子元素设置position：relative和left：-50%来实现水平居中。代码如下：

<style>
.container{
float:left;
positon:relative;
left:50%;
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{
float:left; display:inline; margin-right:8px;
}
</style>

<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>

元素的垂直居中

在我们的实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，这样用户体验性好。

元素的垂直居中又分为两种情况：

* 父元素高度确定的单行文本

这种情况下是通过设置父元素的height和line-height高度一致来实现的。（height：该元素的高度；line-height：行高，指在文本中，行与行之间的基线的距离）。

line-height与font-size的计算值之差，在CSS中成为“行间距”，分为两半，分别加到一个文本行内容的顶部和底部。但这种方式带来了一个弊端：当文字内容的长度大于块的宽时，内容会脱离块的范围。代码如下：

<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>

<div class="container">
hi, hello!
</div>

效果图如下：

设置前

设置后

父元素高度确定的多行文本

这种情况下要想显示垂直居中有两种方法：

1 使用插入table（包括：tbody，tr，td）标签，同时设置vertical-align:middle。CSS中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用，代码如下：

<style>
table td{
height:500px;
background:#ccc;
}
</style>

<body>
<table><tbody><tr><td>
<div>
<p>看我是否可以居中?</p>
</div>
</table></tbody></tr></td>
</body>
//因为td标签默认情况下就设置的是vertical-align为middle，所以我们就不需要显示的设置了。

2 在chrome、Firefox以及IE8以上的浏览器下可以设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性，但注意IE6、7并不支持这个样式，兼容性比较差。代码如下：

<style>
.container{
height:300px;
background:#ccc;
display:table-cell; //IE8以及chrome、Firefox
vertical-align:middle; //IE8以及chrome、Firefox
}
</style>
<div class="container">
<div>
<p>看我是否可以居中</p>
<p>看我是否可以居中</p>
<p>看我是否可以居中</p>
</div>
</div>

//这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容IE6、7，而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

隐性改变display类型

当元素（不论之前是什么类型元素，display：none除外）设置以下2个语句之一：

* position：absolute

* float：left或 float：right

设置完成后，元素就变成了块状元素的显示方式，就可以设置元素的width和height了，且默认宽度不占满父元素。

如下代码，a元素是行内元素，所以设置它的width是没有效果的，但设置为position：absolute后，就可以了。

<style>
.container a{
position:absolute;
width:200px;
background:#cccc;
}
</style>

<div class = "container">
<a href="#" tittle="#">join in</a>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航