CSS常见语句使用小结

一、前言

这篇博客将简单介绍笔者常用的css语句，并结合笔者之前所作数据结构课设中的具体应用来阐述本人对于css语言应用的理解，如有疑问或批评建议欢迎读者指出~

二、对于CSS基本的理解

1、在笔者看来，css语言主要应用于网页的渲染上，具体可以分为位置和形式的渲染。位置主要有绝对位置和相对位置，以及各重叠部分显示的优先级；形式则比较丰富，常见的有颜色、形状、大小、内含文本的各种属性等等。
2、我们也可以导入一些优秀的形式来简化我们的工作，比如笔者使用的panel来绘制框的形式，font-awesome来提供丰富好用的形状等，同时也达到更加自然美观的效果。
3、在使用中我们常常需要具体到像素进行定位，为了避免频繁猜测的麻烦，我们可以使用一些浏览器的插件来进行处理，笔者使用的是火狐浏览器的Measure-it插件，读者可以参考使用类似的工具。
4、CSS语言使用的位置一般在网页head标签下的style标签中，下面就介绍一下具体语句的应用。

三、常用语句介绍

1、标签名.class属性名{}

用于表示{}内的语句是对这个标签下这个类名的限制，即定位到要刻画的标签位置。
例如在课设例子中，“div.col-lg-3{}”就表示对div标签中，col-lg-3这种class形式的位置和形状描述。
同时，我们也可以直接使用“标签名{}”来刻画这种标签内的所有内容。这涉及到刻画粒度的选择，读者可视实际需要灵活选择。

2、位置描述

position用于描述位置类型，类型有很多，笔者常用的是absolute（即绝对位置，相对于 static 定位以外的第一个父元素进行定位）、relative（即相对位置，相对于其正常位置进行定位）、fixed（锁定，相对于浏览器窗口进行定位），px就表示像素的单位。例如

		{
		position:absolute;
        top:259px;
        left:750px;
        }

描述了相对于顶部和左侧的绝对定位。另外关于显示层次的处理可以通过设置z-index的数值大小来设置，例如“z-index:5;”就表示优先级为5。注意要采用这种方式来调整显示优先级需要设置postion类型为fixed或者absolute。

3、描述网页单元大小

主要包括高和宽，如下：

		{
		height:40px;
        width:110px;
        }

4、描述网页单元内含文本字体大小

		{
		font-size:15px;
		}

5、描述颜色

	    背景颜色：background:black;
	    单元内文本颜色：color:red;

6、鼠标滑过显示下拉框

通过鼠标滑过，即“:hover”修改鼠标滑过时所显示内容的display属性来实现鼠标滑过显隐。

    下拉提示语{
    }
  	鼠标滑过显示内容{
        display:none;
    }
下拉提示语:hover 鼠标滑过显示内容{
        display:block;
    }

7、不同程度的软化长方形的棱角

例如：

border-radius: 20px 0 0 0;

只软化了长方形左上部分的棱角。

四、后记

css非常强大，我们可以自己书写形式，也可以调用现有的程序，比如说我们只需要一条类似于

<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

的语句就可以调用到许多的符号。
同时也比较考验灵活性，灵活的应用才能实现理想的功能，希望这篇博客对读者有所帮助，欢迎大家不吝赐教~