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

tech2022-08-07  143

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图片:

最新回复(0)