级联样式
级联样式(Cascading Style Sheet)英文缩写即为CSS，主要作用于网页的风格设计或说网页的布局，可以设置字体大小、颜色、以及元素的位置等。
常用的级联样式有三种：外部级联、内部级联和内联。
外部样式，使用link连接外部CSS，如下在head标签中使用href(类似于iOS中的url)连接一个外部CSS样式。外部样式的好处时，可以复用此CSS样式。
HTML文件如下：
外部样式选择器
外部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体系图书
内部样式.png
内联样式，直接在标签后面使用Style设置，可以精准控制当前元素的外观表现，不需要CSS文件， 不需要选择器。
HTML内联样式
疯狂Java体系图书
/* 内联方式直接指定到了具体的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
如果觉得《html级联选择器 HTML5 学习--级联样式与CSS选择器》对你有帮助，请点赞、收藏，并留下你的观点哦！
