CSS小结

CSS小结

2015年7月19日

16:13

CSS层叠样式表

      将网页中的样式分离出来，完全由CSS来控制

      增强了样式的复用性以及可扩展性

      格式

                         选择器{CSS属性名：属性值；属性名：属性值；….}

       CSS和HTNL相结合的四种方式

      1.每一个html标签都有一个style属性

      2.当页面有多个标签有相同样式时，可以进行复用

                      <style>   CSS代码   </style>

      3.当有多个页面中标签的样式相同时，还可以将样式单独封装成一个CSS文件

                    <style>

                             @importurl("1.css");

                     </style>

      4.通过html标签中的head标签中的link标签连接一个CSS文件

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

 

***技巧：可以将多个样式标签进行单独定义，并封装成css文件

                      eg：p.css        div.css

                     在一个CSS文件中使用CSS的import将多个标签文件导入

                     然后再html中，使用link标签导入总的CSS文件

     

  --------------------------------------------------------------------------------------------------------------------------

     选择器

                   样式要作用的标签容器

                   当样式分离后，html的作用在于用标签封装数据，让CSS加载到指定标签上    

    选择器的基本分类：

                     1.标签选择器：是html中的每一个标签名

                     2.类选择器：   是每一个标签的class属性。用  .  表示

                                                 只给CSS使用，可以对不同标签进行同样式设定

                     3.id选择器：    是每一个标签的id属性，要保证id的唯一性

                                                 id不仅被css所使用，也可以被javascript使用，用 # 表示

                     4.属性选择器：

                                                  (1).简单的属性选择器

                                                          eg:    [to]{}

                                            html中<pto="title">df<p>

                                                 (2).更具具体属性值选择

                                                  可以只选择有特定值的元素

                                                  eg： a[href="http://www.huaxiaolei.com"]{}

                                      这里只为a标签中href为www.huaxiao.com的设置样式

                                                 (3).属性和属性值必须完全匹配

                                                     eg：[to="title"]{}

                                                    html中<pto="title">df<p/>

                            <p   to="t">fds<p/>

                                          这里只有to属性值为title的才能加载到样式

                                                 (4).根据部分属性值

                                                        属性值只要包含了，就可以加载

                                                               选择器优先级：id>class>标签

       扩展选择器:

                     1.关联选择器：对标签中的的标签进行样式设定

                                                   选择器  选择器  …..{}

                                                    eg:    .z div{}
                     2.组合选择器：对多个选择器进行相同样式的设定，将多个选择器通过  ， 号隔开

                     3.伪元素选择器：是元素的一种状态

                                                     a:link :超链接被点前               a:visited：超链接点击后       

                                                    a:hover：鼠标在超链接上    a:active：点击时

                                                    定义顺序： l   v  h   a

                                             

        

     ------------------------------------------------------------------------------------------------------------------------------                                               

      CSS滤镜：通过一些代码丰富了样式：   

      CSS背景

      css允许应用纯色作为背景，也可以使用背景图像创建复杂的效果

      (1)background-color:设置元素的背景颜色

      (2)background-image:把图片设置为背景

                             eg：background-image:url("图片名");

     (3)background-position:设置图片起始位置

                             eg：background-position:属性1  属性2;

                                    属性1表示当前图片所处在视图中的位置

                                    属性2right表示图片从哪里开始显示

                                    属性1和属性2也可以用具体数值 px，%

     (4)background-repeat:设置背景图片是否及如何重复

     (5)background-attachment:背景图片是否固定或随着其余部分滚动

                               属性： fixed默认效果图片固定不滚动

     (6)background-size:规定背景图片尺寸

                            eg：background-size:10px  10px ;

                                

 

