CSS学习笔记2:CSS基础选择器

在Word文档中,如果想给标题加粗、标红、居中,我们首先需要选中标题,再更改Word最上方工具栏中相应的标签即可。相似的,CSS要想给页面添加绚丽多彩的样式,第一步就要选中需要改变的样式的内容,我们叫CSS选择器。CSS选择器种类很多,在上篇文章《CSS学习笔记1:初始CSS及其常见属性》 里所说的CSS基本语法中的使用的选择器,只是其中的一种——“标签选择器”。下面这两篇文章,咱们就聊聊CSS选择器的种类以及使用方法吧,有老师说,使用CSS选择器的水平是一个前端工程师整体水平的重要体现,很重要的哦~


1.标签选择器

就是用标签名来当做选择器。基本格式是:

标签名{
   color: red;  
}

1) 所有标签都能够当做选择器
2) 选择所有的相同标签,体现一种共性。

例:在一个网页上,希望所有的超链接都没有下划线,希望所有的段落字体都是绿色:

<head>
<style type=“text/css”>
a{
     /*去掉下划线:*/
     text-decoration: none; 
     }
p{  
     color: green;
     }
style>

2.id选择器

基本语法:

#id{  
     color: red;
     }

示例:

<head>
    <title>笑话一则title>
    <style type="text/css">
    #wuwu{
        font-weight: bold;
        color: purple;
        font-size: 40px;
    }
    style>    
head>
    <body>
        <h1 id="wuwu">年轻人要善于观察h1>
        <p>某教授在田间授课:科学研究要不怕脏p>
        <p>然后他蹲下来,用手指戳了一下地上的牛粪p>
        <p>然后把手指放到嘴里舔净p>
    body>

网页显示如图:

CSS学习笔记2:CSS基础选择器_第1张图片

注意:
1)任何的标签都可以有id,id的命名要以字母开头,可以有数字、下划线,严格区分大小写,也就是说mm和MM是两个不同的id。
2)同一个页面内的所有标签不能有相同的id。

3.类选择器

所谓的类,就是class属性,class属性和id非常相似,任何的标签都可以携带class属性。

基本格式:

.类名{
        color: red;
}

需要注意的是:
1) class可以重复,同一个页面上可以有多个标签同时属于某一个类;
2) 同一个类可以同时携带多个类名,用空格隔开。
3)每一个类要尽可能小,有“公共类”概念,这些类可以提供“公共服务”,任何一个标签一旦携带这个类名,就有相应的样式变化。
4)类上样式,id上行为。js要通过id属性得到标签添加动态效果,所以css层面尽可能的用class,除非极特殊的情况可以用id。

示例:

<html>
    <head>
        <title>笑话一则title>
        <style type="text/css">
            .wuwu{
                font-weight:bold;
            }
            .haha{
                color:purple;
            }
            .xixi{
                text-decoration:underline;
            }
        style>    
    head>
    <body>
        <h1 >年轻人要善于观察h1>
        <p class="haha xixi">某教授在田间授课:科学研究要不怕脏p>
        <p class="wuwu haha">然后他蹲下来,用手指戳了一下地上的牛粪p>
        <p class="xixi wuwu">然后把手指放到嘴里舔净p>
    body>
html>

网页效果如下:
CSS学习笔记2:CSS基础选择器_第2张图片

好啦,基础选择器的内容就到这,为了避免篇幅太长,CSS高级选择器的内容另写一篇博客。

你可能感兴趣的:(前端基础)