基础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