CSS——基本选择器

【前言】

层叠样式表是一种用来表现HTML等文件样式的计算机语言
样式可以通过定义保存在外部.css文件中
提高工作效率
拥有对网页对象和模型样式编辑的能力
是一门样式表语言
选择器是让css作用于那些标签(查找要作用于标签的方法)

【基本选择器】

1.ID选择器

选择符是“#”
每个ID只对应一个元素，一个元素只对应一个ID

    <title>Title</title>
    <style>
        #p{
            color:red
        }
        #pa{
             background:red
        }
    </style>
</head>
<body>
    <p id="p">层叠样式表</p>
    <p id="pa">叠层样式表</p>
</body>

浏览器显示如下：

2.类选择器

设置字体颜色
类选择器可以被多种标签使用
以一个点号显示

    <style>
        .red{
                color:red
        }
    </style>
</head>
<body>
    <p class="red">层叠</p>
    <span class="red">样式</span>
    <div class="red">表</div>
</body>

浏览器显示如下：

3.标签选择器

<title>Document</title>
    <style type="text/css">
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱学习<span>前端</span>嘞</p>
</body>

浏览器显示如下：

【大小关系】

ID选择器>类选择器>标签选择器

 <link href="html.css" rel="stylesheet">
    <style type="text/css">
        p{
            color:red
        }
    </style>
</head>
<body>
    <p>暮然回首，那人却在灯火阑珊处</p>
</body>

外部css连接

#div{
    color:red
}
.div{
    color:pink
}div{
     color:greenyellow;
 }

浏览器显示如下：

4.层次选择器

空格：同级的相同
大于（>）：同上，空格换成>即可
加号（+）：最接近它的兄弟变为定义的颜色
波浪线（~）：表示兄弟们所有都为定义颜色

5.结构伪类选择器

6.属性选择器：

反三角（^）：属性以某个字母开始
（&）：以某个字母结尾

<title>Title</title>
    p[id$=c]{color:red}
<body>
    <p id=“pa”>aa</p>
     <p id=“pb”>aa</p>
     <p id=“pc”>aa</p>
     <p id=“pd”>aa</p>
     <div id=“pa”>aa</div>
</body>

浏览器显示如下：

乘等于（*）：包含某个字母 p[id*=c]{color:red}

7.表单选择器

8.字体选择器

font-style：：设置斜体字 p{font-style:italic:}
font-weight：设置字体线条的粗细 p{font-weight:bold;}
font-size：设置字体大小
font-family：设置使用何样字体

邓邓邓邓邓-

发布了25 篇原创文章 · 获赞 2 · 访问量 2268

私信关注

CSS——基本选择器

猜你喜欢