一、前言
这篇博客将简单介绍笔者常用的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">
的语句就可以调用到许多的符号。
同时也比较考验灵活性,灵活的应用才能实现理想的功能,希望这篇博客对读者有所帮助,欢迎大家不吝赐教~