美文网首页
CSS:伪类、样式表、多列

CSS:伪类、样式表、多列

作者: 机器猫的百宝袋 | 来源:发表于2015-08-31 15:17 被阅读86次
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;}

相关文章

  • CSS:伪类、样式表、多列

    伪类# 样式表### 多列######

  • 伪元素和伪类

    一、伪类 1.1 定义 css伪类:css伪类用于向某些选择器添加特殊效果。 伪类其实与普通的css类相类似,可以...

  • css伪元素

    css 伪元素 详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结, 意在总结连贯...

  • css伪类(Pseudo-classes) & after be

    anchor伪类 Eg: 伪类和CSS类 伪类可以与 CSS 类配合使用: 在一个节点前后加节点

  • part2: CSS基础-练习

    CSS全称: cascading style sheets 谈谈css伪类与伪元素 这是我见过最全的伪类和伪元素总...

  • CSS伪类:first-child

    CSS 伪类用于向某些选择器添加特殊的效果。 CSS伪类的基础语法: 当然,CSS类也可以与伪类搭配使用: 在我第...

  • CSS

    伪类的语法: CSS 类也可与伪类搭配使用。 伪元素

  • css课程学习

    1.css伪类### 2.css3新增伪类### 3.伪元素### 4.定位### 绝对定位(absolute):...

  • 伪类和伪元素

    伪类:CSS 伪类用于向某些选择器添加特殊的效果。 伪元素:CSS 伪元素用于向某些选择器设置特殊效果。 1、伪类...

  • 伪元素&伪类

    css引入伪类和伪元素概念是为了格式化文档树以外的信息。 伪元素&伪类: css引入伪类和伪元素概念是为了格式化文...

网友评论

      本文标题:CSS:伪类、样式表、多列

      本文链接:https://www.haomeiwen.com/subject/zjtlcttx.html