CSS(层叠样式表)

简述

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码

CSS 是一门样式表语言, 不是一门编程语言，也不是标记语言。

CSS 文档中所有位于 /* 和 */ 之间的内容都是 CSS 注释，不支持 // 注释。

• padding：即内边距，围绕着内容（比如段落）的空间。

• border：即边框，紧接着内边距的线。

• margin：即外边距，围绕元素外部的空间

• width ：元素的宽度

• background-color ：元素内容和内边距底下的颜色

• color ：元素内容（通常是文本）的颜色

引入CSS方式

1, 行间样式

<div style="width:100px; height:100px;"></div>

2, 页面级CSS

<style>
      div {
       width: 110px;
       margin: 0 auto;
     }

</style>

3, 外部CSS文件

<link rel="stylesheet" type="text/css" href="https://x.x.x.x/div.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 打印，和屏幕显示有区别。

screen

如何适配各种屏幕，例如手机屏幕。使用 @media screen实现网页布局的自适应。只需在CSS中添加@media screen属性即可

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

语法：@media mediatype and|not|only (media feature) { CSS-Code; }

• max-width 显示区域的最大宽度。

• min-width 显示区域的最小宽度。

  @media screen and (min-width: 400px) {

  body {

  background-color: green;

  }

  }

  @media screen and (min-width: 800px) {

  body {

  background-color: red;

  }

更新日期 2022.1