23@CSS_day02

一、css
　　1、什么是css?
　　　　cascading stylesheet, 为网页(也就是html文件)提供展现的行式(即外观)的一种技术。
　　　　使用css技术，可以将网页的表现与数据分离，方便代码的维护。
　　2、css选择器
　　　　1)什么是选择器?
　　　　　　是一套规则，告诉浏览器如何将样式施加到匹配的节点。
　　　　2)常用的选择器
　　　　　　a, 标记选择器(简单选择器):
　　　　　　　　比如：

body{
    font-size:30px;
    color:red;
}

 

　　　　　　　　对所有body标签都会施加对应的样式
　　　　　　　　又比如：

p{
    font-size:50px;
}

 

　　　　　　 b,class选择器
　　　　　　　　b1,匿名的class选择器(不限定标签)
　　　　　　　　　　比如:

.s1{
    font-size:70px;
    color:blue;
}

 

　　　　　　　　　　标记的class属性值等于s1的所有标记
　　　　　　　　b2,有名称的class选择器(限定标签)

div.s1{
    font-size:80px;
}

 

　　　　　　　　　　必须是div,并且class属性值等于s1。
　　　　　　c, id选择器
　　　　　　　　比如:

#d1{
    width:100px;
    height:80px;
    background-color:#fff8dc;
}    

 

　　　　　　　　标记的id值一定要唯一，对id值为d1的标记起作用。
　　　　　　d,选择器的派生
　　　　　　　　比如:

#d2 span{
    font-weigth:900;
}

 

　　　　　　　　先找到id值为d2的标记，然后寻找该标记下面的span标记。
　　　　　　e, 选择器的分组

h1,h2,h3{
    color:green;
}

 

　　　　　　　　对h1,h2,h3这三个标记都会施加样式。
　　3、样式的优先级
　　　　外部样式: 将样式写在.css为后缀的文件里。
　　　　内部样式: 将样式写在<style>标记里面。
　　　　内联样式: 将样式写在标记里，使用style属性来定义。
　　　　优先级内联最高，其次内部，最末外部样式。
　　4、关键的css属性
　　　　1)display属性：
　　　　　　block: 以块标记的方式显示
　　　　　　inline: 以行内标记的方式显示
　　　　　　none:  不显示
　　　　　　a, 块标记,即需要另起一行的标记，常见的有：div,h1,h2,h3..h6,img,form,ul,li,table
　　　　　　b,行内标记 <a>,<span>,<strong>,<input>
　　　　2)position属性:
　　　　　　static:(缺省) 浏览器按照从左到右，从上到下摆放各个标记。
　　　　　　absolute: 相对父标记偏移
　　　　　　relative: 浏览器按照缺省的方式摆放，然后相对缺省的位置进行偏移。
　　5、常用的css属性
　　　　1)文本相关的
　　　　　　font-size:  30px; 或者 24pt; 字体大小
　　　　　　font-style: italic/normal; 斜体/正常
　　　　　　font-family: "宋体";
　　　　　　font-weigth: 800;  粗细；单位磅 100~900
　　　　　　text-align: center/left/right; 水平对齐方式
　　　　　　cursor: pointer/wait;   光标的形状
　　　　　　line-height: 80px;  行高
　　　　2)背景
　　　　　　background-color: red; #fff8dc;  rgb(100,88,124);//颜色
　　　　　　background-image:url(images/b1.jpg);
　　　　　　background-repeat: no-repeat;/repeat-x;/repeat-y;
　　　　　　background-postion: 20px 30px; //水平  上下
　　　　　　background-attachment: scroll(缺省)/fixed;
　　　　　　可以简化为:background:背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置
　　　　　　比如:          background: red url("images/nane.gif") no-repeat fixed 20px 30px;
　　　　3)边框
　　　　　　border:1px solid red; //宽度 类型 颜色
　　　　　　也可以分别指定各个边框的样式:
　　　　　　border-left:
　　　　　　border-right:
　　　　　　border-top:
　　　　　　border-bottom:
　　　　4)定位
　　　　　　width:宽度
　　　　　　height:高度
　　　　　　margin:外边距
　　　　　　margin-left: 30px;
　　　　　　margin-right: 40px;
　　　　　　margin-top:50px;
　　　　　　margin-bottom:60px;
　　　　　　也可简化: margin: 20px 30px 40px 50px;  //top,right,bottom,left
　　　　　　margin: 20px auto; //上，下各20px,左右平均
　　　　　　margin:0px;
　　　　　　padding:内边距
　　　　　　padding-left:30px;
　　　　　　padding-right:40px;
　　　　　　padding-top:50px;
　　　　　　padding-bottom:60px;
　　　　　　也可简化:padding: 20px 30px 40px 50px;  //top,right,bottom,left
　　　　5)链接的伪样式
　　　　　　a:link { color: red} 没有访问时
　　　　　　a:visited { color: blue} 访问后
　　　　　　a:active { color: lime} 鼠标点击但还没有放开时
　　　　　　a:hover { color: aqua} 鼠标指向时
　　　　6)其它
　　　　　　text-decoration: none;/underline  加不加下划线
　　　　　　list-style-type: none;  取消列表项的符号。
　　　　　　float: left/right; 浮动
　　　　　　clear:both; 取消浮动的影响,即浮动的标记即使让出了位置，也不能使用。