颜色
RGB(red greed bule)(0,10,256)
#0010FF
CSS中颜色的表示方式
- 预定义颜色:bule,red,black…
- 十六进制颜色:#0f0f0f
- RGB颜色:(128.0.0)全红
- RGBA:在RGB的基础上又添加了表示透明度的Alpha
- HSL:在色调,饱和度,和透明度三个分量来表示颜色
- HSLA:在HSL的基础上又添加了表示透明的Alpha
代码实现
<p style="color: blue;">预定义颜色</p>
<p style="color: rgb(0,255,0);">RGB颜色</p>
<p style="color: #ff0000;">16进制颜色</p>
2.4背景相关属性
Background-color:背景颜色
Background-image:背景图片<
Background-repeat:图片复制选项(repeat在水平,垂直两个方向复制)
(repeat-x/y在水平/垂直方向进行复制)
(no-repeat不复制)
Background-position:图片所在位置上top下bottom 左left 右
简写:将所有元素放在一起
有顺序要求:背景颜色->背景图片->重复方式->所在位置
background: url(img/pic.jpg)#87CEEB repeat-y right;
2.5尺寸相关属性
(1)固定高度与宽度(height: 200px)
(2)白适应高度(高度会根据内容的增加而增加)
(3)指定最大高度max-height(内容增加到指定高度的时候就不会再增加)
(4)指定最小高度min-height(开始时高度固定,内容增加到一定地步时候开始增加高度)
2.6显示相关属性
(l)vislbility: hddcn仅仅隐臧内容,该元素所占位置依然存在↓
(2)display: none不仅隐藏内容.而口隐藏位置
Display.inline将块级元素以内联元素形式显示,此时宽,高等属性对其无效
DIsplayinline-block将块级元素以内联元素形式显示并且具有块级元素的特征,宽,高属
性依然有效
Display:inline-block 将内联元素以块级元素的形式展现
2.7盒了模型
Margin:外边距
Margin-top(上)margin-bottom(下)margin-left(左)margin-right(右)
使用方式:
(1)margin: 30px ,表示上下左右外边距都设置30pxe'
(2]margin-left: 30px ,表示设置距离左方30px
(3)margin: 10px 2Cpx 10px 20px分别设置上右下左四个边的边距.顺序按照顺吋针方向
(4}margin: 20px 30px分别设置上下边距为20px ,左右边距为30px-
Padding:内边距
与margin类似上下左右边距都有√
Border:边框