CSS文本

     css属性可定义文本外观

    通过文本属性，可以改变文本的颜色，字符间距，对齐文本，装饰文本，对文本缩进

     (1)color：文本颜色（下一级标签可继承）

     (2)text-align:文本对齐方式（默认left）

     (3)text-indent:缩进文本首行

     (4)text-trans:元素中字幕的设置

                       属性：capitalize：每个单词的首字母大写

                                     lowercase：所有字母都小写

                                     uppercase：所有字母都大写

    (5)text-shadow:向文本添加阴影

                    text-shadow:  5px 5px  5px  #ff0000;

                   第一个5px：表示背景距左的距离(相对于原文字）

                   第二个5px：表示背景距上方的距离（相对于原文字）

                   第三个5px：表示阴影的像素，为0与原文字相同

  (6)text-wrap：规定文本换行规则

                     width:100px;

                      text-wrap:normal;

                    若文本内容是英文，不会拆开一个单词

    

CSS字体

  CSS字体属性定义文本的字体系列，大小，加粗，风格和变形

  (1)font-family:设置字体系列

  (2)font-size:设置字体大小

  (3)font-weight:设置字体的粗细

  (4)font-style:设置字体的风格

 

CSS链接

  (1)链接的四种状态

            a:link          :   普通的，未被访问的链接

            a:visited    :    用户已访问的链接

            a:hover      :   鼠标指针位于链接的上方

            a:action     :    链接被点击的时刻 

  (2)常见链接样式

          text-decoration:none；

              大多用于去掉链接中的下划线

 

CSS列表

   CSS列表允许放置，改变列表标志，或者将图像作为列表项标志

    (1)list-style-type:列表类型（圆点，数字……..)

    (2)list-style-image:列表像图片

                      eg：list-style-image:url("图片名")；

 

CSS表格

   (1)board:表格边框，边缘大小，边缘颜色

   (2)board-collapse:collapse合并边框（变单线）

   (3)background-color:表格背景颜色

   (4)padding:npx;内边距

 

