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

最新推荐文章于 2022-11-04 16:29:54 发布

iCandyss

最新推荐文章于 2022-11-04 16:29:54 发布

阅读量883

点赞数

分类专栏： web前端文章标签：字体 css

本文链接：https://blog.csdn.net/iCandyss/article/details/51213697

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

字体

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>