CSS层叠样式表

最新推荐文章于 2024-01-09 20:49:39 发布

Hello World️

最新推荐文章于 2024-01-09 20:49:39 发布

阅读量506

点赞数

分类专栏：前端学习文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_51318597/article/details/126020884

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

- CSS层叠样式表

CSS层叠样式表

 CSS: 层叠样式表(英文全称：Cascading Style Sheets)
 
 作用
     1.实现了样式和html的代码分离
     2.弥补html对属性的的控制不足
     3.精确的控制页面的布局
     4.可以提高页面的执行效率
     5.css还有特殊的功能

CSS和HTML结合使用

<!-- 方式一
内联样式:就是把css代码写在HTML标签上面
-->
<span style="color: red;">内联样式</span>

<!-- 方式二
内部样式:要配合选择器 来控制一个或多个标签的展示样式 好处能提高CSS代码的复用性
选择器写在<head></head>中
<style>
    b{
    	color: red;
    }
</style>
-->
<b>内部样式</b>


<!-- 方式三
外联样式:就是把CSS代码单独抽取到一个css文件中 然后页面来引用
好处就是复用性更高 一次可以控制多个html页面的展示样式 开发首选

若css文件中引用了img文件中的图片 需要将图片路径写为(../img/xxx)
相对路径

h1{
	color: red;
}
<head>
	<link rel="stylesheet" href="css/w.css">
</head>
-->
<h1>外联样式</h1>

选择器

id选择器

<head>
    <style>
        #b1{
            color: red;
        }
        #b2{
            color: pink;
        }
    </style>
</head>

<body>
    <b id="b1">id选择器 一次只能选择一个标签进行控制</b>
    <b id="b2">标签的id值是唯一的 不能有重复的</b>
</body>

class选择器

<head>
    <style>
        .c{
            color: plum;
        }
    </style>
</head>

<body>
    <i class="c">类选择器</i>
    <i class="c">可以选择多个标签</i>
    <h1 class="c">层叠:多个样式 作用到一个标签 可以叠加生效</h1>
</body>

标签选择器

<head>
    <style>
        span{
            color: blue;
        }
    </style>
</head>

<body>
    <span>标签名选择器</span>
    <span>通过标签名来修改属性</span>
</body>

包含选择器

<head>
    <style>
        div div b{
            color:red;
        }
        #b1 div b{
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div id="b1">
        <div>
            <b>包含选择器</b>
        </div>
    </div>
</body>

通配符选择器

<head>
    <style>
        /* 全局通配 */
        *{
            color: aqua;
        }
        /* 局部通配 */
        #d *{
            font-size: 30px;
        }
    </style>
</head>

<body>
    <b>通配符选择器</b>
    <div id="d">
        <b>aaa</b>
        <b>aaa</b>
        <b>aaa</b>
    </div>
</body>

伪类选择器

<head>
    <style>
        /* 
        伪类选择器
        选择a标签的四种状态
        链接状态 link
        鼠标悬浮状态 hover
        鼠标按下状态 active
        链接访问过后状态 visited
        */
        a:link {
            color: yellowgreen;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: blue;
        }
        a:visited {
            color: pink;
        }
    </style>
</head>

<body>
    <a href="#">跳转</a>
</body>

选择器优先级

<head>
    <style>
        #idh{
            color: pink;
        }
        .classh{
            color: yellowgreen;
        }
        h1{
            color: blue !important;
        }
    </style>
</head>

<body>
    <h1 id="idh" class="classh" style="color: red;">
        !important>内联样式>id选择器>类选择器>标签名选择器
        优先级相等的选择器:
        类选择器=属性选择器=伪类选择器
        标签选择器=伪元素选择器
    </h1>
</body>

子选择器

<head>
    <style>
        #wai{
            width: 500px;
            height: 500px;
            background-color: yellowgreen;
        }
        /* 子选择器 > */
        #wai>div{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        /* 鼠标悬浮外层，控制内层 */
        #wai:hover>div{
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="wai">
        <div></div>
    </div>
</body>

相邻选择器

<head>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        /* 相邻选择器 */
        #d1+div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /* 相邻所有选择器 */
        #d1~div{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="d1"></div>
    <div></div>
    <div></div>
    <div></div>
</body>

属性选择器

<head>
    <style>
        /* 属性选择器 */
        h1[align]{
            background-color: pink;
        }
        h1[align="center"]{
            font-size: 50px;
        }
    </style>
</head>

<body>
    <h1 align="left">AAA</h1>
    <h1 align="center">BBB</h1>
    <h1 align="right">CCC</h1>
    <h1>DDD</h1>
</body>

其他伪类选择器

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 修改第一个字属性 */
        #p1::first-letter{
            font-size: 30px;
            color: red;
        }
        /* 修改第一行属性 */
        #p2::first-line{
            background-color: green;
        }
    </style>
</head>

<body>
    <p id="p1">aaaaabbbbbcccccdddddeeeee</p>
    <p id="p2">aaaaabbbbbcccccdddddeeeee</p>
</body>