html级联选择器,HTML5 学习--级联样式与CSS选择器

级联样式

级联样式(Cascading Style Sheet)英文缩写即为CSS，主要作用于网页的风格设计或说网页的布局，可以设置字体大小、颜色、以及元素的位置等。

常用的级联样式有三种：外部级联、内部级联和内联。

外部样式，使用link连接外部CSS，如下在head标签中使用href(类似于iOS中的url)连接一个外部CSS样式。外部样式的好处时，可以复用此CSS样式。

HTML文件如下：

外部样式选择器

table的行内容

tr就是table每一行的内容,和iOS中不同,table的一个复用就有许多行,h5看起来是一行一行写进去的

不加css时就是空白的一行

外部CSS文件如下：

/* 通过table元素这个关键字作为选择器, 起到选择的作用。 是级联选择器的一种 */

table{

background-color: #003366;

width: 400px;

}

/* 关键字(或说元素)作为选择器, 起到查找定位的作用 */

/* 设置table每行的属性 */

td{

background-color: #ffffff;

font-size: 20pt;

text-shadow: -2px 2px 2px #333;

}

外部样式.png

内部级联样式，在head标签中使用Style标签直接设置整个页面的样式，当前页面生效，不需要CSS文件。

内部样式

// . + 类名title作为选择器，决定div这个元素有外观效果

.title{

font-size: 18px;

color: #60c;

height: 30px;

width: 200px;

border-top: 3px solid #cccccc;

border-left: 3px solid #cccccc;

border-bottom: 3px solid #000000;

border-right: 3px solid #000000;

}

table{

background-color: #003366;

}

td{

background-color: #ffffff;

font-size: 20pt;

}

疯狂Java体系图书

疯狂Java讲义	我并不会换行
疯狂Android讲义	经典Java EE企业应用实战
疯狂Ajax讲义	疯狂XML讲义

内部样式.png

内联样式，直接在标签后面使用Style设置，可以精准控制当前元素的外观表现，不需要CSS文件， 不需要选择器。

HTML内联样式

疯狂Java体系图书

经典Java EE企业应用实战

/* 内联方式直接指定到了具体的HTML元素,因此无需指定selector部分 */

内联样式.png

选择器Selector

选择器决定该样式定义对哪些元素起作用(类比iOS中的tag值，设置一个tag，然后通过tag去查找对应的控件，并修改该控件的属性)，常用的选择器有：

标签(类比于关键字，即系统定义的，非自定义的变量)， 如table这个系统的关键字就是一个标签选择器。作用是table这个元素对应的外观有效。

table{

background-color: #003366;

width: 400px;

}

. + 类名，使用. 加上元素class名作为选择器，设置Div这个元素外观效果

// . + 类名title作为选择器，决定div这个元素有外观效果

.title{

font-size: 18px;

color: #60c;

height: 30px;

width: 200px;

border-top: 3px solid #cccccc;

border-left: 3px solid #cccccc;

border-bottom: 3px solid #000000;

border-right: 3px solid #000000;

}

id 选择器， 使用#+id号作为选择器(xx为元素的id号)

ID选择器

/* 对所有Div元素都其作用的CSS样式 */

div {

width: 200px;

height: 30px;

background-color: #ddd;

padding: 3px;

}

/* 对id为xx的元素起作用的CSS样式 */

#xx{

border: 2px dotted black;

background-color: #900;

}

没有任何属性的Div元素

id属性值为30的Div元素

效果如下：

ID选择器.png

包含选择器， div元素下面查找包含属性a的元素，设置它的外观效果(类似于深层次查找某个元素，先找到父元素，再找子元素，最后找孙辈的元素....)。

包含选择器

/* 对所有的div元素起作用的CSS样式 */

div{

width: 350px;

height: 60px;

background-color: #dddddd;

/*设置两个div之间的间隔为5px,如果不设置两个div就挨在一起*/

margin: 5px;

}

/* 对处于div之内且类名为a的元素起作用的CSS样式 */

div .a{

width: 200px;

height: 35px;

border: 2px dotted black;

background-color: #888888;

}

没有任何属性的div元素

处于div内且class属性为a的元素

没有处于div内,但class属性为a的元素

效果如下：

包含选择器.png