CSS属性
尺⼨
  width    设置宽度
  height  设置⾼度
ps:
  块级标签才能设置宽度，内联标签的宽度由内容来决定。
字体属性
字体样式
⽂字字体
设置字体名称，取字体名称，如果字体名称中出现了空格或中⽂，必须加引号；多个字体名称之间使⽤，隔开，⽤于设置备⽤字体按照从第⼀个开始识别，直到能够识别到为⽌，识别到后后⾯的不再继续
body {
font-family: "Microsoft Yahei", "微软雅⿊", "Arial", sans-serif
}
字体⼤⼩
p {
font-size: 14px;
}
字重(粗细)
  font-weight⽤来设置字体的字重（粗细）。
normal    　标准粗细 (默认)
bold      　粗体
bolder      更粗
lighter  更细
inherit    　继承⽗元素字体的粗细值
  100~900 设置具体粗细，400等同于normal，⽽700等同于bold
p {
font-weight: bold;
} 
p {
font-weight: 500;
}　
⽂本颜⾊
格式:
    ⼗六进制值 - 如: ＃FF0000
    ⼀个RGB值 - 如: RGB(255,0,0)
    颜⾊的名称 - 如: red
    rgba(255,0,0,0.3)，第四个值指定了⾊彩的透明度/不透明度，范围为0.0~1.0
p {
color:RGB(255,0,0);
}
⽂字装饰
  text-decoration 给⽂字添加特殊效果。
    none        定义标准的⽂本。(默认)
    underline      定义⽂本下的⼀条线。
    overline        定义⽂本上的⼀条线。
    line-through  　定义穿过⽂本下的⼀条线。
    inherit      　继承⽗元素的text-decoration属性的值。
常⽤的为去掉a标签默认的⾃划线
a {
text-decoration: none;
}
字体属性简写
p {
  font:style weight size/line-height family;
}
段落属性
⽔平对齐设置
  text-align 属性规定元素中的⽂本的⽔平对齐⽅式。
    left      左边对齐 默认值
    right    右对齐
    center    居中对齐
    justify  　两端对齐
垂直居中
borderbox
默认在垂直⽅向对齐⽅式为 靠近上⽅
设置等于⾏⾼即可居中
/* ⽂本垂直居中调⾏⾼ */
/
* ⼀⾏⽂本在⽂本中始终是垂直居中可以⼿动将⾏⾼调整为与元素⾼度⼀致 */
line-height: 50px;
⽂本
⾸⾏缩进
将段落的第⼀⾏缩进 32像素
p {
text-indent: 32px;
}
背景属性
background-color：背景颜⾊
background-image:url('11.jpg'); 背景图⽚链接
background-repeat:repeat; 默认两个⽅向重复平铺
background-repeat:repeat-x; x轴平铺
background-repeat:repeat-y; y轴平铺
background-repeat:no-repeat; 不重复
background-position:400px 200px 调整背景的位置（距左。距右）
background-position: center:center; 背景居中
简写：
background: url('11.jpg') no-repeat center;
背景位置
background-position:x y;
取值
像素值
设置背景图⽚在元素坐标系中的显⽰位置，默认从（0,0）点，左上⾓显⽰，超出元素尺⼨部分不可见⽅位值
⽔平：left / center / right
垂直: top / center / bottom
注意：缺省某个⽅向，默认为center
百分⽐
0% 0% ：左上⾓
50% 50%：居中
100% 100% 右下⾓
应⽤
精灵图技术
为了减少⽹页请求，通常将⼀组图标拼在⼀张图⽚上，
⼀次请求全部得到，借助于background-position调整图标显⽰
背景属性简写
背景图⽚的尺⼨单独设置
background:color url() repeat position;
边框属性
属性
border-width  宽度
border-style  风格
  none    ⽆边框。
  dotted    　点状虚线边框。
  dashed      矩形虚线边框。
  solid      实线边框。
border-color  颜⾊
border-radius　⽤这个属性能实现圆⾓边框的效果。
        　将border-radius设置为长或⾼的 50% 即可得到⼀个圆形，可⽤于圆形头像展⽰
⽰例
#i1 {
border-width: 2px;
border-style: solid;
border-color: red;
}
⽀持简写⽅式
#i1 {
border: 2px solid red;
}
表格属性
边框间距
border-spacing:h v;
两个值分别代表⽔平和垂直⽅向上的边框距离，⼀个值表⽰统⼀设置⽔平和垂直⽅向的距离。只能边框分离状态下设置边距
边框合并
border-collapse:separate/collapse;
默认边框分离，可以设置collapse合并。
显⽰属性
⽤于控制HTML元素的显⽰效果。
display
属性
display:"none"        HTML⽂档中元素存在，但是在浏览器中不显⽰。⼀般⽤于配合JavaScript代码使⽤。display:"block"        默认占满整个页⾯宽度，如果设置了指定宽度，则会⽤margin填充剩下的部分。
display:"inline"        按⾏内元素显⽰，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。display:"inline-block"    　使元素同时具有⾏内元素和块级元素的特点。
display:"none"与 visibility:hidden 的区别：
  visibility:hidden: 隐藏某个元素，隐藏的元素仍需占⽤与未隐藏之前⼀样的空间。会影响布局。
  display:none: 隐藏某个元素，隐藏的元素不会占⽤任何空间。不影响布局
cursor
设置⿏标在元素上的显⽰形状
default 箭头形状（按钮，图⽚）
pointer ⼿指形状（超链接）
text ⽂本信息，显⽰为“I”
opacity
定义透明效果 0~1 , 设置元素整体半透明, 包含元素⾃⾝和所有后代元素
CSS盒⼦
概念
  margin: ⽤于控制元素与元素之间的距离；
    margin的最基本⽤途就是控制元素周围空间的间隔，
    从视觉⾓度上达到相互隔开的⽬的。
  padding: ⽤于控制内容与边框之间的距离；
  Border(边框): 围绕在内边距和内容外的边框。
  Content(内容): 盒⼦的内容，显⽰⽂本和图像。
margin外边距

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。