4.2 CSS选择器(4)——属性选择器(Attribute Selectors)

  1. 4.2 CSS选择器(1)――通配选择器、类型选择器与ID选择器
  2. 4.2 CSS选择器(2)――类选择器与包含选择器
  3. 4.2 CSS选择器(3)――子元素选择器和相邻兄弟选择器
  4. 4.2 CSS选择器(4)——属性选择器(Attribute Selectors)

4.2.8 属性选择器(Attribute Selectors)

顾名思义,属性选择器可以根据某个属性是否存在或属性的值来匹配元素。因此能够实现一些比较复杂的匹配。
属性选择器有四种匹配方式,各有特色。

…阅读全文…

4.2 CSS选择器(2)――类选择器与包含选择器

  1. 4.2 CSS选择器(1)――通配选择器、类型选择器与ID选择器
  2. 4.2 CSS选择器(2)――类选择器与包含选择器
  3. 4.2 CSS选择器(3)――子元素选择器和相邻兄弟选择器
  4. 4.2 CSS选择器(4)——属性选择器(Attribute Selectors)

4.2.4 类选择器(Class Selectors)

图4-4 类选择器

类选择器的定义如图4-4所示。

类选择器和ID选择器很像,是通过为(X)HTML元素添加class属性而生效的,可应用在<body>内的任何元素上,不过类选择器是可重复的。例如:

…阅读全文…

发现与解决问题

今天很郁闷,本来以为马上就能完稿了,结果被编辑打击了一番,说书里面的图不够吸引人,实例不够多不够漂亮,没有发挥彩书的特点等等,让我从本来已经望见彼岸的兴奋一下跌入黑暗的深渊。这篇文,是书里面的一个小节,正好整理到这里,想起每天在群里面对的很多问题,于是觉得还是贴出来,帮助初学者能更好地入门。看来还要继续把舍弃的最后一章完成,苦难的日子啊,又要继续。

虽然浏览器可能存在着很多Bug,但是并不是与自己感觉不一样的时候就是出现了Bug。产生问题的原因可能有很多种,因此制作者需要一定的方法来排查问题。

…阅读全文…

文本水平对齐(text-align)

水平对齐(text-align),用以设定元素内文本的水平对齐方式。

1.语法

text-align具体参数如下:

text-align
语法:
text-align : left | right | center | justify
说明:
设定元素内文本的水平对齐方式。
参数:
left:
左对齐;
right:
右对齐;
center:
居中;
justify:
两端对齐。
初始值:
跟浏览器的设置有关
继承性:
可继承
适用于:
block元素

…阅读全文…

盒模型(BOX Model)

如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。

…阅读全文…

CSS中的定位(position)

使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。

其实,要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。

…阅读全文…