css笔记

（1）cascading sytle sheet 级联样式表
　　按照w3c的规范，页面的数据和结构由html来负责，页面的外观（给用户展示的页面）有css来负责
（2）CSS基本语法
　　选择器名称{
　　　　属性：属性值；
　　　　属性2：属性值2；
　　}
　　举例：
　　　　#d1{
　　　　　　font-size:50px;
　　　　}
（3）施加样式（将样式施加到指定的html标签之上）
　　通过选择器来施加
　　a、标签选择器
　　　　body{
　　　　　　font-size:50px;
　　　　　　background-color:#cccccc;//或者写red，或者写rgb（93,97,102）
　　　　}
　　　　　注：对具有相同标签名的所有标签起作用。
　　b、class选择器
　　　　.选择器的名称{
　　　　}
　　　　注：对标签class属性值和选择器名称相同的标签起作用。

　　标签名.选择器的名称{ //此时的选择器只对该标签起作用
　　}
　　　　注：标签的class属性要与选择器名称相同，并且标签名要一致。

　　举例：
　　　　css文件中定义：
　　　　　　.s1{
　　　　　　　　font-size:50px;
　　　　　　　　font-family:"隶书";
　　　　　　　　font-weight:900;
　　　　　　}
　　　　　　div.s1{
　　　　　　　　font-size:50px;
　　　　　　　　font-family:"隶书";
　　　　　　　　font-weight:900;
　　　　　　}
　　　　html文件中定义：
　　　　　　<div class="s1">大家好</div>
　　　　　　<p class="s1">你好</p>

　　c、id选择器
　　　　#选择器的名称{
　　　　}
　　　　举例：
　　　　　　#d1{
　　　　　　　　width：200px;
　　　　　　　　height:200px;
　　　　　　　　background-color:red;
　　　　　　　　color:bule;
　　　　　　}
　　　　html文件：
　　　　　　<div id="d1">空前绝后</div>
　　注：标签的id属性要与选择器的名称相同。（一个html中id是唯一的，class可以重复）
　　d、选择器的分组
　　　　div，h1,p{
　　　　　　font-size:120px;
　　　　}
　　　　注:表示对div,h1，p都施加该样式。
　　e、选择器的派生
　　　　div p{
　　　　　　font-size:150px;
　　　　}
（4）样式的继承
　　子标签会继承父标签的样式。
（5）样式的优先级
　　浏览器默认样式：
　　外部样式：使用link引入外部的.css文件。
　　内部样式：使用style定义的样式。
　　内联样式：使用标签的style属性定义的样式。eg：<div style="font-size:90px;">
　　从上往下优先级增大
（6）几个重要的属性
　　a、位置相关的属性
　　　　margin：外边距
　　　　margin-left:40px;
　　　　margin-top:80px;
　　　　margin-bottom:30px;
　　　　margin-right:20px;
　　上面四句话可以简写为下面一句话：（上-右-底-左）
　　　　margin:80px 20px 30px 40px;
　　常用的两种特殊写法：
　　　　margin:0px;//含义：看成顶和左是零，其他的不管了
　　　　margin:20px auto;//左右居中，顶底各20px
　　　　padding:内边距
　　　　padding-left:40px;
　　　　padding-top:80px;
　　　　padding-bottom:30px;
　　　　padding-right:20px;
　　上面四句话可以简写为下面一句话：（上-右-底-左）
　　　　padding:80px 20px 30px 40px;
　　内边距在使用时，要注意，子标签会将标签撑开。
　　b、边框：
　　　　border:宽度 样式 颜色;
　　　　样式：solid inset outset等等；
　　　　border-left:给左边框一个样式
　　　　border-right:
　　　　border-bottom:
　　　　border-top:
　　c、背景：
　　　　background-color:#cccccc;
　　　　background-image:url(图片的地址);
　　　　background-repeat:no-repeat; //不填充
　　　　background/repeat-x/repeat-y
　　　　background-attchment:fixed/scroll(默认的)；
　　　　background-postion:100px 20px;
　　　　background：背景 图片 平铺方式 依附方式 水平位置
　　　　font-size:文字大小
　　　　font-weight:粗细 100-900
　　　　font-family:字体
　　　　text-decoretion：none /underline下划线
　　　　cursor:pointer/wait
　　　　test-align：left/right/center
　　　　line-height：30px
　　e,列表
　　　　list-style-type:none;去除小数点

　　f，关键属性
　　　　float:浮动 left/right 其作用：取消块级标签的独占一行的特性
　　　　clear:取消浮动 both;（使用：clear：both）
（7）布局：
　　　　body,ul,li,img{
　　　　　　margin:0px;
　　　　　　　padding:0px;
　　　　　　font-size:12px;
　　　　}
（8）链接的伪样式：
　　a:link{color:red} 没有访问时
　　a:visited{color:blue} 访问后
　　a:active{color:lime}鼠标点击但还没有放开
　　a:hover{color:aqua} 鼠标指向时