CSS常用样式

本文记录WEB前端学习过程中遇到的CSS常用样式~

1.边框和尺寸:border、width和height

border:设置边框的样式

  • 格式:宽度、样式和颜色;
  • 取值:solid实线,none无边和double双线等。

width和height:用于设置标签的宽度和高度。

示例代码:

<style type="text/css">
    div{
        border: 1px solid #000;
        width: 200px;
        herght: 200px;
    }
</style>

2.布局:float和clear

通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版,就需要使用浮动,格式如下:

选择器{float: 属性值;}

常用的属性值:

  • left:元素向左浮动;
  • right:元素向右浮动;
  • none:元素不浮动(默认值)。

由于浮动元素不再占用原文档流的位置,所以它会对页面中的其他元素的排版产生影响。如果要避免影响,需要使用clear属性进行清除浮动,格式如下:

选择器{clear: 属性值;}

常用属性值:

  • left:不允许左侧有浮动元素(清除左侧浮动的影响);
  • right:不允许右侧有浮动元素(清除右侧浮动的影响);
  • both:同时清除左右两侧的影响。

示例代码:

<!--默认上下布局-->
<div>
    <div>区域1-1</div>
    <div>区域1-2</div>
</div>

<hr />

<!--浮动左右布局-->
<div>
    <div style="float: left;">区域2-1</div>
    <div style="float: left;">区域2-2</div>
</div>

<!--取消浮动,另起一行布局-->
<div style="clear: both;"></div>
<hr />
<div>
    <div style="float: left;">区域3-1</div>
    <div style="float: left;">区域3-2</div>
    <div style="float: left;">区域3-3</div>
</div>

3.转换:display

HTML提供丰富的标签,这些标签被定义成了不同的类型,一般分为:块标签和行内标签。

块标签:以区域块方式出现。每个块标签肚子占据一整行或多行。

  • 常见的块标签:<h1>、<div>和<ul>等。

行内元素:不必在新的一行开始,同时也不强迫其他元素在新的一行显示。

  • 常见的行内元素:<span>和<a>等。

在开发中,希望行内元素具有块元素的特性,需要使用display进行转换,使用格式为:

选择器{display: 属性值}

常用的属性值:

  • inline:此元素将显示为行内元素(行内元素默认的display属性值);
  • block:此元素将显示为块元素(块元素默认的display属性值);
  • inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递;
  • none:此元素将被隐藏,不显示,也不占用页面空间。

示例代码:

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span{
                border: 1px solid #000;
                width: 100px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <!--默认显示一行,边框环绕,高宽没有作用-->
        <span>显示1-1</span>
        <span>显示1-1</span>

        <!--每一行显示,高宽有作用-->
        <span style="display: block;">显示2-1</span>
        <span style="display: block;">显示2-2</span>
    </body>
<html>

4.字体:color和font-size

  • color:字体颜色;
  • font-size:字体大小。

示例代码:

<div style="height: 50px;width: 200px;border: 1px solid #000;">
    <a href="http://www.oliver.ren/">点击</a>
    <a href="http://www.oliver.ren/" style="text-decoration: none;">点击</a>
</div>
<div style="height: 50px;width: 200px;border: 1px solid #000;">
    <a href="http://www.oliver.ren/" style="line-height: 50px;">点击</a>
    <a href="http://www.oliver.ren/" style="color: red;">点击</a>
</div>

5.背景色:background-color

示例代码:

<ul style="background-color: #999;color: #FFF;">
    <li>Oliver's Blog</li>
    <li>Oliver's Blog</li>
    <li style="background-color: #000;">Oliver's Blog</li>
    <li>Oliver's Blog</li>
</ul>

标签: none