css选择器

css选择器

1.标签选择器

//t.html
<style type="text/css">
    body{
        bacckground-color:#ccc;
        text-align:center;
        font-size:12px;
     }
     h1{
         font:"黑体";font-size:20px;
}
     p{
         color:red;
         font-size:16px;
}
     hr{
         width:200px;
}
</style>
<body>
  <h1>标题</h1>
  <hr>
  <p>正文锻炼</p>
   版权所有
</body>

2.类别类型选择器(class类型)

.开头来定义

class属性来引用

.one

class="one"

//demo.html
<head>
<style type"text/css">
p{font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px;}
</style>
</head>
<body>
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="twp">类别2</p>
<p class="two">类别2</p>
<p>普通锻炼样式</p>
</body>

3.ID选择器

#开头来定义

id属性来引用

#one

id="one"

<style type="text/css">
#one{font-size:12px;}
#two{font-size；24px;}
</style>
​
<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>

class类型与id类型区别：

id类型有唯一性，在css中定义以后，在html中要被唯一的引用一次。

class类型可以多次被引用，作用于多个网页元素上面。

选择器的叠加用法

1.嵌套声明

将段落文字中的某一段文字 加样式

注意：p 与span 中间有空格

//demo2.html
<style type="txt/css">
p   span{//p 空格 span
    color:red;
}
<style>
​
<body>
<p><span>天使投资</span>是一种投资方式</p>
</body>

2.集体申明

h1,p：表示h1和p有同样的声明方式，都采用居中对齐。//逗号隔开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D</title>
    <style type="text/css">
        h1,p{text-align: center;}
        
    </style>
</head>
<body>
    <h1>欢迎访问论坛</h1>
    <p>欢迎访问论坛</p>
</body>
</html>

3.全局声明

*:声明

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>d</title>
    <style type="text/css" >
        *{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>欢迎访问论坛</h1>
    <p>欢迎访问论坛</p>
    <h2>欢迎访问论坛</h2>
</body>
</html>

4.混合

  • 多个class选择器混用，用空格分开

<div class="one yellow left".....</div>

  • id 和 class 混用

<div>
    id="my"class="one yellow left"
</div>

id 选择器不可哟多个同时使用

posted @ 2019-09-27 15:58  Evident  阅读(197)  评论(0)  编辑  收藏  举报