HTML_CSS
1、字体颜色
RGB(red greed bule)(0,10,256)
#0010FF
CSS中颜色的表示方法
(1) 预定义颜色:bule ,red,black。。。
(2) 十六进制颜色:#0f0f0f
(3) RGB颜色(128,0,0)全红
(4) RGBA,在RGB的基础上又添加了表示透明度的Alpha
(5) HSl:用色调,饱和度,和透明度三个分量来表示颜色
(6) HSLA:在HSL的基础上又添加了表示透明度的Alpha
代码实现:
预定义颜色
RGB颜色
16进制颜色
2、背景相关属性
Background-color:背景颜色
Background-image:背景图片
Background-repeat:图片复制选项(repeat在水平,垂直两个方向复制)
(repeat-x/y 在水平/垂直方向进行复制)
(no-repeat 不复制)
Background-position:图片所在位置 上top 下bottom 左left 右right
简写:将所有元素放在一起
有顺序要求:背景颜色->背景图片->重复方式->所在位置
background: url(img/pic.jpg) #87CEEB repeat-y right;
3、尺寸相关属性
(1)固定高度与宽度(height:200px)
(2)自适应高度(高度会根据内容的增加而增加)
(3)指定最大高度max-height(内容增加到指定高度的时候就不会再增加)
(4)指定最小高度min-height(开始时高度固定,内容增加到一定地步时开始增加高度)
4、显示相关属性
(1)visibility:hidden 仅仅隐藏内容,该元素所占位置依然存在
(2)display:none 不仅隐藏内容,而且隐藏位置
Display:inline 将块级元素以内联元素形式显示,此时宽,高等属性对其无效
Display:inline-block 将块级元素以内联元素形式显示并且具有块级元素的特征,宽,高属性依然有效
Display:block 将内联元素以块级元素的形式展现
5、盒子模型
Margin:外边距
Margin-top(上) margin-bottom(下) margin-left(左) margin-right(右)
使用方式:
(1) margin:30px ,表示上下左右外边距都设置30px
(2) margin-left:30px ,表示设置距离左方30px
(3) margin: 10px 20px 10px 20px 分别设置上右下左四个边的边距,顺序按照顺时针方向
(4) margin:20px 30px 分别设置上下边距为20px ,左右边距为30px
Padding:内边距
与margin类似 上下左右边距都有
Border:边框
如果想让两个盒子在一行内,那么两个盒子都要浮动(float)并且给它们的父类清除浮动(overflow: hidden;)
什么是父类:
Box是div1和div2的父类。