CSS
Cascading style sheets，层叠样式表
1.引入方式
- 行内样式 卸载标签的 style 属性中。
<h1 style="color: red">一级标题<h1>
- 内部样式表
写在
<head> </head>中，用<style> </style>包裹
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
- 外部样式表 写在单独的 .css 文件中，通过一下代码引入
<link rel="stylesheet" href=".css的路径" >
2.选择器
1.通配符选择器*{ }
选中所有标签，一般用来去除标签默认的 margin 和 padding 。
* {
margin: 0;
padding: 0;
}
2.标签选择器标签名{ }
h1 {
}
3.id 选择器#id属性值{ }
标签的 id 属性值，在一个页面中，id是唯一的。
一个标签只有一个 id 属性值，一个 id 选择器只能选中一个标签。
<h1 id="id1">一级标题<h1>
#id1 {
color: red;
}
4.类选择器.类名{ }
标签的 class 属性只称为类名，类名可重复。
一个标签可以有多个类名，用空格隔开，一个类选择器可以选中多个标签。
<h1 class="color-red class2">一级标题<h1>
.color-red {
color: red;
}
.class2 {
}
5.属性选择器标签[属性1][属性2...]
属性选择器样式无需使用class或id的形式:
/* 选中所有包含 title 属性的标签 */
*[title] { }
[title] { }
/* 选中所有 title 值为 hello 的标签 */
[title=hello] { }
/* 选中 title 属性值中包含独立的单词为 hello 的标签 */
[title~=hello] { }
/* 选中 title 字符串中包含 hello 这个词 的标签*/
[title*=hello] { }
/* 选中 title 属性是 hello ，或者以 hello- 开头的标签*/
[title|=hello] { }
/* 选中 title 值以 hello 开头的标签 */
[title^=hello] { }
/* 选中 title 值以 hello 结尾的标签 */
[title$=hello] { }
/* 选中所有包含 href 属性的 a 标签 */
a[href] { }
6.派生选择器
1.后代选择器选择器1 选择器2{ }
在选择器1的后代中，所有后代，儿子，孙子，重孙子.......
选择器间用空格隔开
选择器1 选择器2 ... 选择器n{ }
.con h1 { }
<div class="con">
<h1>选中</h1>
<div>
<h1>选中</h1>
</div>
</div>
2.子代选择器选择器1>选择器2{ }
只在选择器1的子代中，找到选择器2，只包括儿子，使用>隔开。
.con>h1 { }
<div class="con">
<h1>选中</h1>
<div>
<h1>未选中</h1>
</div>
</div>
3.相邻兄弟选择器选择器1+选择器2{ }
选中紧接在一个元素后的元素，且二者具有相同的父亲元素。
4.兄弟选择器选择器1~选择器2{ }
选中一个指定元素的后面的所有兄弟结点。
7.并集选择器选择器1, 选择器2{ }
同时选中多个选择器，样式对每个选择器都生效。
h1, h2, h3 {
margin： 0;
}
8.交集选择器选择器1选择器2{}
紧挨着
选中同时满足多个选择器的标签
如标签选择器和类选择器p.class
如标签选择器和id选择器p#id
<!-- p.demo 或 p# id0-->
<p id="id0" class="demo"></p>
9.hover伪类选择器选择器:hover{ }
选中鼠标悬停在元素上的状态，设置样式
3.样式
1.字体和文本样式
/*文字大小，默认16*/
font-size: 16px;
/*字体粗细*/
font-weight: normal; 正常，400
bold; 加粗，700
400; 推荐 100-900 整百数
/*文字倾斜*/
font-style: normal;正常
italic;倾斜
/*文本转换*/
text-transform: uppercase;所有内容转换为大写
lowercase;所有内容转换为小写
capitalize;每个单词的首字母大写：
/*文字字体*/
font-family: 微软雅黑;windows默认
黑体;
宋体;
楷体;
sans-serif;无衬线字体
serif;衬线字体
monospace;等宽字体
多种字体用，隔开，会从头选一个可以使用的字体。
/*简写, 复合属性，前两项可以省略，为默认*/
/* font: style weight size family; */
font: normal 400 16px 宋体;
/*字符间距*/
letter-spacing: 3px;
/*单词间距*/
word-spacing: 10px;
/*内部空白的处理方式*/
white-space: nowrap;禁用元素内的文本换行
/*文本缩进*/
text-indent: 32px;
1em; 1em 为一个字的大小，当前 font-size 的大小。
/*水平对齐方式*/
text-align: left;居左，默认；
right;居右
center;居中
/*文本修饰，下划线，删除线，上划线*/
text-decoration: underline;下划线
line-through;删除线
overline;上划线
none;无线
/*行高，两行文字间距*/
line-height: 30px; 大小为：上间距+文本高度+下间距，
倍数; 当前font-size的倍数,设置1可以取消上下边距。
/* 垂直居中可以使line-height为父元素的高度。 */
/*简写*/
font: style weight size/line-height family;
/*文本阴影*/
/*text-shadow: 水平阴影 垂直阴影 模糊 颜色*/
text-shadow: 2px 2px 5px red;
2.背景
/*背景颜色*/
background-color: rgba(0,0,0,0);
/*背景图片，url中的''可以省略，默认xy都平铺*/
background-image: url('图片的路径');
/*背景平铺*/
background-repeat: repeat;默认，xy都平铺
no-repeat;不平铺
repeat-x;水平上平铺
repeat-y;垂直方向上平铺
/*背景位置*/
background-position: x y;
水平位置 垂直位置
left/center/right top/center/bottom;
10px 10px;/*0 0;为左上角*/
/*简写*/
background: color image repeat position;
/*背景附着*/
background-attachment: fixed;固定背景
scroll;背景随页面一起滚动
/*背景大小*/
background-size
/*背景绘制区域*/
background-clip: border-box;默认，背景被裁剪到边框盒
content-box;背景被裁剪到内容框
padding-box;背景被裁剪到内边距框
/*背景定位*/
background-origin: padding-box;背景图像相对于内边距框来定位
border-box;背景图像相对于边框盒来定位
content-box;背景图像相对于内容框来定位。
属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：
/*透明度*/
opacity: 0.5;
4.显示模式
display: inline;行级元素
block;块级元素
inline-block;可以设置宽高的行级元素
none;隐藏元素
visibility:hidden; 也可以隐藏元素。
但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：
嵌套
1.块级元素一般作为大容器，可以嵌套，文本，块级元素，行内元素，行内块元素等等
但是，p标签中不要嵌套div，p，h等块级元素。
2.a标签内部可以嵌套任意元素
但是，a标签不能嵌套a标签。
\
