css 样式属性说明笔记
font-family : 设置字体类型，如：楷体、宋体、华文彩云。。。
示例： font-family:”华文彩云”;
font-size:设置字体大小, 如 font-size:12px;
font-style:设置字体风格, 如斜体，粗体
示例： font-style:itialic;/*将字体设置为斜体*/
font-weight: 设置字体粗细，如 bold 为粗体,thin 为细体
示例: font-weight:bold;
font：设置字体样式的简写形式，设置的顺序是 风格->粗细->大小->类型
如:font:italicbold 36px “宋体”;
color: 设置文本颜色
text-align:设置元素水平对齐方式
示例：text-align:center;
text-indent:设置首行文本的缩进
示例: text-indent: 2em; /*缩进两个字符*/
line-height:设置文本行高，设置完后，文本会在这个高度垂直对齐
示例：line-height:30px; /*设置每行的行高为30像素*/
text-decoration:设置文本的装饰，比如设置字体的下划线underline，上划线overline
示例：text-decoration:underline; /*给文字设置下划线*/
text-decoration: none; /*将文字的下划线去除*/
伪类
a:link 未单击时
示例:a:link{color:red; text-decoration:none; } /*设置超链接的样式*/
a:visited 单击后
示例：a:visited{color:blue; font-size:12px; } /*设置超链接被点击后的样式*/
a:hover 鼠标悬浮时
示例：a:hover{ color:yellow;text-decoration:underline; }
/*设置鼠标移动到超链接时的样式*/
a:active 鼠标单击时
示例: a:active{ color:green; font-size:14px; } /*设置在点击超链接时的样式*/
cursor: 设置鼠标形状,比如设置为手形(pointer)
示例：cursor:pointer;/*设置鼠标形状为手型*/
cursor:help; /*设置鼠标形状为帮助型*/
width: 设置某标签的宽度
示例:width:100px; /*设置元素宽度为100像素*/
width:50%; /*设置元素宽度为总宽度的50%*/
height: 设置某标签的高度
示例：height:100px;/*设置元素高度为100像素*/
height:50%; /*设置元素高度为总高度的50%*/
background-color:设置某标签的背景颜色
background-image:设置某标签的背景图片
示例：background-image:url(“C:/hello.jpg”);
background-repeat:设置背景图片的平铺方式,默认为平铺
示例：background-repeat:no-repeat; /*设置背景图片不平铺*/
background-repeat:repeat-X; /*设置背景图片为横向平铺*/
background-position:设置背景图片的位置
示例:background-position:center bottom; /*设置背景图片横向居中 纵向居底*/
background-position:100px10px; /*设置背景图片横向在100像素，纵向在10像素*/
background:设置背景样式，设置的顺序是 背景颜色->背景图片->X位置->Y位置->平铺方式
示例:background:orange url(“C:/help.jpg”) 30px 40px no-repeat;
/*设置背景颜色为橙色，背景图片为help.jpg，横向位置在30像素，纵向位置在40像素中，背景图片不平铺*/
list-style-type:设置列表标签的项目符号类型，比如空心圆(circle),数字(decimal)
示例：list-style-type:circle; /*设置项目符号为空心圆*/
list-style-type:none; /*设置列表标签为项目符号*/
list-style-image:设置列表标签的项目符号为图片
示例: list-style-image: url(“C:/type.jpg”);
border-top-color:设置上边框颜色
示例:border-top-color:blue; /*设置元素上边框的颜色为蓝色*/
border-right-color:设置左边框颜色
border-bottom-color:设置下边框颜色
border-left-color:设置左边框颜色
border-color:设置边框颜色的简写，简写顺序是：上右下左
border-color:blue; 设置四个边都是蓝色
border-color:blue red 设置上下边框为蓝色，左右边框为红色
border-color:blue red yellow 设置上边框为蓝色，左右边框为红色，下边框为黄色
border-top-width: 设置上边框线条粗细
border-right-width: 设置右边框线条粗细
border-bottom-width: 设置下边框线条粗细
border-left-width: 设置左边框线条粗细
border-width: 设置边框粗细的简写，顺序为 上 右 下 左
border-width:5px; 设置四个边框的粗细都是 5像素
border-width:20px 2px; 设置上下边框为20像素，左右边框为2像素
border-width:5px 1px 6px; 设置上边框为5像素，左右边框为1像素，下边框为6像素
border-top-style:设置上边框样式
border-right-style:设置右边框样式
border-bottom-style:设置下边框样式
border-left-style:设置左边框样式
border-style:设置边框样式的简写，顺序为 上 右 下 左
border-style:solid dotted; 设置上下边框为实线，左右边框为点线
border-style:solid dotted dashed; 设置上边框为实线，左右边框为点线，下边框为虚线
border: 设置边框的简写，简写顺序为边框粗细 -> 边框颜色 -> 虚线
margin-top: 设置上外边距的距离
示例:margin-top:100px;/*设置元素距离上边框的距离为100像素*/
margin-right:设置右外边距的距离
margin-bottom:设置下外边距的距离
margin-left:设置左外边距的距离
margin:设置外边距的简写，顺序为上 右 下 左
margin:3px 5px 设置上下外边距距离为3像素，左右外边距距离为5像素
margin:3px 5px 7px; 设置上外边距距离为3像素，左右外边距距离为5像素,下外边距距离为7像素
padding-top: 设置上内边距的距离
示例：padding-top:100px;
/*设置元素与内容之间的上边距距离为100像素，设置完成后，元素中的内容会往下移动*/
padding -right:设置右内边距的距离
padding -bottom:设置内外边距的距离
padding -left:设置左内边距的距离
padding:设置内边距的简写，顺序为上 右 下 左
padding:3px 5px 设置上下内边距距离为3像素，左右内边距距离为5像素
padding:3px 5px 7px; 设置上内边距距离为3像素，左右内边距距离为5像素,下内边距距离为7像素
要注意：使用padding进行填充内容边距时，元素的宽度和高度会受其影响，如果填充上边距或下边距则会改变元素的高度，如果填充左边距或右边距则会改变元素的宽度，可以通过减去相应的宽度和高度来解决。
padding的设置用在a标签中会有不错的效果
示例:
a{padding:2px 7px; background-color:yellow; }
a:hover{background-color:blue; }
/*对a标签设置padding属性，则会将a标签的宽度和高度进行扩大，从而达到好看的效果*/
display: 该属性用于设置某标签的变化
示例:
display: block; /*可将行级元素变为块级元素*/
display:inline; /*可将块级元素变为行级元素*/
float: 浮动属性，可将某元素脱离标准流，当浮动之后将不占用原来位置，而标准流中的元
素会占用该位置
示例:
float:left; /*将某元素脱离标准流，并浮向左边*/
float:right; /*将某元素脱离标准流，并浮向右边*/
clear:由于float属性的作用，标准流中的元素会占用浮动后的元素位置，为了让标准流中的
元素不会占用其位置，则使用clear属性来设置
示例:
clear:left; /*清除左浮动的影响*/
clear:right; /*清除右浮动的影响*/
clear:both; /*清除即有左浮动又有右浮动带来的影响*/
overflow: 该属性用于做内容溢出的处理
示例:
overflow:hidden;/*当内容溢出时，则溢出的部分被隐藏*/
overflow:scroll; /*不管内容是否溢出都设置该元素显示滚动条*/
overflow:auto; /*当内容溢出时则出现滚动条*/
overflow:visible; /*当内容溢出时，则也要显示出来*/
position: 该属性用于设置某元素的定位
示例：position:static;/*设置元素没有定位,仍在原来的地方*/
position:relative;/*设置某元素为相对定位,设置完成后，不会脱离标准流*/
div {
width:100px;
height:50px;
background-color:blue;
position:relative; /*设置该元素为相对定位*/
top:100px; /*设置某元素在原来的位置上向下移动100个像素*/
}
position: absolute; /*设置某元素为绝对定位，设置完成后，会脱离标准流*/
div{
width:100px;
height:50px;
background-color:orange;
position:absolute; /*设置元素为绝对定位*/
top:100px; /*如果该元素没有包含在相对定位的父级元素中，则直接以浏
览器的位置移动*/
}
position: fixed; /*设置某元素在浏览器的固定位置，即使移动滚动条也不移动
该元素的位置，会脱离标准流,*/
div{
width:50px;
height:50px;
background-image:url(“C:/XXX.jpg”);
position:fixed;
bottom:40px; /*固定在浏览器的下边*/
right:0px; /*固定在浏览器的右边*/
}
z-index:设置元素的层叠位置,数值越大，越靠前显示,该属性对非定位元素无效，只对定位元素有效
示例：z-index:0; /*设置某元素的层叠位置在最底下*/
z-index:1; /*设置某元素的层叠位置在 0 的上面*/