CSS3学习内容与心得
今天2005年7月9号,博客这个东西还真不懂,以前吧我不认识它,它也不认识我。没辙,汤老要我们写,就写吧。
写什么好呢?那就写今天学习的css3的一些要点吧。
css这门课程几乎都学完了。而我觉得我还不错吗,还认识几个单词了,呵呵。基本格式也都会了。甚至能写几个小小的网页,当然,这些对于大神朋友们而言,小菜一碟。不过我是新手,给点鼓励吧。言归正传,正式上菜:
一、新增选择符:
E:first-child {属性:值 } 匹配父元素的第一个子元素E。
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
E:first-child选择符,E必须是它的兄弟元素中的第一个元素,换言之,E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child,只不过情况正好相反,需要它是最后一个子元素。
- E:only-child { 属性:值 } 匹配父元素仅有的一个子元素E。
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
- E:nth-child(n) { 属性:值 } 匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)
- E:first-of-type {属性:值} 匹配同类型中的第一个同级兄弟元素E。
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body
该选择符总是能命中父元素的第1个为E的子元素,不论第1个子元素是否为E
- E:focus { 属性:值} 设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。
二、背景
background-origin:<box> [ , <box> ]*
<box> = border-box | padding-box | content-box
对应的脚本特性为backgroundOrigin。
- padding-box:
- 从padding区域(含padding)开始显示背景图像。
- border-box:
- 从border区域(含border)开始显示背景图像。
- content-box:
- 从content区域开始显示背景图像。
-
<box> = border-box | padding-box | content-box | text
- padding-box:
- 从padding区域(不含padding)开始向外裁剪背景。
- border-box:
- 从border区域(不含border)开始向外裁剪背景。
- content-box:
- 从content区域开始向外裁剪背景。
- text:
- 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果 See with Webkit
-
background-size:<bg-size> [ , <bg-size> ]*检索或设置对象的背景图像的尺寸大小。
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
- 该属性提供2个参数值(特性值cover和contain除外)。
- 如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。
- 如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放。
- 对应的脚本特性为backgroundSize。
CSS3学习内容与心得的更多相关文章
- 从实例学习 Go 语言、"并发内容" 学习笔记及心得体会、Go指南
第一轮学习 golang "并发内容" 学习笔记,Go指南练习题目解析.使用学习资料 <Go-zh/tour tour>.记录我认为会比较容易忘记的知识点,进行补充,整 ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- 总结一下这几天学习django的心得
总结一下这几天学习django的心得 http://www.tuicool.com/articles/jMVB3e 时间 2014-01-12 11:40:11 CSDN博客 原文 http:// ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- HTML5 CSS3学习
HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍: http://www.html5cn.com.cn/news/gdt/2 ...
- STM32学习内容和计划
一.STM32学习内容(流程) 1.学习STM32开发流程 ①MDK使用.建立工程.调试等 ②库开发方法 2.学习STM32常用外设开发 ①GPIO ②中断 ③定时器 ④串口 ⑤CAN 3.学习STM ...
- u-boot代码学习内容
前言 u-boot代码庞大,不可能全部细读,只能有选择的读部分代码.在读代码之前,根据韦东山教材,关于代码学习内容和深度做以下预先划定. 一.Makefile.mkconfig.config.mk等 ...
- CSS3学习之圆角box-shadow,阴影border-radius
最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css expression有争议的地方,对png24图片的处理也是用滤镜,类似( ...
随机推荐
- Android学习笔记(十二)
Fragment是一种可以嵌入在活动当中的UI片段,它能让程序更加合理和充分地利用大屏幕的空间. 碎片的简单用法:新建一个FragmentTest项目,然后新建一个左侧碎片布局left_fragmen ...
- Struts2中Action由自己与由Spring管理的区别
struts2单独使用时action由struts2自己负责创建:与spring集成时,action实例由spring负责创建. 这导致在两种情况下struts.xml配置文件的略微差异. 假如: ...
- 第二周:If判断语句程序当中的作用简介
1.If语句的作用: 在我们编写程序时经常会遇到内容判断的问题,比如判断内容的真假或者值的大小分别输出内容的问题 这时就会用到我们的If判断语句了,顾名思义,if在英文单词中意思为如果,在Java中他 ...
- zz剖析为什么在多核多线程程序中要慎用volatile关键字?
[摘要]编译器保证volatile自己的读写有序,但由于optimization和多线程可以和非volatile读写interleave,也就是不原子,也就是没有用.C++11 supposed会支持 ...
- 开源项目大全 >> ...
http://www.isenhao.com/xueke/jisuanji/kaiyuan.php 监控系统-Nagios 网络流量监测图形分析工具-Cacti 分布式系统监视-zabbix 系统 ...
- Ubuntu12.04解决gedit中文乱码问题
Ubuntu12.04,终端中分别输入下面两条指令: gsettings set org.gnome.gedit.preferences.encodings auto-detected “['GB18 ...
- 规则引擎集成接口(八)Java接口实例
接口实例 右键点击“对象库” —“添加接口实例”,如下图: 弹出如下窗体: 输入接口的参数信息: 点击接口“求和”,选择选项卡“求和操作”,点击添加图标 ,如下: 弹出如下窗体,勾选方法“coun ...
- LVM原理及PV、VG、LV、PE、LE关系图
PV(physical volume):物理卷在逻辑卷管理系统最底层,可为整个物理硬盘或实际物理硬盘上的分区.VG(volume group):卷组建立在物理卷上,一卷组中至少要包括一物理卷,卷组建立 ...
- 前端开发根据url进行页面跳转控制以及实现菜单栏手风琴效果
html中的元素:<ul id="accordion" class="accordion"> <li class="licss&q ...
- MySQL 基础语句
MySQL 基础语句 多个知识点 ----------------------------------------------------------------------------------- ...