CSS(层叠样式表)¶
选择器¶
ID选择器, 以＃开头， ID和标签为一一对应关系。 例如： #d1
class选择器，以点开头，class和标签是多对多关系，一个标签可以有多个class,
多个标签也也可以有一个相同的class, 例如: .aa
标签选择器， 例如div{}
属性选择器 [id]表示有id的标签。
通配符选择器， 选择所有的标签。
如果ID和class相冲突，ID的优先级高, class优先级次之，最后是标签选择器。
如果有行间样式，行间样式比ID选择器优先级更高。
属性选择器和class选择器两个优先级相同，后面会覆盖前面的。
字体大小¶
font-size: 1.2em; 表示1.2倍标准字体。
符号 |
含义 |
举例 |
|---|---|---|
px |
像素，图像的一个点 |
min-width: 992px |
pt |
磅，字体大小单位， |
font-size: 14pt |
ex |
字体大小 |
96ex表示能方96个字体 |
em |
字体大小， |
|
% |
百分比。 |
100% |
盒子模型(Box Model)¶
每个元素都相当于一个盒子，都有外边距(margin)，内边距(padding)，边框(border)和内容区四部分。
Margin(外边距) - 边框外的区域，外边距是通常是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 内容周围的区域，内边距通常是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
margin¶
margin 属性为给定元素设置所有四个（上边，右边，下边和左边）方向的外边距属性。
/* 上边下边 左边右边 */ margin: 0 auto;
auto 让浏览器自己选择合适的外边距。
rgba¶
rgba() 函数使用红(Red)、绿(Green)、蓝(Blue)、透明度(Alpha)的叠加来生成各式各样的颜色。
红色(Red) 0 到 255 之间的整数。
绿色(Green) 0 到 255 之间的整数。
蓝色(Blue) 0 到 255 之间的整数。
透明度(Alpha)取值 0~1 之间的浮点数。
例如
background-color: rgba(209, 215, 224, 1)
rgba()是一个css函数。在JAVAScript中示例如下
newName.style.borderColor = "rgba(209, 215, 224, 1)"
@规则¶
是以at符号开头, ‘@’后跟一个标识符，并包括直到下一个分号的所有内容。
@规则, 由标示符指定, 每种规则都有不同的语法含义。
@page, 描述打印文档时布局的变化。
@import 引入一个外部样式表。
@media screen 彩色屏幕设备， 和打印有区别
@media print 打印，和屏幕显示有区别。
更新日期 2021.3