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 的上面*/