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,那么元素就会一直出现在相对于浏览器窗口的位置