CSS选择器详解及常用样式表标记标签属性

本学期开设有个ASP.NET课程，刚开始两周，一直处于复习 web技术阶段，刚好自己准备好好学一下CSS的相关内容，就顺路一起看看，了解CSS常用的选择器，这样在后续的个人网站开发上，可以更方便，进入正题：

CSS：Cascading Style Sheets(层叠样式表)

 常用的CSS选择器：

       1.通用选择器(Universal)

 *{ /** * font-family：字体 * margin：外间距 * padding:内间距 */ font-family: "arial black"; margin: 0px; padding: 0px; }

       2.类型选择器(Type)

h1,h2,h3{
				color: red;
				background-color: aquamarine;
	}

       3.类选择器(Class)：解决一类标签的问题
        格式：

        样式定义选择符号.类名{样式属性1：值1;样式属性2：值2;}

div.bg{
				background-color: green;
}
div.class1{
				font-family: "微软雅黑";
				margin: auto;
}

        4.ID选择器
         格式：

        #ID选择器{属性1：值1;属性2：值2;}

#id_name1, #id_name2{
				/**
				 * 多个id选择器，可用逗号隔开书写
				 */
				font-family: "微软雅黑";
			}

         5.伪类选择器

        CSS 中的伪类选择器在创建样式规则时提供了额外的选项，可以添加到其他选择器，创建更加负责的CSS规则；

#title.p:first-child{
				font-size: x-large;
}
#title.p:nth-child(2){
				font-size: large;
}

CSS样式：

        1.内联样式
        在HTML元素中使用style标记 ，建立一个或多个样式 。
        格式：
        style="属性1：值1；属性2：值2;属性3:值3"
        eg：
                

重新复习CSS样式

         2.内部样式表
        在标签中，使用来使用样式
        eg:
        style>
h1{
font-size: 20px;
background: auto;
padding: 5px;
}

       
        3.外部样式表
        单独建一个.css文件夹，在总用link来引入css；

       

标记的选择器，可以设置不同类型链接的显示方式

            a:link：未被访问过的超链接；
        a:visited:已被访问过的超链接；
        a:active:当前超链接处于选中状态；

        a:hover:当鼠标指针移动到超链接上显示；（hover：悬停，徘徊）

CSS常用属性：

(1) *block（区块）

行高 line-height:数值 | inherit | normal;
字间距 letter-spacing: 数值 | inherit | normal;
词间距 word-spacing: 数值 | inherit | normal;
空格 white-space: pre(保留) | nowrap(不换行) | normal;

/*表格宽度自适应*/
th {
white-space: nowrap;
}

显示 display:

none; /*不显示，使用的场景非常多*/
block; /*把内联标签变成块级标签*/
inline; /*把块级标签变成内联标签*/
list-item; /*列表项*/
run-in; /*追加部分*/
compact; /*紧凑*/
marker; /*标记*/
table;
inline-table;
table-raw-group;
table-header-group;
table-footer-group;
table-raw;
table-column-group;
table-column;
table-cell;
table-caption; /*表格标题*/

(2) *box（盒子）

宽度 width: 长度 | 百分比 | auto;
高度 height: 长度 | 百分比 | auto;
清除 clear: none | left | right | both;
边界 margin: 上 右 下 左 ;
填充 padding: 上 右 下 左 ;
定位 position: absolute | relative | static;
透明度 visibility: inherit | visible | hidden;
溢出 overflow: visible | hidden | scroll auto;
裁切 clip: rect(12px,auto,12px,auto)

(3) float（漂浮）

漂浮 float: left | right | none; 在页面布局的时候用的最多

常见用法

<div style='background-color:red;float:left;width: 50%;' >div1div>
<div style='background-color:green;float:right;width: 50%;' >div2div>

一个问题

子标签使用了float时候，父标签的样式失效

<div style='background-color:red;'>
    <div style="float: left">div1div>
    <div style="float: left">div2div>
div>

解决方案一：clear: both

<div style='background-color:red;'>
    <div style="float: left">div1div>
    <div style="float: left">div2div>
    <div style="clear: both;">div> 
div>

解决方案二：clearfix

<div style='background-color:red;' class="clearfix">
    <div style="float: left">div1div>
    <div style="float: left">div2div>
div>

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

(4) position（定位）

fixed

一般用来写网页顶端的固定导航条，或者两侧的菜单。

 
<div style="position:fixed;height:10%;background-color:lightskyblue;color:white;width:100%;top:0px;">我是导航div>
<div style="">
    <div style="position:fixed;bottom: 0px;top:10%;float: left;width: 20%;background-color:indianred">我是菜单div>
    <div style="float: right;width:80%;"><p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
        <p>我是内容p>
    div>
div>

absolute与relative

这两者一般配合使用，用于调整div之间的相对位置

<div style="position:relative;width: 300px;height: 150px;">
    <div style="position:absolute;float: left;width: 20%;background-color:indianred;bottom: 0px;right: 0px;">我是菜单div>
div>

(5) 透明度

.image{
    opacity: 0.5
}

<img src="http://www.jotlab.com/wp-content/uploads/2008/08/python.jpg" style="opacity: 0.5; width:50%; height:50%; ">

(6) font（字体）

颜色 color: 数值;
大小 font-size: 数值;
字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体 font-variant: small-caps;(小型大写字母) normal;(正常)

(4) background（背景）

背景 background: transparent; /透视背景*/
颜色 background-color: 数值;
图片 background-image: url() | none;
重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/

滚动 background-attachment: fixed | scroll;
位置 background-position:数值 | top | bottom | left | right | center;

background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/

简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;

(7) text（文本）

大小写 text-transform: capitalize | uppercase | lowercase | none;
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
排列 text-align: justify | left | right | center;
缩进 text-indent: 数值 | inherit;
阴影 text-shadow:数值;

(8) border（边框）

边框样式 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
边框宽度 border-width: ;
边框颜色 border-color: top值 right值 bottom值 left值;
简写 border: width style color;

边　　框 {
    border:border-width border-style color}
上 边 框 {
    border-top:border-top-width border-style color}
右 边 框 {
    border-right:border-right-width border-style color}
下 边 框 {
    border-bottom:border-bottom-width border-style color}
左 边 框 {
    border-left:border-left-width border-style color}

(9) list-style（列表样式）

类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/

位置 list-style-position: outside | inside;
图像 list-style-image: URL;
简写 list-style:目录样式类型 | 目录样式位置 | url;

(10) margin（边界）

margin-top:10px; (上边界)
margin-right:10px; (右边界)
margin-bottom:10px; (下边界值)
margin-left:10px; (左边界值)
margin-inside:;
margin-outside:;

(11) padding（填充）

padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白

(12) vertical（垂直）

vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/

(13) a（链接）

a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/

(14) cursor（光标）

光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;

/*也可以自定义*/
cursor: hand; /*链接手指*/
cursor: crosshair /*十字体 */
cursor: s-resize /*箭头朝下 */
cursor: move /*十字箭头, 朝右*/
cursor: help /*加一问号 */
cursor: w-resize /*箭头朝左 */
cursor: n-resize /*箭头朝上 */
cursor: ne-resize /*箭头朝右上 */
cursor: nw-resize /*箭头朝左上 */
cursor: text /*文字型*/
cursor: se-resize /*箭头斜右下 */
cursor: sw-resize /*箭头斜左下*/
cursor: wait /*漏斗*/