CSS:伪类、样式表、多列

css用来定义html页内容表现格式,可以处理字体、色彩、背景、图文、布局等
特点:网页内容与表现格式相分离    一个选择器可以包含多个属性:值,之前用“;”分开
定义背景颜色、背景图像:
background-color:设置元素的背景颜色
{    
    background-image:把图像设置为背景
    background-image:url("图片地址")    
    background-repeat:设置背景图片是否及如何重复  默认值为 repeat
}
    no-repeat   图像不平铺
    repeat-x    图像在水平方向上平铺
    repeat-y    图像在垂直方向上平铺
    repeat      图像在水平、垂直方向上都平铺
background-position:right|left|top|bottom  设置背景图像的起始位置
background-attachment: 背景图像是否固定或者随着页面的其余部分滚动
css3背景:
    background-size: 款  高   规定背景图片的尺寸
    background-origin:规定背景图片的定位区域
    background-clip:规定背景的绘制区域

伪类#

伪类:
  主要用于超链接
  可以看做是一种特殊的类别选择符,它最大的用处就是可以对连接在不同状态下定义不同的演示效果
  系统超链接: 
     未点击时:蓝色+下划线,点击后:深紫色+下划线
  伪类可以根据连接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性,改变连接的默认效果
  因连接共4中状态,所以需要定义4个
  定义:
      a:link{     未访问的
              text-decoration:underline;
              color:red; 
             }
      a:visited{  }   被访问过的 
      a:hover{    }  悬停
      a:active{   }   鼠标点击时连接的样式
     注意:由于css优先级的关系(后面比前面的优先级高),在写a的css样式时,
          一定要按照a:link,a:visited,a:hover,a:actived的顺序书写

样式表###

样式表的应用方式:
  遵循最近原则,建议:不要同时使用三种样式
  内部样式表:css在<head>区定义
  外部样式表:css写在一个单独的css文件中           连接性质为样式表   css路径        
  使用:html文件<head>区+<link rel="stylesheet" href="mystyle.css(css文件)" type="text/css">
  行内样式表:样式规则使用频率不高,可以把样式定义在元素标签里,使用style属性进行定义。
  body{
    margin:0px;
  }
多列######
/*
     多列:
        css3中,可以创建多列来对文本或者区域进行布局
        属性:
        column-count:   列的数量
        column-gap:     每列间隔的距离
        column-rule:    每列间隔的线及线的颜色
*/
.div5{
    /*列的数量*/
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;

    /*每列间隔距离*/
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;

    /*每列间隔的线及线的颜色*/
    column-rule: 2px outset lightblue; 
   -webkit-column-rule: 2px outset lightblue;
    -moz-column-rule: 2px outset lightblue;}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容