CSS(层叠样式表)

引入CSS方式

1, 行间样式。

2, 页面级CSS

3, 外部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)"

注释

CSS代码中的注释以” /* “开头,以” */ “结尾,中间为注释内容,可以跨越多行。

@规则

是以at符号开头, ‘@’后跟一个标识符,并包括直到下一个分号的所有内容。

@规则, 由标示符指定, 每种规则都有不同的语法含义。

  • @page, 描述打印文档时布局的变化。

  • @import 引入一个外部样式表。

  • @media screen 彩色屏幕设备, 和打印有区别

  • @media print 打印,和屏幕显示有区别。

更新日期 2021.3