(颜色选取网站Palettes | Flat UI Colors 🎨 280 handpicked colors ready for COPY & PASTE)
1、颜色的表示方式
(1)、直接用颜色名(英文单词)来表示 red、blue、pink.......
div{
width:200px;
height:200px;
background:red;
}
(2)、用六位十六进制的数值表示颜色 #000000~ffffff(三原色混合原理,红光、绿光、蓝光,每两位代表一个颜色)
div{
width:200px;
height:200px;
background:#ffffff;
}
(3)、rgb(red,green,blue)0~255
div{
width:200px;
height:200px;
background:rgb(255,0,0);
}
(4)rgba(red,green,blue,alpha)a表示透明度0~1 (只针对背景部分,字体等其他元素是不透明的)
(5)透明度 opacity 对于整个元素的透明度设置
(6)渐变色linear-gradient(方向,颜色,颜色)
(7)透明色transparent
div{
width:200px;
height:200px;
background:rgba(255,0,0,0.5);
/*linear-gradient:(30deg,red,transparent)*/
/*opacity:0,5;*/
}
2、和字体相关的样式
(1)字体颜色 color
div{
width:200px;
height:200px;
color:red;
}
(2)font 复合属性
font-size设置字体大小
font-weight设置字体粗细
font-style设置字体的风格normal正常italic斜体
text-decoration设置文字是否有下划线 none是不修饰 、underline加下划线、line-through中划线、overline上划线
text-align设置规定文本的水平对齐方式 right右边 left左边 center 居中
line-height设置行高,当行高和设置的元素一样高时可以达到垂直居中
div{
width:200px;
height:200px;
color:red;
font-size:20px;
font-weight:500;
font-style:normal;
text-decoration:none;
text-align:center;
line-height:200px;
}
3、经常用的背景样式
(1)background-color设置背景颜色
(2)background-image设置背景图片url指定图片地址
(3)background-repeat设置背景图片是否平铺no-repeat为不平铺
repeat为平铺
repeat-x为x轴平铺
repeat-y为y轴平铺
(4)background-size设置背景图片大小,cover把所在容器铺满
(5)background-position:设置背景图片位置 center居中
(6)background-attachment控制背景图片是否随浏览器的滚动而滚动 ,background-attachment:fixed设置不随浏览器的滚动而滚动
div{
width:200px
height:200px;
background-color:red;
background-image:url("img/1.jpg");
background-repeat:no-repeat;
background-size:300px;
background-position:center;
background-attachment:fixed;
}
4、列表相关的样式
list-style:none;去掉列表样式
div{
width:200px
height:200px;
list-style:none;
}
5、和边框相关的样式
(1) border-radius 圆角边框值越大弧度越大
border-top-left-radius单独对角设置
或者直接给四个角赋值从上开始顺时针,没有的话找对称
(2)box-shadow 阴影设置
div{
width:200px;
height:200px;
border-radius:30px 20px 10px;
box-shadow:2px 6px 5px blue;
}
6、和图片相关的样式
object-fit:cover; 保持图片不变形
img{
width:200px;
height:200px;
object-fit:cover;
}
7、定位
.father{
width:600px;
height:1000px;
background:pink;
}
.top{
width:200px;
height:100px;
background:yellow;
}
.buttom{
width:200px;
height:100px;
background:plum;
}
.middle{
width:200px;
height:100px;
background:green;
/*pssition:fixed;
left:200px;
top:500px;*/
/*pssition:relative;
left:20px;
top:50px;*/
pssition:absolute;
left:20px;
top:50px;
}
(1)定位position用于设置定位模式 其值如下
①static 代表静态模式 常态模式
②fixed 代表固定模式,不随浏览器的移动而移动,释放自己原来的空间可以根据上下左右调位置,参考物是整个浏览器
③relative 代表相对模式 ,随浏览器的移动而移动,保留自己原来的空间,上下左右调位置,参考物是自己原来的位置
④absolute 代表绝对模式随浏览器的移动而移动,释放自己原来的空间可以根据上下左右调位置,参考物是整个浏览器.
⑤结合模式 父级使用relative,子集使用absolute,子级元素随浏览器的移动而移动,释放自己的空间参考物是父级元素
⑥定位层级 如果三个子集叠在一起,先出现的在最下面,后出现的在最上面,
可以设置定位层级,z-index: 值最大的在最上边