CSS 笔记六(Image/Attribute Selectors)
Image Opacity / Transparency
- The CSS
opacity
property is a part of the CSS3 recommendation.
Example
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
} img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Image Sprites
- An image sprite is a collection of images put into a single image.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
} #navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
} #navlist li, #navlist a {
height: 44px;
display: block;
} #home {
left: 0px;
width: 46px;
background: url('img_navsprites_hover.gif') 0 0;
} #prev {
left: 63px;
width: 43px;
background: url('img_navsprites_hover.gif') -47px 0;
} #next {
left: 129px;
width: 43px;
background: url('img_navsprites_hover.gif') -91px 0;
} #home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
} #prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
} #next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body> <ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul> </body>
</html>
CSS Attribute Selectors
- Style HTML elements that have specific attributes or attribute values.
1> CSS [attribute] Selector
- Used to select elements with a specified attribute.
2> CSS [attribute="value"] Selector
- Used to select elements with a specified attribute and value.
Example
a[target] {
background-color: yellow;
}
a[target="_blank"] {
background-color: blue;
}
3> CSS [attribute~="value"] Selector
- Used to select elements with an attribute value containing a specified word.
4> CSS [attribute*="value"] Selector
- Used to select elements whose attribute value contains a specified value.
[title~=flower] {
border: 5px solid yellow;
}
title="klematis flower" > yes
title="flower" > yes
title="tree_flower" > no [class*="te"] {
background: yellow;
}
class="first_test" > yes
class="mytest" > yes
5> CSS [attribute|="value"] Selector
- Used to select elements with the specified attribute starting with the specified value.
6> CSS [attribute^="value"] Selector
- Used to select elements whose attribute value begins with a specified value.
[class|=top] {
background: yellow;
}
class="top-header" > yes
class="top-text" > yes
class="topcontent" > no [class^="top"] {
background: yellow;
</style>
class="top-header" > yes
class="top-text" > yes
class="topcontent" > yes
7> CSS [attribute$="value"] Selector
- Used to select elements whose attribute value ends with a specified value.
[class$="test"] {
background: yellow;
}
class="first_test" > yes
class="my-test" > yes
CSS 笔记六(Image/Attribute Selectors)的更多相关文章
- (3)选择元素——(6)属性选择器(Attribute selectors)
Attribute selectors are a particularly helpful subset of CSS selectors. They allow us to specify an ...
- 《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9334121 作者:七十一雾央 新浪微博:http:/ ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)
java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...
- Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Python学习笔记六
Python课堂笔记六 常用模块已经可以在单位实际项目中使用,可以实现运维自动化.无需手工备份文件,数据库,拷贝,压缩. 常用模块 time模块 time.time time.localtime ti ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Django开发笔记六
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.登录功能完善 登录成功应该是重定向到首页,而不是转发 ...
- python3.4学习笔记(六) 常用快捷键使用技巧,持续更新
python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...
随机推荐
- [CareerCup] 18.12 Largest Sum Submatrix 和最大的子矩阵
18.12 Given an NxN matrix of positive and negative integers, write code to find the submatrix with t ...
- intellij idea 插件 ideaVim
像Eclipse一样,idea这个公认最好的javaIDE也有Vim插件. 安装方法 File>Settings>Plugins>Install JetBrains plugin.. ...
- bootstrap学习笔记之四(javascript插件)
下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入bootstrap.js后,通过添加data属性实现,另一种则是通过js代码是实现. 第一个插件:下拉菜单的实现 第一种方法:dat ...
- 移动端设备UA检测
网上找到的都不全,不是漏这个就是漏那个,有的甚至还把桌面的chrome判断为移动浏览器. 于是自己动手整理,这回算是比较全了.以后发现漏掉的立马加上. if(/AppleWebKit.*Mobile/ ...
- HTML DOM insertBefore() 方法 使用的时候发现一个问题,记录下
在W3C中是这样定义的 第二个参数是可先的,但是在谷歌浏览器和火狐浏览器中测试是会有bug的,第二个参数是必填的,否则会报错 感兴趣的可以测试 以下是我测试的结果: 谷歌浏览器:Uncaught ...
- 2_STL容器
STL算法的精髓在于 算法的 返回值!!! String: string是STL的字符串类型,通常用来表示字符串:C语言中一般用char* char*字符指针;string是类封装了char*,管 ...
- (转)MySQL优化实例
在Apache, PHP,MySQL的体系架构中,MySQL对于性能的影响最大,也是关键的核心部分.对于Discuz!论坛程序也是如此,MySQL的设置是否合理优化,直接影响到论坛的速度和承载量!同时 ...
- 解决:Could not parse response code.Server Reply: SSH-2.0-OpenSSH_5.3
[摘要:办理:org.apache.commons.net.MalformedServerReplyException: Could not parse response code.Server Re ...
- mongodb 安装后 出现警告:** WARNING: soft rlimits too low. Number of files is 256, should be at least 1000
警告问题:当前mongodb 支持的最大文件数有256个,但是推荐至少1024个. 解决办法: 1.关闭现在打开的mongodb 终端窗口 2.重新打开终端并运行一下命令: sudo launchct ...
- 使用 readfile() 下载文件
下载图片 <?php $file = 'monkey.gif'; if (file_exists($file)) { header('Content-Description: File Tran ...