首页 相关文章 CSS教程:详解CSS特定值

CSS教程:详解CSS特定值

以前我从来没有具体的谈到这个问题


最好的解释方法是用一个例子来说明那的特性引起了你的困惑或则没有按照预期的显示。然后我们将近距离的细看计算实际的值来选择最优的选择器。
这是一个简单的例子 无序的列表:
[ 查看全文 ]

2016-02-20 标签:
  • 标签:Web开发
    块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的...[ 查看全文 ]
  • 说起CSS3的新特性,就不得不提到 Media Queries 。本文比较详细,所以很多实际中用不到。所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过时的电视机等等。 而 Media Queries 的引入,其作用就是允许添加表达式用以确定媒...[ 查看全文 ]
  • 标签:Web开发
    块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,tabl...[ 查看全文 ]
  • 标签:Web开发
    最近几天仔细研究了一下vertical-align这个属性,结果让我大吃一惊,这个很资深的CSS标准竟然在各个浏览器里面的表现都各不相同。 vertical-align的值有点多,包括 baseline sub supper top text-top bottom text-bottom middle以及各种长度值(%,em,ex等等)。我先给大家看一个我觉得最夸张的值:bottom。代码如下: p {     font-size: 18px;     line-height: 36px;...[ 查看全文 ]
  • 标签:Web开发
    何时应当使用margin 需要在border外侧添加空白时。 空白处不需要背景(色)时。 上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。 何时应当时用padding 需要在border内测添加空白时。 空白处需要背景(色)时。 上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。 ...[ 查看全文 ]
  • 标签:Web开发
    Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user interface, paged media, and more. It explores in detail each individual CSS property and how it interacts with other properties,...[ 查看全文 ]
  • 标签:Web开发
    在很多的主题中都有不止一个CSS文件,这样主要是为了适应不同的浏览器,因为他们在对CSS解释上有些不同。 但有没有想过为某个页面单独使用一个CSS样式表? 首先打开header.php文件,找到如下代码: link rel="stylesheet" href="?php bloginfo('stylesheet_url'); ?" type="text/css" media="screen" / 比如要在某个分类页面使用单独的样式表,做如下修改: ?php if ( is_category('1...[ 查看全文 ]
  • 标签:Web开发
    CSS组合 你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。 比如,你有如下的代码: h2 { color: red; } .22333 { color: red; } .22333com { color: red; } 则你可以这样写: h2,.22333,.22333com { color: red; } 使用组合,你可以一次定义多个CSS,为你节省很多字节和时间。 CSS嵌套 CSS结构好的话,没有必要使用过多的类或者标识选择符。这是...[ 查看全文 ]
  • 标签:Web开发
    当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child+html {} * html {} 只对IE 7 *:first-child+html {} 只对IE 7 和现代浏览器 htmlbody {} 只对现代浏览器(非IE 7) html/**/body {} 最新的Opera 9以下版本 html:first-child {} Safari html[xmlns*="] body:last-child {} 要使用这些选择器,请在样式前写下这些...[ 查看全文 ]
  • 标签:Web开发
    CSS 盒模型 网页设计中的每个元素都是长方形的盒子。 盒子的尺寸是怎样精确计算的,请看下图: 如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。 这个图表很好地展示了作用于页面上任意盒子的数值。 注意以上两个例子中,margin 都是白色的。Margin 比较特别,它不会影响盒子本身的大小,但是它会 影响和盒子有关的其他内容,因此 ma...[ 查看全文 ]
  • 标签:Web开发
    前面一篇介绍了网页制作的CSS的作用 宣告CSS样式的语法如下: 選擇器{ 选择器{ 屬性:設定值; 属性:设定值; ... } 在一個選擇器(Selector) 中,可以設定的屬性數目沒有限制。在一个选择器(Selector)中,可以设定的属性数目没有限制。 選擇器主要有三種:型類(Type) 選擇器、Class 選擇器、和ID 選擇器。选择器主要有三种:型类(Type)选择器、Class选择器、和ID选择器。 型類選擇器是(X)HTM...[ 查看全文 ]
  • 一、 认识CSS CSS就是Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。 网页设计最初是用HTML标记来定义页面文档及格式,例如标题<h1、段落<p、表格<table、链接<a等,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版...[ 查看全文 ]
  • 标签:Web开发
    原文:http://wiki.github.com/stubbornella/oocss/faq(翻译时为Version 28) 翻译:ytzong 在OOCSS中怎么定义对象? 对象类似JAVA中的类,保持着OO的特征。 一个CSS对象由4部分组成: 可能是一个或多个DOM节点的HTML 由wrapper节点的class名开始的CSS样式声明 类似于背景图片和显示用的sprites组件以及 JavaScript行为,监听或者与对象关联的方法 这可能令人费解,因为每个CSS class不是其自身...[ 查看全文 ]
  • 标签:Web开发
    CSS样式 层叠顺序 当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。 正如以前所提及的,网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。 网页制作者应该小...[ 查看全文 ]
  • 标签:Web开发
    Conditional-CSS允许你针对单一浏览器或浏览器组写出有逻辑条件的可维护的特定的CSS声明。 使CSS针对特定的浏览器。 简化你对CSS文件的维护。 优化你的CSS。 解决CSS那些使人烦恼的小BUG。 自动扩展和引入@import声明。 它是免费和开源的! 毫无疑问,你会发现很多情况下,不同的浏览器需要不同的样式声明,针对这一点,Conditional-CSS可以让你在你的CSS声明中添加Internet Explorer内置式条件样式。...[ 查看全文 ]
  • 标签:Web开发
    nettuts带来的5个css书写技巧,简单翻译一下它的中心思想。 1. CSS Reset/重置 你也许需要先了解什么是css重置。然后怎么样写css重置呢。 你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset.不要使用* { margin: 0; padding: 0; } 。我个人很爱用,[ 查看全文 ]
  • 标签:Web开发
    为什么要初始化CSS?在webjx.com前面的文章中,我们讲过CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不近相同,所有开发时的第一件事可能就是如果把他们统一。 也许他们平时做页面时根本就没考虑过浏览器兼容的问题。其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。 初始化CSS的一个小实例: html, body, div, span, &nb...[ 查看全文 ]
  • 标签:Web开发
    让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了。 .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } *+html .e{ background-color:#000000;/*OP*/ *background-color:#0000FF;/*IE7*/ } * html .e{/*IE6*/ background-color:#00FFFF } 经FF2、OP9.21、...[ 查看全文 ]
  • 标签:Web开发
    一.选择符模式 模式/含义/内容描述 * 匹配任意元素。(通用选择器) E 匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器) E F 匹配元素 E 的任意后代元素 F 。(后代选择器) E F 匹配元素 E 的任意子元素 F 。(子选择器) E:first-child 当元素 E 是它的父元素中的第一个子元素时,匹配元素 E 。(:first-child 伪类) E:link E:visited 如果 E 是一个目标还没有访问过(:link)或者已经访问过(...[ 查看全文 ]
  • 标签:Web开发
    css可以处理16,777,216颜色,可以使用名字、rgb值或十六进制代码。 red红色 等同于 rgb(255,0,0) rgb(100%,0%,0%) #ff0000 #f00 有17个预先确定的颜色,它们是: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. transparent 也是一个正确的值。 rgb的三个值都是从0到255,0是最低级,255是最...[ 查看全文 ]
手机页面 收藏网站 回到头部