CSS_01基础知识

1.css与HTML的结合方式:
     1.1 内联样式:<p style="">黑马程序员</p>
               这种直接在标签中写的css代码称为内联样式
     1.2 内嵌样式:<style type:"text/css">
                              div{color:"red";}
                         </style>
               这种在当前的html页面中添加的css代码称为内嵌样式
     1.3 链接外部样式表:
          <link rel="stylesheet" type="text/css"      href=""/>
          这种链接外部样式表的方式是实际开发中常用的方式

     这三种方式的优先级:内部关联样式表   > 外部样式表  >内部样式表  > 浏览器的默认设置
2.  内嵌样式表覆盖问题:
     在内嵌样式表中,后定义的选择器会覆盖先定义的选择器
 
3.  基本选择器的优先级:
          ID选择器 >类选择器> 标签名选择器

4.  三种基本选择器:
     <div>第一个快</div>
     <div class="div2">第二个</div>
     <div id="div3">第三个</div>
     在css代码中可以使用三种选择器
     4.1 div{color:"red";}   这种是标签选择器,可以对所有的标签生效
          .div2{color:"red";}  这是类选择器,可以对class属性为div2的标签生效
          #div3{color:"red";}  这是id选择器,可以对id为div3的标签生效,但是id为div3的标签只能有一个
5.扩展选择器:
     5.1 派生选择器:
          <font>我的中间有个span<span>我是font中的span</span>我的中间有个span</font>
          如果还有其他的span标签,要在css代码中只选择font中的span标签的话,可以使用类选择器或者id选择器
          还可以使用派生选择器,代码如下:
               font  span{ color:"red"}
    5.2 组合选择器
          .div,span,#td{ color:"green" }  这种选择器可以同时对多个标签生效,
     5.3 伪元素选择器:
          a : link{} 超链接未点击的状态
          a : visited{} 超链接点击后的状态
          a : hover{}  光标移上去时的状态,其中这个标签在其他的标签中也经常使用,例如
               div :hover{ color:"red"}表示当光标移动到div块上时,div块中的字体颜色变为红色
          a : active{}  点击超链接时的状态,(点下去但没有松开时的状态)

6. 字体相关的属性:font
     常用属性有:
     6.1 font-style:风格
     6.2 font-variant:异体
     6.3 font-weight:粗细
     6.4 font-size:大小
     6.5 font-family:字体系列
     或者是font ： 风格 异体 粗细 尺寸/行间距 字体系列
7. 文本类属性:
     text-align:表示字体的对齐方式
     text-decoration:表示字体中的下划线或上划线或是贯穿线
     direction:设置文本方向
     text-indent:设置文本的首行缩进
     line-height:设置行高
     letter-spacing:字符间的间距
     word-spacing:单词的间距
     text-transform:控制文本的大小写
8. 背景属性;
          可以设置背景颜色/背景图片/背景图片是否重复/背景图片的起始位置(参数可以是负数)/背景图片是否可以滚动
9. 边框属性:
     可以设置边框的颜色,粗细,样式
10. 内边距: padding: 设置标签里的文本距离标签的边框的距离
11. 外边据 : margin : 设置标签距离其紧挨着的标签的距离
12.列表属性:可以对ol或ul标签进行修饰:
          list-style-type:采用css中默认的值
          list-style-image:使用图片作为列表的标志
          list-style-position:设置列表标志的位置是在列表里面还是外面
13. 鼠标样式:设置光标的显示方式:
          div{cursor: url("08.ico"),crosshair;}:如果图片存在的话,光标会显示为图片,如果光标不存在,就显示为图片后面的显示方式
               如果不定义后面的显示方式的话,那么即使定义了图片并且图片存在,也不会显示
14. 显示样式:
     <div></div>
     div{
     display:inline;//display的作用:可以将块标签换为行内标签,可以将行内标签换为块级标签,如果属性值为none的话,不会显示,
               而且不会占据网页位置
     visibility:hidden; 设置块隐藏或可见,这个属性设置隐藏,该块不可见,但是仍然在网页中占据位置

}
15. 浮动属性:
     float:可以设置为左浮,右浮或是不浮.
     position: 设置元素的位置,如果值为fixed,那么元素就会一直出现在相对于浏览器窗口的位置