CSS的样式2

一、文本修饰

text-decoration: none; 默认值，定义的标准文本 没有下划线

                          overline; 设置文本的上划线

ine-through;设置文本的删除线

                         underline; 设置文本的下划线

a元素是默认就含有下划线

二、垂直对齐

                                   ——（图片与文本）

 vertical-align:          middle  让图片后面的文字垂直对齐方式为居中

                                   top        让图片后面的文字垂直对齐方式为向上

           或者使用text-top也开始实现对齐方式为向上 和图片保持向上对齐

                                bottom;        让图片后面的文字垂直对齐方式为向下

            或者使用text-bottom也开始实现对齐方式为向下 和图片保持向下对齐

                                super;        可以让文字的垂直对齐方式更加的靠下       

 三、超链接伪类

1.      元素:hove              悬浮上去，移开就会消失

                         {

                           background:red;鼠标摸上p标签的时候显示红色的背景 离开样式就会消失

                           cursor: pointer;手的图标

                           cursor: all-scroll;十字箭头图标

                            } 
2.  标签:link           未单击访问时超链接样式

     理解：

     href属性里面的网络地址没有在你的浏览器访问过则会显示:link伪类的颜色

    地址跳转了但是没有访问成功，或者你的地址无效，也就意味永远不能访问，那么就会一直显示:link的样式

3.  元素:visited   单击访问后超链接样式

       visited写的样式会对href里面之前已经被访问过的网址生效

4   元素:active   点击未释放的，点上去，但是鼠标的键位并没有松开

   

 

     设置伪类的顺序：a:link->a:visited->a:hover->a:active 

▲伪类冒号前面不要加空格

四、列表样式

1.   list-style-type:     none;无标记符号

                              disc; 实心圆，默认类型

                               circle;空心圆

                               square;实心正方形 

                               decimal;  数字

         

2. list-style-image:

                              url()    可以使用自定义的小图片来作为标记符号

3.list-style-position: 

                                   inside;就是把标记符号包裹在里面

                                   outside;不会把标记符号包裹在里面，会出现在文字的外侧 默认值

          

 第二个无序列表会默认出现空心圆

 五、网页背景

1.背景颜色

background-color:

                             具体的英文颜色 red yellow

                          也可以写十六进制颜色   #cccccc简写为#ccc

                          也可以写rgb颜色 例如rgb(35,120,147)

                           也可以写rgba颜色rgba(35,120,147,.5)

                            transparent 透明色

 2.背景图像

background-image:

                                 url() 图片默认会铺满

 background-repeat:

                                 no-repeat;不平铺，即只显示一次

                                  repeat-x：只沿水平方向平铺

                                  repeat-y：只沿垂直方向平铺

                               repeat：沿水平和垂直两个方向平铺    默认使用

           

 六、背景定位

background-position:

                                   Xpx Ypx;  左上角是 0 0点  向下x的值会变大 向右y的值会变大            

                                             （ X表示水平位置，Y表示垂直位置 

                                                  两个值都是一样 不可以合二为一的写法 只能分开写

                                                  例：background-position:30px 30px; ）

                                    x%  y%;使用百分比表示背景的位置

                                   right bottom  右下

                                   left top     左上

水平方向的关键词： left、center、right 

 垂直方向的关键词：top、center、bottom

               两个方向的关键词都是center 可以合二为一的去写 直接写一个center 

                例：background-position: center; 

            x轴的位置属性 和y轴的位置属性 也可以分开写  

         例：  background-position-x: left;

                   background-position-y: bottom; 

           

 

  ★ 背景图和背景颜色是可以共存的

         这句话就体现了background是一个复合属性 

        除了x轴 和y轴的 其他的顺序都可以被改变

 七、扩展延伸

       CSS3切图

       css3之前图片的大小是靠美工来切图的 现在css3 有个属性可以修改背景图的大小 

  background-size    用来切图

                           两个值 第一个值表示背景图的宽度 第一个值表示背景图的高度 

                                        例  background-size: 100px 200px; 

                      也可以设置成百分比  

                                           背景图的宽度为div宽度的100%大小 高度也是div高度的100%大小

                      例  background-size: 100% 100%

background-size如果只写一个值 比如100% 那么表示的意思是

            背景图的宽度按照div宽度的100% 高度自动适应div 也就是auto 可以理解为等比例缩放

             background-size: 100%; = background-size: 100% auto;