初探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);
})
初探css3的更多相关文章
- 用css动态实现圆环百分比分配——初探css3动画
最近的小程序项目有个设计图要求做一个圆环,两种颜色分配,分别代表可用金额和冻结金额.要是就直接这么显示,感觉好像挺没水平??于是我决定做个动态! 在mdn把新特性gradients(渐变).trans ...
- CSS3_边框 border 详解_一个 div 的阴阳图
(面试题) 怎么样通过 CSS 画一个三角形: 1. 元素的 width 和 height 设置为 0 2. 边框 足够大 3. 需要的三角形的部分, border-top-color 设置为 ...
- CSS3_文本样式
1. 文字阴影 text-shadow 使用: text-shadow: 水平方向偏移量 垂直方向偏移量 模糊程度 颜色; #box { text-shadow: 10px 1 ...
- 网页前端开发:微博CSS3适用细节初探
浏览器,作为一神器,帮我们打开了缤纷万千的网络世界窗口.而她发展到今天,也诞生了一个又一个的怀神版本,可能有人钟情于她的花哨,有人痴迷于她的速度……我们,作为重构工程师,必然要更关注他背后的技术革新, ...
- CSS3盒模型display初探(display:box/display:flex)
可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...
- css3之弹性盒模型初探(一)
什么是弹性盒模型? 弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小. 弹性盒模型的提出可以解决一些响应式布局的需求 如何使用弹性盒模型? ...
- css3属性之filter初探
filter属性是css不常用的一个属性,但是用好了可以给网页增色不少!ps: IE不支持此属性: img { -webkit-filter: grayscale(100%); /* Chrome, ...
- 第 23 章 CSS3 边框图片效果
学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 提 ...
- ReactNative学习实践--动画初探之加载动画
学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...
随机推荐
- 日期控件html
日期控件多的是,这里收录的是最简单的一种 <html> <head> <script type="text/javascript"> funct ...
- redis的有序集合(Sorted Sets)数据类型
和Sets相比,Sorted Sets增加了一个权重参数score,使得集合中的元素能够按score进行有序排列,比如一个存储全班同学成绩的Sorted Sets,其集合value可以是同学的学号,而 ...
- Baseball Game
You're now a baseball game point recorder. Given a list of strings, each string can be one of the 4 ...
- CSS基础语法与选择器
CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...
- ahp层次分析法软件
http://www.jz5u.com/Soft/trade/Other/58808.html 权重计算 归一化 本组当前数 - 本组最小 / 本组最大-本组最小 http://blog.csdn.n ...
- Android学习——AsyncTask的使用
AsyncTask是安卓自带的异步操作类,把异步操作简化并封装好,从而可以让开发者在子线程中更方便地更新UI. AsyncTask为一个抽象类,在继承AsyncTask时需要指定如下三个泛型参数:&l ...
- sql server 某列去重
例如:某个表中,插入了两条除id外其他字段都一样的数据,但是查询的时候只想查到一条. select * from 表名 where 主键 in ( select max(主键) from 表名 gro ...
- day013-流
1. 常用函数式接口 1.1 Predicate接口 有时候我们需要对某种的数据进行判断,从而得到一个boolean值结果.这时可以使用java.util.function.Predicate< ...
- 学习笔记-java 集合
背景: 看的是<java核心技术 第8版>,覆盖jdk1.6.主要是对集合全局和细节进行全面掌握,较深入的理解集合.本人对java比较熟悉,但是对于细节的理解不深,知识点还不全,这是知识的 ...
- Linux--DHCP搭建
服务功能:为局域网中的主机自动分配IP地址.子网掩码.广播地址.默认网关地址.DNS服务器地址 1.安装DHCP服务器软件 [root@localhost Packages]# rpm -ivh dh ...