Web服务应用开发（基于J2EE）CSS样式属性学习

CSS样式属性(HBuilderX编写)

代码：



代码：


CSS属性值中的单位：
  绝对单位：一般多用在传统平面印刷中，但在特殊场合使用绝对单位是很必要的。（绝对单位包括：英寸in、厘米cm、毫米mm、磅pt和皮卡pica）
  相对单位：相对单位与绝对单位相比显示大小不是固定的，它所设置的对象受屏幕分辨率、或视觉区域、浏览器设置以及相关元素的大小等因素影响。
（相对单位包括：em、ex、px、%）

CSS字体样式：
  font-size设置字号：绝对大小|相对大小（如：font-size:16pt）
  font-family设置字体:（font-family:字体1,字体2,…,字体n）
  font-style设置字体样式:(font-style: 默认normal | 斜体italic | 倾斜字体oblique )
  font-weight设置字体加粗：（ font-weight: normal | bold | bolder | lighter |100|200|…|900）（100-900分为9个层次,数字越小字体越细、数字越大字体越粗）
  font-variant设置字体变体：（font-variant: 默认normal | 小型的大写字母字体small-caps）（如：font-variant:normal;）
  font设置综合字体属性：一次完成多个字体属性的设置,包括字体粗细、风格、字体变体、大小/行高及字体名称。（如：font:italic bolder small-caps 24px/1.5em 黑体;）

CSS文本样式：
  letter-spacing：normal | 长度单位
  line-height：normal | 比例 | 长度单位 | 百分比
  text-indent：长度单位 | 百分比单位
  text-decoration: none | underline | overline | line-through
  text-transform：uppercase | lowercase | capitalize[首字母大写]| none
  text-align：left | right | center | justify
  vertical-align: top|middle|bottom

CSS颜色：
  color属性用于设置元素字体的色彩，该属性的语法比较简单，但取值比较多样，可以是颜色名称、函数、十六进制数等形式。
  1.颜色名称: 用red、blue、yellow等CSS预定义的表示颜色的参数。CSS预定义17种颜色，如下表所示。
  2.RGB()函数: 使用rgb（RRR, GGG, BBB）或rgb（r%, g%, b%）,字母R或r、G或g、B或b分别表示颜色分量红色、绿色、蓝色，前者参数的取值为0到255，后者参数的取值为0到100。
  3.十六进制数: 使用“#RRGGBB”或者“#RGB”的形式，其中每个位十六进制数从0到F取值，比如#FFC0CB表示pink。

CSS背景属性：
  1.background-color：关键字 | RGB值 | transparent
  2.background-image : url(*.jpg) | none
  3.background-attachment : scroll | fixed
  4.background-repeat : repeat | repeat-x | repeat-y |no-repeat
  5.background-position:百分比 | 长度 | 关键字

CSS盒模型：
  盒模型主要定义四个区域MBPC：边界(margin) 、边框(border) 、填充(padding)和内容(content)


边界属性设置：
  边界属性是margin，也称为外边距，表示盒子边框与页面边界或其他盒子之间的距离，属性值为长度值、百分数或auto，属性效果是围绕元素边框的“空白”。
  margin-top：20px; margin-right ：20px;
  margin-bottom ：20px; margin-left ：20px;
  margin:10px; （4个边均为10px）
  margin:10px 20px ; （上下|左右）
  margin:10px 20px 30px;（上|右左|下）
  margin:10px 20px 30px 40px; （上|右|下|左）

边框属性设置：
  border-width: thin、medium、thick 、length ；复合属性，分border-top-width、border-right-width、border-bottom-width、border-left-width四个子属性。
  border-style :none|dotted|dashed| solid|double|groove[凹型线］|ridge ［凸型线］ |inset ［嵌入线］ |outset ［嵌出线］;
  复合属性:有top、right、bottom、left四个子属性。
  border-color: 颜色关键字 | RGB值 ;
  border:边框粗细 边框样式 边框颜色;
  border:2px solid #ff33ee;

填充属性设置：
  元素内边界主要是指边框和内部元素之间的空白距离，利用padding属性设置元素内的边界时，也包括5个属性，同样也有四种设置方法。
  padding:长度 | 百分比
  padding-top、padding-right、padding-bottom:同上
  padding:20px 30px 40px 60px;
  padding:20px 30px 40px; （上|右|下|左）
  padding:20px 30px; （上|左右|下）
  padding:20px; （上右下左均相同）

---

附ex9图片：

附cup图片：