您的位置：首页 > Web前端 > CSS

学习HTML（十六）——CSS样式中的目标标签定位

2017-11-12 19:56 183 查看

在以往的介绍中，在CSS文件中的设置都是针对某一类标签的。这种设置应用在网页中是，只要是此类标签都要应用CSS文件中该类标签的设置。这其实是一种完全覆盖的定位。除了这种定位方式，CSS还提供了其他定位方式。 1）按嵌套关系定位如下所以的代码，如果我们想设置最里面的p标签红色，最外层的蓝色，在第一层的p为黄色，可以在css文件中按照标签的嵌套关系，从外到里一次把标签名称写下来，用空格隔开(看上去是用空格隔开的几个标签名称，其实越是靠前的标签标示它的嵌套层越靠近body标签)。然后在花括号中设置具体的属性值。CSS文件的设置如下： <body> <div> <div> <p>Hello CSS </p> </div> </div> <div> <p>Hello CSS </p> </div> <p>Hello CSS </p> </body> CSS文件设置： p { color:blue; } div p { color:orange; }
div div p { color:red; } 效果图：

注意，标签的嵌套关系分为两种：松散嵌套关系和严格嵌套关系。松散的嵌套关系是标签路径之间还可以夹杂其他标签。比如上面的例子中如果第一个div和它的子div之间还夹杂着一个其他标签，那这不影响div div p的嵌套关系。而严格的嵌套关系是指标签路径之间没有夹杂其他的标签，是严格的从左到右的嵌套关系，这种严格的嵌套关系还要用>号来来接，也就是div>div>p，这样松散的嵌套关系就不会应用这类样式设置。 2）通配符标签* 如果你有一些属性是想让所有的标签都设置指定的值。一种方式是在CSS文件中写出每个标签然后进行设置，另一种方式是采用通配符标签*，也就在CSS文件中建立一个标签名为*的设置。在花括号中设置需要的属性。这样所有的标签都会应用这些属性值。下面的代码和效果图。代码是在第一节的基础上添加的。 * { border:1px dashed #3a5fcd; }

3）class与id 除了按照上述介绍的按照通配符和嵌套关系来进行标签定位，我们还可以赋予标签id或者class名称的方式来进行标签定位。对于一个标签，我们可以设置它的class名称或者id值，比如<p class="tmp"></p>或者<p id="tmp"></p>。下面说一下这两者的区别。我们可以给多个相同的或者不同的标签设置相同的class值。这样相同的class值可以获取到相同的CSS文件的设置。在CSS文件中进行设置时，不需要填写标签名，而是一个点（.）后面跟着类名，例如.class的形式。下面是一个例子： html文件： <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Result</title> </head> <body> <h3 class="fancy">静夜思</h3> <p class="fancy">床前明月光</p> <p>疑是地上霜</p> <p class="settings1">举头望明月</p> <p class="settings2">低头思故乡</p> </body> </html> CSS文件： .fancy { font-family:cursive; color:#0000CD; } .settings1 { text-align:right; font-family:cursive; color:red; } .settings2 { text-align:left; font-family:serif; color:gray; } p { text-align:center; } 效果图：

与class可以多个标签使用相反，id值在网页代码中是唯一的，在一个网页的所有标签中，一个id值只对应一个标签。在CSS文件中进行设置时，不需要填写标签名，而是一个#后面跟着id值，例如#IDValue的形式。我们给出一个例子,代码就用上面的代码，只是把class改为id： html文件： <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Result</title> </head> <body> <h3 class="fancy">静夜思</h3> <p class="fancy">床前明月光</p> <p>疑是地上霜</p> <p class="settings1">举头望明月</p> <p class="settings2">低头思故乡</p> </body> </html> CSS文件： #fancy { font-family:cursive; color:#0000CD; } #settings1 { text-align:right; font-family:cursive; color:red; } #settings2 { text-align:left; font-family:serif; color:gray; } p { text-align:center; } 效果图：

特别注意: 比如下面的代码: <p>hello</p> <p id="tmp">hellp</p> CSS文件： p{background-color:yellow;color:red} #tmp{color:blue} 上面的两个p标签，其中一个有id，另外一个没有，css文件中的设置并不是简单的把#tmp替代p设置，而是替代p中重复的设置，也就是说在#tmp中的p采用的color是blue，而它的background-color属性是取的p中的设置。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航