OSSIM项目研究记录（十四）

2021SC@SDUSC

---

css简述

CSS(Cascading Style Sheet)叫层叠样式表，是一组样式设置的规则，用于控制页面的外观样式。
CSS既可以写在HTML中，也可以单独写成一个.css文件，这样便于实现内容与样式的分离，适合团队模块化开发。而且还可以样式复用，便于网站的后期维护。
下面结合源码分析回忆CSS语法。

源码分析

body 
{
	margin:0px;
	padding:0px;
	cursor: default !important;
}

#alarm_list
{
    width:100%;
    margin: 15px 0 20px 0;
    min-height: 450px;
    position: relative;
}

1、 可以看到CSS定义的时候，先指定修改的对象，对象前面有时会有符号。#对应id、 .对应class、不加对应html 标签。
2、括号内就是具体修改的样式内容

3、margin:叫做外边距。margin的基本属性有以下几点

• a：margin 是 ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ 的简写，表明 margin 的大小范围。
• b：margin 值可以是 宽度值、百分比值或 ‘auto’ 这3者之一。注意，margin
  必须带有单位，单位可以是像素、英寸、毫米或 em。如本文中的0px就是0像素
• c：margin 百分比值是相对于父元素的 width 计算的。

4、 padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
5、cursor是改变元素内光标样式，有很多种：

• cursor:pointer; /* 手*/
• cursor: crosshair; /* 十字准心 */
• cursor: auto; /*自动 */
• cursor: default; /* 默认*/

6、 position: relative; 对象不可层叠（但可偏移位置）

• static : 无特殊定位，对象遵循HTML定位规则
• absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。

#alarm_graph
{
    display:none;
    overflow:hidden;
    width:100%;
    height:30px;
    margin: 20px auto 5px auto;
}

.label_filter_l 
{ 
	text-align: left;
	border: none;
}

.filters_wrapper
{
    clear: both;    
}

7、display:none; 此元素不会被显示。
8、overflow:hidden; 可以让超出部分裁剪掉。
9、border: none; 无边框
10、clear语法： clear : none | left | right | both
取值：

• none : 默认值。允许两边都可以有浮动对象
• left : 不允许左边有浮动对象
• right : 不允许右边有浮动对象
• both : 不允许有浮动对象

div.dataTables_processing {
    border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -khtml-border-radius: 5px;
    border: solid 5px #CCCCCC !important;
    font-family: "Lucida Sans","Lucida Grande",Lucida,Verdana,sans-serif !important;
	position: absolute; 
	width: 30%; 
	height: auto; 
	margin: auto; 
	top:45%; 
	left: 0;
	right: 0;
	z-index: 200001; 
	background:#F2F2F2; 
	font-size: 12px !important; 
	font-weight: bold !important;
	color: #4A4948 !important;
	text-align:center;
	padding: 5px 10px;
}		
.high_risk   { color:white; background-color:red ; padding:4px 16px; text-align:center }
.medium_risk { color:black; background-color:orange ; padding:4px 16px; text-align:center }
.low_risk    { color:white; background-color:green ; padding:4px 16px; text-align:center }
.closed      { color:#923E3A; background-color:#ECE1DC; font-weight: bold; }
.opened      { color:#4C7F41; background-color:#DEEBDB; font-weight: bold; }
.high_rep    { background-color:#fcefcc; }
.medium_rep  { background-color:#fde5d6; }
.low_rep     { background-color:#fccece; }

11、定义元素颜色color,背景颜色background-color;

参考博客

CSS margin详解
理解CSS clear:both/left/right的含义以及应用