css样式引入方式和选择器

最新推荐文章于 2023-12-07 16:19:39 发布

weixin_52907605

最新推荐文章于 2023-12-07 16:19:39 发布

阅读量145

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_52907605/article/details/117426921

版权

一、css样式引入方式

1.行内样式

通过标签的style属性给该标签设置样式：

<p style="color:red;background-color:yellow;">这是一个段落</p>

2.内嵌样式

通过选择器选择对应的标签后给该标签设置相应的样式，样式内容需要写在style标签内，一般习惯将style标签写在head标签内。

 <style>
      p{
            color:red;
            background-color:yellow;
        }
 </style>
<body>
    <p>这是一个段落</p>
</body>

3.外链样式

将css样式单独写到一个css文件中，在html中通过link标签引入样式文件，link的href属性值就是要引入的css文件的路径（可以是相对路径或者绝对路径）

 <link rel="stylesheet" href="test.css">
<body>
    <p>这是一个段落</p>
</body>

4.导入样式

也是将css样式单独写到一个css文件中，与外链样式的区别在与引入css文件的方式不同，导入样式通过在style标签中写入语句@import url()；括号内写css文件的路径的方式来引入css文件

  <style>
        @import url(test.css);
    </style>
<body>
    <p>这是一个段落</p>
</body>

总结：css样式的引入方式有四种,1.行内样式 2.内嵌样式 3.外链样式 4.导入样式四种引入方式的优先级：遵循就近原则（谁距离要添加样式的标签近，谁的优先级就高），一般来说由于行内样式就是卸载标签里面的，所以行内样式的优先级最高。

二.选择器

1.基本选择器

1.1 标签选择器（根据标签名获取）

<style>
        p{
            background-color: yellow;
            color:red;
        }
 </style>
<body>
    <p>这是一个段落</p>
</body>

1.2 id 选择器（根据 id 属性进行获取）

配合标签的id属性使用，使用格式：#id属性值

 <style>
        #info{
            background-color: yellow;
            color:red;
        }
    </style>
<body>
    <p id="info">这是一个段落</p>
</body>

1.3 类选择器（ class 属性进行获取）

需要在标签内添加class属性，类选择器的格式为：.类名

 <style>
        .info{
            background-color: yellow;
            color:red;
        }
   </style>
<body>
    <p class="info">这是一个段落</p>
</body>

1.4 通用选择器（通配符 * ）（不建议）

用于选中html文件中的所有标签（通常用于设置一些样式的初始化）

二.复合选择器（包含选择器）

2.1 后代选择器

语法格式：选中父标签的选择器选择子标签的选择器（中间是个空格）

作用：选择父标签的全部指定子标签（包含在该父标签中的所有指定标签都将被选中）

 <style>
       div span{
           background-color: yellow;
           color:red;
       }
 </style>
<body>
    <div>
        <p>
            <span>这是一个span</span>
        </p>
        <span>这是一个span</span>
    </div>
</body>

运行结果：

2.2 子代选择器：

语法格式：选中父标签的选择器>选择子标签的子选择器

作用：选择某个父标签的第一级指定子标签

 <style>
       div>span{
           background-color: yellow;
           color:red;
       }
 </style>
<body>
    <div>
          <p>
            <span>这是一个span</span>
        </p>
        <span>这是一个span</span>
    </div>
</body>

运行结果：

2.3 逗号选择器（也称并集选择器，分组选择器）

语法格式：选择器1，选择器2（用逗号隔开）

作用：将选择器1和选择器2选出的内容全部选中

三、属性选择器

语法格式：选择器[属性=值]

其中，选择器和值可以省略：

1.省略选择器和属性值： [属性]

选出所有写了该属性的标签，该属性的值不写也能被选出

<style>
    [type]{
			background-color: yellow;
		}
</style>
<body>
	<input type="" class="one">
	<input type="password">
	<input type="email">
	<div class="one">这是一个div</div>
</body>

运行结果：所有写了type属性的标签都被选中了，即使type="";

2.省略选择器：[属性="属性值"]

选出所有写了该属性并且等于该属性值的标签

<style>
    [class="one"]{
			background: blue;
		}
</style>
<body>
	<input type="text" class="one" >
	<input type="password" >
	<input type="email" >
	<div class="one">这是一个div</div>
</body>

运行结果：

3.省略属性值

选择器[属性]：选出该选择器选出的标签中写了该属性的标签

<style>
    input[type]{
			background: red;
		}
<style/>
<body>
	<input type="text" class="one" >
	<input type="password" >
	<input type="email" >
	<div class="one">这是一个div</div>
</body>

运行结果：

四、伪类选择器

同一个标签，不同的状态，有不同的样式，这就叫做"伪类"。伪类是使用冒号表示，如

:link -------- 链接点击之前

:visited ------- 链接被访问过后

:hover ------- ” 悬停 “ 鼠标放到标签上

:active ------ " 激活 " 鼠标点击标签但是不松手

:focus ------某个标签获得焦点时候的样式

冒号之前可以写任意选择器

所有伪类选择器：

weixin_52907605

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式引入方式和选择器

一、css样式引入方式1.行内样式通过标签的style属性给该标签设置样式：<p style="color:red;background-color:yellow;">这是一个段落</p>2.内嵌样式通过选择器选择对应的标签后给该标签设置相应的样式，样式内容需要写在style标签内，一般习惯将style标签写在head标签内。 <style> p{ color:red; backg
复制链接

扫一扫