你的位置:首页 > 网页设计

[网页设计]初探css3


属性选择器:
  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:<length><length><length>|| 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 虚拟窗口
  <meta name="viewport" content="width=device-width,initial-seale=1,user-scalable=0"/>
  参数:
    width 指定虚拟窗口的屏幕宽度大小。
    height 指定虚拟窗口的屏幕高度大小。
    initial-scale 指定初始缩放比例
    maximum-scale 指定允许用户缩放的最大比例
    minimum-scale 指定允许用户缩放的最小比例
    user-scalable 指定是否允许手动缩放。
    <link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)" href="样式地址"/>
        当屏幕宽度位于 600~900 时调用这个参数。
  在竖屏模式下
  <link rel="stylesheet" media="all and(orientation:portration)" href="样式地址"/>
  在横屏模式下
  <link rel="stylesheet" media="all and(orientation:landscape)" href="样式地址"/>
  @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);
  })