CSS选择器——我要找到你

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18330808841/article/details/81353472

   什么是选择器,在Web开发中如果你要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。

   CSS选择器主要有: ID选择符>类选择器 >标签选择器

   下面我们一一介绍这几种选择器,问我用的是VS2107,在这样的开发环境下操作演示,建立一个Web项目,在建立一个HTML页和一个样式表,在添加中就能找到。

标签选择器:最直观

  用标签,来选择网页元素,可以能是最直观的方法了,如同根据家庭地址找人一样的自然。基本格式是:标签名 空格 后面是:用花括号{ }包起来的声明块。然后,将要设置的样式声明,以[属性名, 冒号:属性值]的方式写在声明块中,每个样式之间用分号分隔,属性值不要加引号。这与HTML标签中的属性值是不一样的。标签选择符在实际工作中很少单独使用,与其他类型的选择符,组合在一起已达到精确定位元素的目的。

HTML页的代码如下,完整版,接下的选择器将简写。

<!DOCTYPE html>
<!--
    创建人:高占路
-->
<html>
<head>
    <meta charset="utf-8" />
    <title>css测试</title>     <!--打开网页显示标题的名称-->>
    <link href="CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />  <!--链接css的样式代码-->>
</head>
<body>

    <h1>标签选择器测试</h1>
    <h1>永远用事实说话</h1>
    <br />               <!--分隔符 -->
    <div>测试</div>      <!--<div> </div>  块级标签 -->
    <br />
    <div>博客总结</div>
</body>
</html>

样式表代码

/*
 * 创建人:高占路
 * CSS选择器:Id选择器>类选择器 >HTML标签选择器 
 */
body {                         /*整体的设置*/
    color:#f00;                /*全部红色颜色*/
}   

h1{
     color:forestgreen;   /*设置文本颜色为绿色*/
     font-size :36px;     /*设置文本字体大小为36px*/
 }             

id选择器:用情专一的好男人

   id选择器 用id选择符选择的元素,必须在当前页面中,是唯一的,打开HTML页,我们看到两个标题文本,第一个标题中的文本是:标签选择器测试,第二标题中的文本是:永远用事实说话。 我们的目标是把:永远用事实说话 设置成蓝色。打开CSS样式表,标签选择器试下,会选中所以的h1文字就都成蓝色了。这时我们给第二个h1,添加一个id属性 id=”blue”,然后咋css样式表中写如下css样式表,这时你就会发现只有第二个文本变成了蓝色。这就说明我们选到了页面中,id等于blue的元素,并且是唯一得。
id选择符通常来设置网页中唯一的元素,如网页的头部,尾部,目标栏等,大多与布局元素配对使用。

HTML

<body>
    <h1>标签选择器测试</h1>
    <h1 id="blue">永远用事实说话</h1>
</body>

css样式表

#blue{
     color:#0094ff;   /*设置文本颜色为蓝色*/   
 }     

类选择器 给元素穿衣服

   俗话说:物以类聚,人与群分。网页中的元素也是一样的,在页面中,总有一些元素永远一样的外观,一样的大小,一样的边距等,完全可以将这些元素,划分到一类中,进行统一管理,简化样式设计。例如,有四个标签文本,我想让第一个,第三个字体36px,颜色为蓝色,这时我们就能用id选择器了,因为违反了一个页面中只能用唯一得一个元素,这时我们要用类选择器可以完美做到。如下代码

<body>
    <h1  class="circle">标签选择器测试</h1>
    <h1>永远用事实说话</h1>    
    <h1  class="circle">测试</h1>      
    <h1>博客总结</h1>
</body>
.circle{
     font-size :36px;     /*设置文本字体大小为36px*/
     color:#0094ff;   /*设置文本颜色为蓝色*/   
 }   

   今天总结这些东西,希望对大家有帮助!细微差别可以讨论。

展开阅读全文

没有更多推荐了,返回首页