web进门第11天



文字排版--字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面代码实现：为网页中的文字设置字体为宋体。

body{font-family:"宋体";}

如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：

body{font-family:"Microsoft Yahei";}

或

body{font-family:"微软雅黑";}

注意：第一种方法比第二种方法兼容性更好一些。

在网页上设置删除线

原价上的删除线使用下面代码就可以实现：

 .oldPrice{text-decoration:line-through;}

段落排版--缩进
   
   

    
    

     
     
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
     
     
p{text-indent:2em;}
<p>内容</p>             2em的意思就是文字的2倍大小。
     
     

     
     
段落排版--行间距（行高）
      
      

       
       

        
        
如下代码实现设置段落行间距为1.5倍。
        
        
p{line-height:1.5em;}
<p>内容</p>
       
       
      
      
     
     

     
     

     
     
段落排版--中文字间距、字母间距
      
      

       
       

        
        
中文字间隔、字母间隔设置：
        
        
如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现，如下面代码：
        
        
h1{
    letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>

        
        
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
        
        
单词间距设置：
        
        
如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：
        
        
h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
        
        

        
        

        
        
段落排版--对齐
         
         

          
          

           
           
想为块状元素中的文本、图片设置居中样式，可以使用text-align样式代码，如下代码可实现文本居中显示。
           
           
h1{
    text-align:center;
}
<h1>了不起的盖茨比</h1>
           
           
同样可以设置居左：
           
           
h1{
    text-align:left;
}
<h1>了不起的盖茨比</h1>
           
           
还可以设置居右：
           
           
h1{
    text-align:right;
}
<h1>了不起的盖茨比</h1>
          
          
         
         
       
       
      
      
     
     

    
    
   
   

元素分类

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

元素分类--块级元素

在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

元素分类--内联元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

 div{
     display:inline;
 }

......

<div>我要变成内联元素</div>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

元素分类--内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

视频讲解盒子原理