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