CSS轮廓

     CSS轮廓主要用来突出元素的作用

     (1)outline-color:设置轮廓的颜色

     (2)outline-style:设置轮廓的样式：实线，虚线，双虚线，双实线......

     (3outline-width:设置轮廓的宽度

---------------------------------------------------------------------------------------------------------------------------------------------

CSS定位

  1.CSS定位

        改变元素在页面上的位置，SS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠

  2.CSS定位属性

     (1)position属性

                  static:静态布局，偏移量不起效果

                  realate:相对的，可改变偏移量，所占原空间仍保留

                                 由于原空间保留，所以偏移后的元素是在原来元素边框的基础上进行偏移的

                  absolute：绝对布局，可改变偏移量，所占空间不保留

                                      由于原空间不保留，所以偏移后的元素是在原元素的上一个元素边框进行偏移的

                  ***相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素

                  fixed：固定布局，可改变偏移量，固定在页面某个位置，背景不管怎么滚动都不动。

    (2)z-index属性

                  设置元素的堆叠顺序

                 几个模块叠加时，根据值的大小，将所取值较大的放在前面

   (3)top           :元素向上的偏移量

   (4)bottom    :元素向下的偏移量

   (5)left           :元素向左的偏移量

   (6)right         :元素向右的偏移量

CSS浮动

   1.浮动

      float可用属性值

         left：元素向左浮动

         right：元素向右浮动

         none：元素从不浮动

         inherit：从父既继承浮动属性

 2.clear属性

     去掉浮动属性(包括继承来的属性)

       clear属性值：

         left，right：去掉元素向左，向右浮动

         both：左右两侧均去掉浮动

         inherit：从父既继承来clear的值

---------------------------------------------------------------------------------------------------------------------------------------------

CSS常用操作

 

对齐

 1.margin

       进行水平对齐

        把左和右外边距设置为auto，,即均等地分配可用的外边距,,就是居中的元素

             eg：margin-left:auto;

                      margin-right:auto;

                    或margin：0px auto；

                     达到块元素居中

 2.position

         进行左右对齐

            eg：position:absolute;

                     right：0px；

                     达到元素向右

 3.float

          进行左右对齐

              eg：float：right；

尺寸的操作

1.height，width

2.line-height

             设置行高

              通过设置行高可以达到设置行间距的效果

3.max-height，min-height，max-width，min-width

             最长最短最高最低不能超过所设置值

分类操作

1.cursor

      规定当指向某元素之上时显示的指针类型

2.display

      设置元素如何显示以及是否显示

          eg：display：inline；设置元素都在一行

         可用作制作导航栏

3.visibility

       设置元素是否可见

         eg： visibility：hidden；设置元素不可见

                  visibility： visible；设置元素可见

                  

导航栏

      1.垂直导航栏

               display:block;

               text-align: center;

                list-style-type: none;//没有列表的点

      2.水平导航栏

              display:inline;

      3.导航栏效果

                一般用列表做模型，对不同状态的<a>标签进行不同属性值的设计

 

图片

1.边框

         border：1px  red；

2.宽，高

         height，width

3.float

4.外边距：margin     

5.透明度：opacity

             0-1选择数字，0完全透明，1完全不透明

------------------------------------------------------------------------------------------------------------------------------------------------

CSS3部分属性

         CSS3用于制作网页的样式也布局

         CSS3是css进化版，是最新版本的CSS

         CSS3部分属性有些浏览器是不支持的

       火狐：-mox-相应属性      IE：-ms-相应属性

         chrome/safari：-webkit-相应属性

         opera：-o-相应属性

        

CSS3边框

1.圆角边框

       border-radius:

2.边框阴影

        box-shadow：投影方式X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色

CSS3背景

1.背景图片属性

     background-size：length(px)/precent(%)/cover

                         length:设置背景的宽度和高度，第一个值宽度，第二个值高度

                         percent：以百分比设置背景宽度和高度

                         cover：背景图像扩大至足够大

2.background-origin

    规定背景图片定位区域：border-box , padding-box ,  content-box

             默认为：padding-box

3.多个背景图片

              background：url("图片名称"),url("图片名称"),  ……;

CSS3转换

  通过CSS3的转换，能够对元素进行移动，缩放，转动，拉长或拉伸

      可以使用2D或3D进行转换

 1.2D转换方法

      (1)translate：平移

                       transform:translate(x坐标偏移量，y坐标偏移量）

                       transform：translateX(n);

                       transform:    translateY(n);

      (2)rotate：旋转

                       transform:rotate(度数deg）；

                      允许负值：逆时针旋转

     (3)scale:缩放

                      transform：scale(x,y);

                     这里x代表x要缩放的倍数，y代表y要缩放的倍数

                      transform：scaleX(n);

           transform:  scaleY(n);

 

    (4)skew:倾斜

                     transform：skew(xdeg , ydeg);

                     transform：skewX(ndeg);

                     transform:    skewY(ndeg);

 2.3D转换

    (1)rotateX(ndeg0

                元素围绕其X 轴以给定的度数进行旋转

    (2)totateY(ndeg)

                 元素围绕其Y轴已给定的度数进行旋转    

CSS3过渡

    CSS3过渡是从一种样式逐渐改变到另一种效果

  1.transition:简写属性，用于在一个属性中设置四个过渡属性

              eg：transition：width  2s ease   2s；

  四个过渡属性：

        (1)transition-property:应用过度的属性名称

        (2)transition-duration:定义过渡效果花费的时间

        (3)transition-timing-function:规定过渡效果的时间曲线

                                                              不写默认是ease

        (4)transition-delay:规定过渡效果何时开始

                                           不写默认是0

CSS3动画

  *@keyframes规则用于创建动画，在@keyframes中规定某项CSS样式

     就能就能创建由当前样式逐渐改变为新样式的动画效果。

    规定至少以下两项CSS3动画属性，即可将动画绑定到选择器

        (1).规定动画名称

        (2).规定动画时长

   0%表示动画开始，100%表示动画完成

  1.@keyframes

          @keyframes规则动画内容，即写怎么变化

  2.所有动画属性

       (1).animation:所有动画属性的简写（不包括animation-play-state）

               eg：animation：myname  5s linear  2s  infinite alternate

       (2)animation-name：规定@keyframes的动画名称

       (3)animation-duration:规定动画完成一个周期所需的时间

       (4)animation-timing-function:规定动画的运行曲线，默认是ease

       (5)animation-delay:规定动画何时开始，默认为0

      (6)animation-iteration-count:规定播放的次数,默认为1，infinite为永久

      (7)animation-direction:规定是否在下一周期逆向播放，默认为normal

      (8)animation-play-state:规定动画是否正在运行或暂停，默认running

      (9)animation-fill-mode:规定对象动画时间之外的状态

     

CSS3多列

1.column-count

       规定元素应该被分割的列数

         eg：  column-count：3；

2.column-gap

       规定列之间的间隔

        eg：   column-gap：30px；

3.column-rule

      规定列之间的宽度，样式和颜色规则

        eg：   column-rule：3px，outset，red；(无顺序)

      是所有设置column-rule-的简写

        (1).column-rule-width

        (2).column-rule-style

        (3).column-rule-color

   

       需要注意的是，提到的每个属性都可以扩展，得出很多用法技巧

       更多的CSS/CSS3的属性需要在用到的时候去查阅API文档

--------------------------------------------------------------------

    通过学习了一段时间的前端基础发现，一门编程语言，基础的东西真的是很多的，作为一门初学者，个人感觉不必去计较每一个属性到底怎么用，对部分属性有一个大概的认识，知道什么时候能用到什么属性去做什么就够了，至于具体的实现，可以用到时查阅相应的资料，api，网络什么的。时间久了，用得多了，自然也就慢慢熟悉的多了。不拘于小节，放大了看，在实践的过程中再慢慢的实现细节，这样也许可以学的快一点。