初学HTML5－－CSS样式（二）

最新推荐文章于 2022-03-21 19:36:27 发布

Summer_shining

最新推荐文章于 2022-03-21 19:36:27 发布

阅读量377

点赞数 1

分类专栏： HTML5 文章标签： html5 CSS 选择器

本文链接：https://blog.csdn.net/Summer_shining/article/details/52155682

版权

HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

－CSS的两大重点：

1.属性：通过属性的复杂叠加才能做出漂亮的网页

2.选择器：通过选择器找到对应的标签设置样式

选择器的作用：选择对应的标签，为之添加样式

a.标签选择器：根据标签名找到标签

<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
<style>
        /* 标签选择器*/
        div{
            color: red;
        }
        p{
            color: blue;
        }
</style>
</head>
<body>
<span style="white-space:pre">	</span><div>我是div标签</div>
<span style="white-space:pre">	</span><p>我是段落标签</p>
</body>

b.类选择器

<head>
    <meta charset="UTF-8">
    <title>CSS的常见选择器</title>
 <style> /* 类选择器 */
        .test1{
            color: antiquewhite;
        }
</style>
</head>
<body> 
	<p class="test1">我是段落标签</p>
   	 <div class="test1">我是div标签</div>
</body>
c.id选择器

<head>
    <meta charset="UTF-8">
    <title>CSS的常见选择器</title>
 <style>
/* id选择器 */
<span style="white-space:pre">	</span>#main{
    font-size: 40px;
<span style="white-space:pre">	</span>}
</style>
</head>
<body>
      <div id="main">我是div标签</div>
</body>
d.并列选择器

<head>
    <meta charset="UTF-8">
    <title>CSS的常见选择器</title>
 <style>

 /* 并列选择器 */
        #main, .test1{
            border: 1px dashed pink;
        }
</style>
</head>
<body>
      <div id="main">我是div标签</div>
     <p class="test1">我是段落标签</p>
</body>
e.复合选择器

<head>
    <meta charset="UTF-8">
    <title>CSS的常见选择器</title>
 <style>

   /* 复合选择器 */
        p.test1{
            background-color: yellow;
        }
</style>
</head>
<body>
      <p>我是段落标签</p>
     <div class="test1">我是div标签</div>
</body>
f.后代选择器

<head>
    <meta charset="UTF-8">
    <title>CSS的常见选择器</title>
 <style>
        /* 后代选择器 */
        div a{
            color: blue;
        }
</style>
</head>
<body>
      <div class="test2">
        <p>
            我是段落标签
        </p>
        <span>
            我是span标签
        </span>
        <a href="#">我是超链接</a>
 </div>
</body>
g.直接后代选择器

<head>
    <meta charset="UTF-8">
    <title>CSS的常见选择器</title>
 <style>
     /* 直接后代选择器 */
        div>a{

            color:gray;
        }
</style>
</head>
<body>
       <div class="test2">
        <p>
            我是段落标签
        </p>
        <span>
            我是span标签
        </span>
        <a href="#">我是超链接</a>
        <div>
            <a href="#">我是二代超链接</a>
        </div>
    </div>
</body>
h.伪类

<head>
    <meta charset="UTF-8">
    <title>CSS的常见选择器</title>
 <style>
 /* 伪类 */
        input:focus{
            /* 去除外线条*/
            outline: none;
            /* 改变宽度和高度 */
            width: 500px;
            height: 50px;
            /* 改变文字的大小 */
            font-size: 20px;
        }
        /* 当鼠标移动到标签上 */
        div#main:hover{
            width: 300px;
            height: 200px;
            background-color: peachpuff;
        }
</style>
</head>
<body>
      <div id="main">我是div标签</div>
      <input placeholder="我是输入框">
</body>

－选择器的优先级别

css样式遵循的规律:
    1.相同类型的选择器遵循:a.就近原则 b. 叠加原则
    2.不同类型的选择器遵循:
      a.选择器的针对性越强,它的优先级就越高
      b.选择器的权值加到一起,大的优先,如果权值相同,后定义的优先
      c.import > 内联 > id > 类|伪类|属性选择|伪元素 > 标签 > 通配符 > 继承

<head>
<style>

        /* 复合选择器 */
        div.test1
        {/* 权值为:10 + 1 */
            color: aliceblue;
        }
        div#main
        {/* 权值为:100 + 1 */
            color: greenyellow;
        }
        /* id选择器 */
        #main{/* 权值为:100 */
            color: hotpink !important;
        }

        /*类选择器*/
        .test1{/* 权值为:10 */
            color: blue;
        }
        .test2{/* 权值为:10 */
            color: yellow;
        }
        /*标签选择器*/
        div{/* 权值为:1 */
            color: deeppink;
        }

        /*
        通配符:
        1.优先级别最低
        2.性能比较差
         */
        *{/* 权值为:0 */
            font-size: 30px;
        }

    </style>
</head>
<body>
    <div id="main" class="test1 test2">我是用来测试优先级别的</div>
</body>