基础CSS学习一



1.css的引入方式：

  1.1内联式

<p style="color:red">您好</p>

  1.2内嵌式

<style type="text/css"> p{ color:gtay;} </style>

  1.3外链式   多采用这一方式

<link href="1.css" type="text/css" rel="stylesheet" /> 

  1.4导入式      这一方式延迟较大，不建议使用

@immort url()

 2.css选择器：

  2.1标签选择器

p{color:gtay;}

  2.2id选择器 以 .  为前缀

  2.3class选择器  以 # 为前缀

  2.4后代选择器   空格表示：什么下面的什么

body p{}

  2.5 ，表示什么和什么

p,spam{}

  2.6 * 默认页面中所有标签

  2.7相邻选择器  以 +为前缀 必须是同级元素之间

p+strong{}

  2.8 ~选择器 后面所有的同级元素

  2.9子选择器  以 >为前缀

  2.10属性选择器

a[title]{} /*属性值设置为title的a标签*/a[href='http://wwww.com']{} /*属性值等于http://wwww.com的a标签*/a[href^='http']{} /*属性值以http开始的a标签*/a[href$='com']{} /*属性值以com结尾的a标签*/a[href*='wwww']{} /*属性值包含www的a标签*/

3.css常用属性：

  3.1超链接相关   有严格的先后顺序，必须是下面代码的顺序

a:link{} /*未被访问的*/a:visited{}  /*已访问*/a:hover{}  /*指针位于上方*/a:active{} /* 被点击时*/

  3.2细线合并 

table{border-collapse:collapse;}

  3.3边框

div{border:solid 5px #000;border-style:dotted;border-width:5px;border-color:#000;}

  3.4背景

div{background-image:url();background-repeat:no-repeat;/*不重复背景图*/background-position:;background-color:;background-attachment:fixed;/*固定*/}

  3.5滚动条  overflow

p{overflow:hidden; /*超出部分自动隐藏*/overflow:auto; /*超出后会自动出现滚动条*/overflow:scroll;/*超不超出都有*/}

  3.6隐藏

div{display:none; /*不会占位置*/visibility:hidden;/*占位置*/}

  3.7鼠标  所有的鼠标样式都罗列出来了

div{cursor:pointer;cursor:wait;cursor:help;cursor:move;cursor:text;cursor:e-resize;cursor:ne-resize;cursor:nw-resize;cursor:s-resize;cursor:se-resize;cursor:sw-resize;cursor:n-resize;cursor:w-resize;}

  3.8列表

li{list-style:none;/*取消默认圆点*/list-style-image:;list-style-position:;list-style-type:circle;/*样式设置为圆圈*/}

 

4.行内元素、块级元素

  4.1块级元素

         特点：（1）内容默认显示在左上角

                     （2）独占一行（文档流）

          常用块级元素： div、p、 h1~h6、 form 、menu、pre、 table、ul、ol、dl

  4.2行内元素

         特点：（1）没有占满一行

                    （2）默认情况下，不受height width的影响

          常用行内元素：span、a、label、img、textarea、strong、input、select