CSS属性的设置
CSS属性的设置
制作人：全心全意
color颜色属性的设置
HSL颜色：通过对色调（H）、饱和度（S）、亮度（L）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色
H：取值为0-360
S：取值为0.0%-100.0%
L：取值为0.0%-100.0%
例：
color:hsl(240,100%,50%)
HSLA颜色：色调（H）、饱和度（S）、亮度（L）、透明度（A）
A：取值0-1之间
此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度
例：
color:hsla(0,100%,50%,0.2)
RGB颜色：红（R）、绿（G）、蓝（B）三个颜色通道的变化
R：正整数（0-255）|百分比（0.0%-100%）
G：正整数（0-255）|百分比（0.0%-100%）
B：正整数（0-255）|百分比（0.0%-100%）
若设置的值超出取值范围，将截至其最接近的取值极限。如rgb(300,0,0)会被解析为rgb(255,0,0)
rgb(255,255,255)=rgb(100%,100%,100%)=#FFFFFF=#FFF
RGBA颜色：同HSLA颜色
十六进制：红绿蓝
取值范围：0-9 a-f
英文单词：英文单词
取值范围：英文单词
字体属性的设置
font-size：设置字体尺寸，字体大小
font-size:14px;
font-family：设置文本的字体名称序列，一般字体引用可以不加引号，如果字体包含了空格、数字或者符号（如连接符）则需加上引号，避免引发错误
font-family: "仿宋"; font-family: arial;
font-style：设置或检索对象中的文本字体样式
normal：指定文本字体为正常的字体
italic：指定文本字体样式为斜体
oblique：指定文本样式为倾斜的字体
font-style:normal;
font-weight：设置文本字体的粗细
normal：正常的字体，相当于数字值400
bold：粗体，相当于数字值700
bolder：定义比继承值更重的值
font-weight: bold;
取值范围是100/200/300/400/500/600/700/800/900，其余的值没有什么特殊的效果了
font-variant：设置文本是否为小型的大写字母，针对于英文，默认值normal
small-caps：设置文本为小型的大写字母
font-variant: small-caps;
文本属性的设置
text-indent：文本的首行缩进
text-indent:30px;
text-align：文本的位置设置
left：靠左
center：居中
right：靠右
text-decoration：文本的线条位置设置
underline：文本显示下划线
line-through：文本显示删除线
none：去除下划线（可去除a标签默认的下划线）
word-spacing：文本单词间距的设置
word-spacing: -30px; word-spacing: 20px;
text-transform：文本中单词的大小写设置
capitalize：首字母大写
uppercase：大写
lowercase：小写
letter-spacing：文本文字间距的设置
letter-spacing: 20px;
line-height：文本行高的设置（主要用于设置文字的上下）
line-height: 50px;
text-shadow：文本的文字是否有阴影及模糊效果（设置偏移量及阴影颜色）
text-shadow: 5px 5px 5px #FFFF00;
direction：文字流方向的设置
ltr：从左向右
rtl：从右向左
text-overflow：文本的溢出是否使用省略标记（...），如标签指定了大小，文本过多
clip：不使用
ellipsis：使用省略标记
white-space：设置强制文本在一行内显示
nowrap：强制文本在一行内显示
例如：结合使用展示效果
p {
font-size: 32px;
font-family: "仿宋";
font-weight: bold;
width: 100px;
height: 50px;
background: green;
/*结合使用*/
direction: rtl;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; /*溢出隐藏*/
}
背景属性的设置
background-color：背景颜色
background-image：背景图片的设置
background-repeat：背景图片是否平铺，如何平铺的设置
repeat：默认平铺
no-repeat：不平铺
repeat-x：x轴平铺，y轴不平铺
repeat-y：y轴平铺，x轴不平铺
background-position：背景图片位置（定位）的设置
一个值：代表X轴的位置
两个值：第一个代表X轴，第二个代表Y轴
注意：图片的开始点（0,0）点是从图片的左上角开始算起，跟标签没有关系
例：快捷设置背景图片（引入地址、是否平铺、定位属性）
background: url(./11.png) no-repeat -12px -40px;
边框属性的设置
border：复合属性，设置对象边框的特性，如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置
例：border:1px solid red;
设置或检索对象边框宽度
设置或检索对象边框样式
设置或检索对象边框颜色
border-color：设置或检索对象的边框颜色
如果提供四个参数值，将按照上、右、下、左的顺序作用于四边
如果只提供一个参数值，将作用于全部的四个边
如果提供两个参数值，第一个作用于上和下，第二个作用于左和右
如果提供三个参数值，第一个作用于上，第二个作用于左和右，第三个作用于下
border-style：设置或检索对象的边框样式
如果提供四个参数值，将按照上、右、下、左的顺序作用于四边
如果只提供一个参数值，将作用于全部的四个边
如果提供两个参数值，第一个作用于上和下，第二个作用于左和右
如果提供三个参数值，第一个作用于上，第二个作用于左和右，第三个作用于下
dotted：点状轮廓
dashed：虚线轮廓
solid：实线轮廓
double：双线轮廓 两条单线与其间隔的和等于指定border-width的值
groove：3D凹槽轮廓
ridge：3D凸槽轮廓
inset：3D凹边轮廓
outset：3D凸边轮廓
border-width：设置或检索对象的边框宽度
如果提供四个参数值，将按照上、右、下、左的顺序作用于四边
如果只提供一个参数值，将作用于全部的四个边
如果提供两个参数值，第一个作用于上和下，第二个作用于左和右
如果提供三个参数值，第一个作用于上，第二个作用于左和右，第三个作用于下
border-radius：设置或检索对象使用圆角边框
当边框长宽相等，border-radius的值为50%时，会变成一个圆形
border-radius:15px;
border-radius:50%;
浮动属性的设置
float：浮动
left：左浮动
right：右浮动
盒子模型的使用
- 内补白（内补丁）
padding：检索或设置对象四边的内部边距
padding-top：检索或设置对象顶边的内部边距
padding-bottom：检索或设置对象下边的内部边距
padding-left：检索或设置对象左边的内部边距
padding-right：检索或设置对象右边的内部边距
- 外补白（外补丁）
margin：检索或设置对象四边的外延边距
margin-top：检索或设置对象顶边的外延边距
margin-bottom：检索或设置对象下边的外延边距
margin-left：检索或设置对象左边的外延边距
margin-right：检索或设置对象右边的外延边距
属性转换设置
display：规定元素应该生成的框的类型（主要用于CSS属性块级元素和行内元素的转化）
inline：此元素会被显示为内联元素
block：此元素将显示为块级元素
none：此元素不会被显示
元素溢出的设置
overflow：元素溢出样式的设置
visible：默认值。内容不会被修剪，会呈现在元素框外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（不管是否溢出，都会显示滚动条）
auto：内容会被修剪，浏览器会显示滚动条以便查看其余的内容（若元素没有溢出，不显示滚动条）
CSS的常用操作
- 对齐操作
使用margin属性进行水平对齐
margin-left:auto;
margin-right:auto;
使用position属性进行左右对齐
position:absolute;
left:0;
right:0;
使用float属性进行左右对齐
float:left;
float:right;
- 尺寸操作
width：宽度
height：高度
line-height：行高
max-width：最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度
