CSS层叠样式表
美化页面。css2.0=div+css ---> css2.1=浮动 + 定位 --->css3.0=圆角、阴影、动画.....
css样式：
-
内联
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1{ color:burlywood; } </style> </head> -
外联
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/c1.css"> </head>
css优先级：就近原则
css优点：
- 内容和表现分离
- 可以实现复用
css选择器
1.基本选择器： 优先级：id > 类 > 标签
-
标签选择器
h1{ color:red; background: rgb(235, 162, 162); border-radius: 60px; } -
类选择器，class名字可以重复，可以实现css代码的复用
.kk{ color:red; background: rgb(235, 162, 162); border-radius: 60px; } -
id选择器，id名必须唯一
#kk{ color:red; background: rgb(235, 162, 162); border-radius: 60px; }
2.层次选择器
-
后代选择器（选择所有后代），用空格连接
body p{ color:red; background: rgb(235, 162, 162); border-radius: 100px; } -
子代选择器（选择所有子代），用符号
>连接body>p{ color:red; background: rgb(235, 162, 162); border-radius: 100px; } -
相邻弟弟选择器（选择相邻的一个弟弟），用符号
+连接.mm + p{ color:red; background: rgb(235, 162, 162); border-radius: 100px; } -
弟弟选择器（选择当前元素的所有弟弟），用符号
~连接.mm ~ p{ color:red; background: rgb(235, 162, 162); border-radius: 100px; }
3.结构伪类选择器
/* 选中ul的第一个子元素 */
ul li:first-child{
color:red;
background: rgb(235, 162, 162);
border-radius: 100px;
}
/* 选中ul的最后一个子元素 */
ul li:last-child{
color:rgb(117, 39, 39);
background: rgb(235, 162, 162);
border-radius: 100px;
}
/* p:nth=>定位到p元素的父级， chlild（1）=>选中子级的第1个，若第一个孩子是p元素=>选中，如果不是，不选中不进行渲染 */
p:nth-child(2){
color:rgb(117, 39, 39);
background: rgb(235, 162, 162);
border-radius: 100px;
}
/* p:nth=>定位到p元素的父级， chlild（1）=>选中子级的第1个p元素 */
p:nth-of-type(1){
color:rgb(117, 39, 39);
background: rgb(235, 162, 162);
border-radius: 100px;
}
4.属性选择器（常用）
/* = 精确选中 */
a[id=a]{
background-color: rgb(238, 215, 220);
}
/* *= "" 模糊选中 */
a[id*="a"]{
background-color: rgb(238, 215, 220);
}
/* ^ 选中以 http 开头的所有的a元素 */
a[herf^="http"]{
background-color: rgb(238, 215, 220);
}
/* $ 选中以 http 结尾的所有a元素 */
a[herf$="http"]{
background-color: rgb(238, 215, 220);
}
字体样式
span标签：重点要突出的字，使用span标签套起来
字体 font
p {
/* 字体 */
font-family: 楷体;
/* 字体粗细 */
font-weight: bold;
}
h2 {
/* 字体大小 */
font-size: 50px;
/* 斜体 更细 大小 字体 */
font: oblique lighter 80px "楷体";
}
文本样式
/* 文本居中 */
text-align: center;
/* 首行缩进 */
text-indent: 2em;
/* 超链接去下划线 */
text-decoration: none;
文本阴影和超链接伪类
超链接伪类
/* 鼠标悬停颜色 */
a:hover{
background: rgb(235, 61, 61);
}
/* 鼠标点击颜色 */
a:active{
color: lawngreen;
}
/* 鼠标点击后颜色 */
a:visited{
color: gray;
}
阴影
#yy{
/* 阴影颜色 水平偏移 垂直偏移 阴影半径 */
text-shadow: rgb(26, 4, 4) 10px 10px 5px;
}
列表样式
ul{
500px;
/* none=>去掉原点 square=>正方形 circle=>空心原点*/
list-style-type: square;
background-color: rosybrown;
}
背景渐变
渐变网站：https://uigradients.com/#MoonlitAsteroid
body {
text-align: center;
background: #232526;
background: -webkit-linear-gradient(to right, #414345, #232526);
background: linear-gradient(to right, #414345, #232526);
}
盒子模型和边框阴影
- padding：内边距
- margin：外边距
- border：边框
#app {
400px;
/* 粗细程度 虚线 紫色 */
border: 5px dashed rebeccapurple;
/* 外边距的妙用 ==> 实现盒子居中 */
margin: 0 auto;
/* 文本居中 */
text-align: center;
}
圆角边框
#app {
400px;
height: 400px;
/* 取正方形边长的一半 */
border-radius: 200px;
}
盒子阴影
/* 阴影颜色 x偏移量 y偏移量 阴影大小 */
box-shadow:yellow 10px 10px 1000px ;
实现行内元素的排列方式——>display和浮动
/* inline-block 既是行内元素--也是块元素 */
display: inline;
display: block;
display: inline-block;
/* 左右浮动 */
float: right;
float: left;
/* 右侧不允许有浮动的元素，如果有就另起一行 */
clear:right;
/* 左侧不允许有浮动的元素，如果有就另起一行 */
clear:left;
/* 两侧不允许有浮动的元素，如果有就另起一行 */
clear:both;
overflow，父类边框塌陷问题
-
增加父级元素的高度
height -
增加一个新的
div -
overflow
/* 超过了父类边框的部分 --> 隐藏 */ overflow: hidden; /* 超过了父类边框 --> 会出现一个滚动条 */ overflow: scroll;
定位
相对定位和绝对定位
相对定位：相对于原来的位置进行偏移，原来的位置会被保留
/* 相对定位 */
position: relative;
top: 10px;
绝对定位：相对于父类或者浏览器进行偏移，原来的位置不会被保留--->原位置没有了
/* 父相子绝 */
position: absolute;
固定定位：随滚动条的滑动而滑动，对于屏幕来说位置不变
position: fixed;
z-index和透明度
z-index：默认是0，最高~999。从下层往上，显示最大的z-index元素。
ul {
position: relative;
list-style: none;
}
#xx {
500px;
position: absolute;
bottom: 50px;
background-color: black;
z-index: 99;
color: blanchedalmond;
}
#ks {
520px;
position: absolute;
background-color: red;
bottom: 50px;
/* 优先级最高 */
z-index: 999;
}
透明度：
/* 透明度：0 ~ 1。 0-->全透明 1-->不透明 */
opacity: 0.2;
动画（一般都有JS实现）
css可以实现一些简单的动画（css实现动画比较繁琐）。
2D转换：平移，旋转