初探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);   })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

Vue动画之列表过渡

        首先我们定义一个列表循环的元素放在transition-group中

30920
来自专栏闻道于事

JavaScript对象之document对象

DOM对象之document对象 DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM ...

30870
来自专栏前端知识分享

第70天:jQuery基本选择器(一)

jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发

8510
来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

36040
来自专栏天天

面向对象编程(随机点名)

16020
来自专栏专业duilib使用+业余界面开发

duilib自绘

22130
来自专栏我就是马云飞

View的绘制流程源码分析

概述 View的绘制流程主要是指测量、布局以及绘制显示,在View中,measure是测量View的宽高,layout是控制View四个顶点的位置,而draw就...

20950
来自专栏用户2442861的专栏

css display table-cell

display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

33410
来自专栏个人随笔

jQuery 选择器

jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是j...

48490
来自专栏Java技术分享圈

杨老师课堂之JavaScript右下角广告弹框

10930

扫码关注云+社区

领取腾讯云代金券