web前端--css
css：层叠样式表
css书写规范：
| 选择器{ 属性名：属性值； 属性名：属性值； } |
1.行内样式(不推荐使用)
2.内部样式
（尽量使用外部样式（简洁、清楚、易查询））
3.外部样式
| 1.命名.css 2.在css中写入内容 div{ ... } 3.引入html中
|
4.基础选择器
| 标签选择器：选择当前页面中所有符合的标签 id选择器，#id值 类选择器，class（类），·class类名 *通配符选择器，选中所有元素 |
Document
5.包含选择器
/* 子代选择器 */
ul>li{
background-color: aliceblue;
}
/* 后代选择器 */
ul li{
background-color: aliceblue;
}6.逗号选择器（复合选择器）
div,
p,
h1{
background-color: aliceblue;
}
/* 设相同属性，将元素逗号隔开 */7.属性选择器
/* type为text的input */
input[type="text"]{
background-color: aliceblue;
}
/* 具有name属性的 */
input[name]{
background-color: aliceblue;
}
/* type中包含e的 */
input[type*="e"]{
background-color: aliceblue;
}
/* type中以p开头的 */
input[type^="p"]{
background-color: aliceblue;
}
/* type中以l结尾的 */
input[type$="l"]{
background-color: aliceblue;
}8.伪类选择器（元素在不同样式中的样式）
/* 1.未访问的链接样式 */
a:link{
color: aliceblue;
}
/* 2.访问后的样式 */
a:visited{
color: aliceblue;
}
/* 3.鼠标悬停时的样式 */
a:hover{
color: aliceblue;
}
/* 4.点击之后按住鼠标不松 */
a:active{
background-color: aliceblue;
}
/* 获取焦点时的样式<按住tab键> */
a:focus{
color: aliceblue\;
}
/* 通过鼠标悬停ac从而改变div的样式
+表示下一个
~表示之后所有兄弟元素*/
a:hover+div{
color: pink;
}9.结构伪类选择器
/* ul在li上的第7个孩子 */
ul li:nth-child(7){
background-color: aliceblue;
}
/* 最后一个孩子 */
ul li:last-child{
background-color: aliceblue;
}
/* 第一个孩子 */
ul li:first-child{
background-color: aliceblue;
}
/* 顺序为奇数的孩子 */
ul li:nth-child(2n+1){
background-color: aliceblue;
}
/* 顺序为偶数的孩子 */
ul li:nth-child(2n){
background-color: aliceblue;
}
/* 1.父亲 2.排序 3.儿子 */
.father.son:nth-child(2){
background-color: aliceblue;
}
/* 1.父亲 2.儿子 3.排序 */
.father.son:nth-of-type(2){
background-color: aliceblue;
}10.伪元素选择器
/* 在p前添加内容及颜色 */
p::before{
content: "";
color: aliceblue;
}
/* 对提示语的改变 */
input::placeholder{
color: aliceblue;
}
/* 选中后颜色的改变 */
div::selection{
color: aliceblue;
}11. 字体样式
p{
/* 字体大小/字号 */
font-size: 12px;
/* 字体类型 */
font-family: "宋体";
/* 字体的粗细：normal/400(正常)，bold/700(加粗) */
font-weight: 400;
/* 字体样式（倾斜） */
font-style: italic;
/* 复式写法 style weight (size family)必要 */
font:italic 700 20px '宋体';
}12.文本对齐方式
span{
/* 文本的对齐方式：水平居中 */
text-align: center;
/* 显示形式转化成行内块元素（才能进行上述的对其方式） */
display: block;
}13.文本修饰
/* 文本的修饰 none(不修饰),line-through(删除线),underline(下划线),overline(上边线) */
a{
text-decoration: none;
}14.text-transform(大小写的转换)
/* 小写转大写uppercase,大写转小写lowercase */
ul li:nth-child(1){
text-transform: uppercase;
}15.行高（行间距之间的距离）
/* 可通过设置行高进行垂直居中的操作，（单行文本借助行高垂直居中） */
p{
line-height: 50px;
}16.文本溢出
div{
width: 200px;
height: 200px;
background-color: aliceblue;
/* Y轴滚轮 */
overflow: auto;
/* 隐藏滚轮 */
overflow: hidden;
/* Y+X轴的滚轮均有 */
overflow: scroll;
/* 单行文本加省略号 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}17.背景相关
body{
width: 200px;
height: 200px;
background-color: aliceblue;
/* 平铺背景图片（可重复） */
background-image: url(./...);
/* 不重复平铺 */
background-repeat: no-repeat;
/* 固定不动 */
background-attachment: fixed;
/* 沿右下角显示图片 */
background-position: right bottom;
/* 强行占满 */
background-size: cover;
/* 复合要求非强制性的顺序 */
background: pink url(./...) no-repead fixed right bottom;
}18.列表样式
/* 建立无序列表（十行）简写：ul>li*10{li$} */
li{
/* 去掉默认形式 */
list-style: none;
/* 数字 */
list-style: decimal;
/* 小圆点 */
list-style: disc;
/* 空心小圆点 */
list-style: circle;
/* 实心正方形 */
list-style: square;
}19.轮廓线
input{
/* *******轮廓线的形式(取消轮廓线)******* */
outline-style: none;
/* 双划线double,虚线dash,点状轮廓dotted */
/* 轮廓线的颜色 */
outline-color: aqua;
/* 轮廓线的厚度(加厚) */
outline-width: thick;
/* 常用写法 */
outline: none;
}20.边框
div{
width: 200px;
height: 200px;
background-color: aliceblue;
/* 边框宽度 */
border-width: 3px;
/* 边框颜色 */
border-color: aliceblue;
/* 边框样式 */
border-style: solid;
/* 边框角的弧度(百分比/数字) */
border-top-left-radius: 50%;
}21.合并相邻边框
table{
/* 合并相邻边框 */
border-collapse: collapse;
}22.颜色
/* 前景色（字体颜色） */
p{
/* 普通版 */
color: red;
/* 三原色调色版 */
color:rgb(rgb(150, 94, 94), rgb(94, 153, 94), blrgb(75, 75, 127)
}
/* 背景色（高级版）：三原色调色，alpha(透明通道)0~1 */
div{
background-color: rgba(rgb(199, 133, 133), rgb(121rgb(88, 88, 174)9, 121), blue, 0.1);
opacity: 0.3;/* 透明度调节（0-1）隐藏后保留原位 */
}23.元素的隐藏方式
/* 1.设置透明度隐藏（保留原来的位置） */
opacity:0;
/* 2.display控制元素的显示与隐藏（也可用来转化元素的显示方式）(不保留原来的位置) */
display : none ;
/* 3.visibility:hidden;(保留原来的位置) */
visibility:hidden;
24.鼠标样式及防拖拽
textarea{
/* 文本防拖拽 */
resize: none;
/* 鼠标样式（手指） */
cursor:pointer
}24.绝对定位
| 绝对定位会放弃原来的位置，子代逐级查找父级元素是否有相对定位，如果有，以父亲为参考，如果没有，继续向上查找 father -->grandfather -->浏览器 绝对定位将元素固定在相对于其位置最近的祖先 |
.son{
/* 绝对定位，放弃原来位置，脱离文档流 */
position: absolute;
top: 50px;
background-color: aliceblue;
}
.father{
/* 相对定位 */
position: relative;
}
day4:
1.盒子模型
盒子大小：由content内容、padding外边距、border边框决定
2.边框
Document
1
3.内边距--留白
（内容距离边框的距离）
Document
1
4.外边距
Document
我是盒子的内容区域，你是谁？
我是盒子的内容区域，你是谁？
我是盒子的内容区域，你是谁？
5.外边距塌陷