Home  >  Article  >  Web Front-end  >  初探css3_html/css_WEB-ITnose

初探css3_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:32:23965browse

属性选择器:
  1.完全匹配的属性选择器。 就是完全匹配的字符串。
    [id=article]{
      color:red;
    }
  2.包含匹配选择器。包含有指定的字符串。
    语法是:[attribute*=value] attribute 指的属性名,value 指的是属性值, 包含采用“*=”符号。
      [id*=article]{
          color:red;
      }
  3.首字符匹配选择器。只要开头字符符合匹配。
    语法是:[attribute^=value] attribute 指的属性名,value 指的是属性值, 包含采用“^=”符号。
      [id^=article]{
          color:red;
      }
  4.尾字符匹配选择器。 只要匹配结尾的字符串。
    语法是:[attribute$=value] attribute 指的属性名,value 指的是属性值, 包含采用“$=”符号。
      [id$=article]{
          color:red;
      }


伪类选择器:
  1.before 伪类元素选择器,主要作用是在选择某个元素之前插入内容。
    语法:元素标签:before{
        content:"插入的内容"
       }
    p.before{
      content:"文字"
    }
  2.after 伪类元素选择器,主要作用是在选择某个元素之后插入内容。
      语法:元素标签:after{
          content:"插入的内容"
      }
      p.after{
        content:"文字"
      }
  3.first-child 指定元素列表中第一个元素的样式。
    li:first-child{
        color:red;
    }
  4.last-child 指定元素列表中第一个元素的样式。
    li:last-child{
        color:red;
    }
  5.nth-child 和 nth-last-child 可以指定某个元素的样式或从后数起某个元素的样式。
    //指定第2个li元素
      li:nth-child(2){}
    //指定倒数第2个li元素
      li:nth-last-child{}
    //指定偶数个li元素
      li:nth-child(even){}
    //指定基数个li元素
      li:nth-child(odd){}


阴影
  1.box-shadow 让元素具有阴影效果。
    语法: box-shadow:|| color;
      第一个 length 是阴影水平偏移值;
      第二个 length 是阴影垂直偏移值;
      第三个 length 是阴影模糊偏移值;
  水平和垂直 值可负。
  div{
    /*其他浏览器*/
      box-shadow:3px 4px 2px #000;
    /*webkit 浏览器*/
      -webkit-box-shadow:3px 4px 2px #000;
    /*firefox*/
      -moz-box-shadow:3px 4px 2px #000;
    }
  2.text-shadow 设置文本内容的阴影效果或模糊效果。
      语法:同box-shadow 相同。


背景
  1.background-size 用于设置背景图片的大小。
    语法:background-size:10px 5px;
        -webkit-background-size:10px 5px;
  2.background-clip 用于确定背景的裁剪区域。
  3.backrground-origin 用于指定background-position 属性的参考坐标起始位置。
    border 边框的左上角开始, content 内容区域 的左上角开始 padding 从padding区域开始。
  4.background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#000)); 背景渐变


圆角边框
  border-radius:
  border-radius:10px 5px;
  -moz-border-radius:10px 5px;
  -webkit-border-radius:10px 5px;
  或
  border-radius:10px 5px 10px 5px;
  -moz-border-radius:10px 5px 10px 5px;
  -webkit-border-radius:10px 5px 10px 5px;
  viewport 虚拟窗口
  
  参数:
    width 指定虚拟窗口的屏幕宽度大小。
    height 指定虚拟窗口的屏幕高度大小。
    initial-scale 指定初始缩放比例
    maximum-scale 指定允许用户缩放的最大比例
    minimum-scale 指定允许用户缩放的最小比例
    user-scalable 指定是否允许手动缩放。
    
        当屏幕宽度位于 600~900 时调用这个参数。
  在竖屏模式下
  
  在横屏模式下
  
  @media only screen and (min-width:213px) {}
    only 移动浏览器会自动忽略,
    不支持的浏览器会自动忽略这个样式。


Geolocation 地理定位。
  navigator.geolocation.getCurrentPosition(function(pos){
    console.log("当前地理位置的纬度"+pos.coords.latitude);
    console.log("当前地理位置的经度"+pos.coords.longitude);
    console.log("当前纬度的精度"+pos.coords.accuracy);
  })

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn