XML CSS基本介绍及用法

一.CSS的基本概念

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二.CSS基本语法

CSS规则集（rule-set）由路由器和声明快组成，基本格式如下：

选择器
{
属性1：属性值1；/*声明*/
属性2：属性值2；/*声明*/
......
属性n：属性值n；/*声明*/
}

其中选择器用指定该规则所适应的元素，由一个或多个元素名或指定的标识构成；紧跟其后的用花括号“{}”括起来的若干属性名与相应的属性值，每条声明都包括一个属性值和相应的属性值，伊冒号分开。

三.选择器

CSS的选择符是被施加样式的对象，它可以是一个元素或一组共享相同格式的元素。选择符的类型有很多，常用的以下几类：

标签选择器：通过标签选择器可以选择页面中的所有指定标签
语法：标签名 {}

类选择器：通过标签的class属性值选中一组标签
语法：.class属性值{}

id 选择器：通过标签的id属性值选中唯一的一个标签
语法：#id属性值 {}

选择器组合：通过选择器分组可以同时选中多个选择器对应的标签
语法：选择器1,选择器2,选择器N{}

通配选择器:可以用来选中页面中的所有的标签
语法：*{}

选择器分优先级：匹配越多的选择器,优先级越低

由高到低：Id选择器>类选择器>标签选择器>通配选择器
伪选择器：伪选择器支持按照未被包含在文档树中的状态信息来选择元素

四.CSS常用属性

1、左浮动

float:left

2、右浮动

float：rigth

3、div内的元素不换号

white-space: nowrap;
display: inline-block;

4、消除padding对宽高影响

box-sizing: border-box;

5、a标签图片太大，尺寸超过容器大小

background-size: contain;

6、网页跳转打开新的页面

target: "_blank";

7、宽高充满父布局

width: 100%;
heigth:100%;

8、转为块级元素

display: block;可以设置宽高
 display: inline-block;既能设置在一行显示，又能设置宽高。
 display: none;元素消失，空间不保留，移除文档流。

9、转为行内元素

display: inline;设置宽高无效，大小撑满父布局，如果需要转为行内元素还能设置宽高，则有2种方法：浮动和定位
10、居中

text-align: center; 文本居中
line-height: 50px; 容器居中

11、鼠标箭头变为小手指

cursor: pointer;

12、字体设置

font-family: "'Helvetica Neue', Helvetica, Arial, sans-serif";

13、a标签设置

&:hover {
    text-decoration-color:rgb(46, 49, 53);
    text-decoration-line:underline;
    text-decoration-style:solid;
    text-decoration-color:blue;
    color: blue;
}

13、去掉下划线

text-decoration: none;

14、定位

position: relative; 父类相对定位
position: absolute; 子类绝对定位
如果只添加子类不添加父类的定位会导致脱标，加上会在父容器内绝对定位

15、字体加粗

font-weight: bold;

16、字体正常

font-weight: normal;

17、文字换行

word-wrap:break-word;
word-break:break-all;

18、图片显示样式

object-fit: contain;   =缩放显示，适应父布局大小，不裁切
object-fit: fill;  =完全显示到父布局会有变形，没有裁切。
object-fit: cover; =完全显示到布局，会有裁切
object-fit: none; =原始尺寸，不变化

19、宽高

px：固定数值，例如：300px表示3000像素
rem：相对于根元素(即html元素)font-size计算值的倍数，1em与当前元素的字体大小相同，浏览器给网页设置的默认基础字体大小是16像素，即一个元素来说1em的计算值默认为16像素。但是要em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，也会跟随者变化。
100%：表示设置百分比单位。
vh：视窗高度的百分比（ 1vh 代表视窗的高度为 1%）
vw： 视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

20、z-index

z-index表示谁压着谁。数值大的压盖住数值小的。
只有定位了的元素才能有z-index值，不管是相对、绝对、固定定位都可以使用z-index值，而浮动的东西不能用。
如果都没有z-index值，谁写在后面谁盖住谁。
z-index没有单位，是一个正整数。默认的z-index值是0。

21、元素是否可见

 opacity: .5;透明度1-0，空间不消失。
 visibility: hidden;隐藏元素，保留空间，和opacity: 0;一样。
 visibility: visible;元素可见，默认。

22、背景固定，内容滑动

background-attachment: fixed;

position: sticky; 和fixed类似，区别在于，如果元素位置不在文档流最顶层，滑动时候会跟随滑动，然后到顶部时候固定，类似Android的TitlBar粘性布局效果。

五.浮动与定位

1、 CSS 浮动属性简介

CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧
float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动
掌握CSS基础属性
float 属性的常用值包括:
left 靠左浮动
right 靠右浮动
none 不浮动

2、CSS定位

CSS 定位属性简介
CSS 中 position 规定了元素的定位方式
CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使元素可以显示在任意位置
position 属性的可选值包括:
relative 相对定位
absolute 绝对定位
fixed 固定定位
static 默认值