css-210130-01

css - 210130 - 01

  • 了解
  • 优先级
  • 优势
  • 基本选择器
  • 层级选择器
  • 结构伪类选择器
  • 属性选择器

CSS

​ Cascading Style Sheet 层叠/级联样式表

简单了解

<!--第一种方法	内部样式-->

<head>
    <meta charset="UTF-8">
    <title>css</title>

    <!--
        规范
        <style>,中编写css代码
        语法:
            选择器{
                声明1;
                声明2;
                声明3;
                ........
            }
    -->

    <style>
        h1{
            color: red;
        }
    </style>

</head>
<body>

<h1>白光一</h1>

</body>
<!--第二种方法		外部样式-->

<!------------------------------html文件--------------------------->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test04</title>

    <link rel="stylesheet" href="css/test04.css">
</head>
<body>

<h1>白光一</h1>

</body>
</html>


<!------------------------------CSS文件----------------------------->
h1{
    color: red;
}
<!--第三种			行内样式-->


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test05</title>
</head>
<body>
<h1 style="color: red">白光一</h1>
</body>
</html>
<!--第四种			导入式(css2.1中的)  已淘汰	-->



<!------------------------------html文件--------------------------->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test04</title>
	
    <style>
    	@import url("css/test04.css")
    </style>
</head>
<body>

<h1>白光一</h1>

</body>
</html>


<!------------------------------CSS文件----------------------------->
h1{
    color: red;
}

优先级

​ 就近原则 , 元素距离那个样式近,就是哪个

​ 不是-----> 行内样式 > 内部样式 > 外部样式

优势

  • ​ 内容,表现分离
  • ​ 网页结构表现统一,可以实现复用
  • ​ 样式丰富
  • ​ 利用SEO,容易被搜索引擎收录

基本选择器

​ 选择页面上的某一个或某一类元素

  • 标签选择器

    <!--
    	标签选择器,回选择到页面上所有的这个标签的元素
    -->
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标签选择器</title>
    
        <style type="text/css">
            h2{
                color: aqua;
                background: black;
                border-radius: 40px;
            }
    
            p{
                font-size: 60px;
            }
        </style>
    </head>
    <body>
    
    <h2>标签01</h2>
    <h2>标签02</h2>
    <h2>标签03</h2>
    
    <p>段落</p>
    
    </body>
    </html>
    
  • 类选择器

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>类选择器</title>
    
        <!--
            可复用,可跨标签
            语法格式:
                    .class的名称{}
        -->
    
        <style>
            .bq01{
                color: red;
            }
    
            .bq02{
                color: yellow;
            }
    
            .dl01{
                font-size: 50px;
            }
        </style>
    </head>
    <body>
    
    <h2 class="bq01">标签01</h2>
    <h2 class="bq02">标签02</h2>
    <h2 class="bq01">标签03</h2>
    
    <p class="dl01">段落01</p>
    <p class="bq02">段落02</p>
    <p class="dl01">段落03</p>
    
    
    </body>
    </html>
    
  • ID选择器

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ID选择器</title>
    
        <!--
            ID全局唯一
            语法:
                #ID名称{}
            不遵守就近原则:
                id选择器 >  类选择器  >  标签选择器
        -->
    
        <style>
            #bq04{
                color: red;
            }
    
            .bq01{
                color: yellow;
            }
    
            h2{
                color: green;
            }
        </style>
    </head>
    <body>
    <h2 class="bq01" id="bq04">标签01</h2>
    <h2 class="bq01">标签02</h2>
    <h2 class="bq01">标签03</h2>
    <h2>标签04</h2>
    <h2 id="bq05">标签05</h2>
    <h2>标签06</h2>
    </body>
    </html>
    

层级选择器

  • 后代选择器 在某一个元素后面 祖爷爷,爷爷,爸爸,自己

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>后代选择器</title>
    
        <style>
            body p{
                background: #e0c286;
            }
        </style>
    </head>
    <body>
    
    <p>段落01</p>
    <p>段落02</p>
    <p>段落03</p>
    <p>段落04</p>
    <p>段落05</p>
    <ul>
        <li><p>无序01</p></li>
        <li><p>无序02</p></li>
        <li><p>无序03</p></li>
        <li><p>无序04</p></li>
    </ul>
    <p>段落06</p>
    <p>段落07</p>
    
    </body>
    </html>
    
  • 子选择器 一代, 儿子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子选择器</title>
    
        <style>
            body>p{
                background: #e0c286;
            }
        </style>
    </head>
    <body>
    
    <p>段落01</p>
    <p>段落02</p>
    <p>段落03</p>
    <p>段落04</p>
    <p>段落05</p>
    <ul>
        <li><p>无序01</p></li>
        <li><p>无序02</p></li>
        <li><p>无序03</p></li>
        <li><p>无序04</p></li>
    </ul>
    <p>段落06</p>
    <p>段落07</p>
    
    </body>
    </html>
    
  • 相邻兄弟选择器 同辈(向下一个,不包括自己)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>相邻兄弟选择器</title>
    
        <style>
            .active + p{
                background: #e0c286;
            }
        </style>
    </head>
    <body>
    
    <p>段落01</p>
    <p class="active">段落02</p>
    <p>段落03</p>
    <p>段落04</p>
    <p>段落05</p>
    <ul>
        <li><p>无序01</p></li>
        <li><p>无序02</p></li>
        <li><p>无序03</p></li>
        <li><p>无序04</p></li>
    </ul>
    <p>段落06</p>
    <p>段落07</p>
    
    </body>
    </html>
    
  • 通用选择器 向下全部,不包括自己

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>通用选择器</title>
    
        <style>
            .active~p{
                background: #e0c286;
            }
        </style>
    </head>
    <body>
    
    <p>段落01</p>
    <p class="active">段落02</p>
    <p>段落03</p>
    <p>段落04</p>
    <p>段落05</p>
    <ul>
        <li><p>无序01</p></li>
        <li><p>无序02</p></li>
        <li><p>无序03</p></li>
        <li><p>无序04</p></li>
    </ul>
    <p>段落06</p>
    <p>段落07</p>
    
    </body>
    </html>
    

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>

    <!--
        伪类选择器就是,,带条件的css,,,也就是带冒号(:)的
    -->

    <style>
        /*选中ul的第一个子元素*/
        ul li:first-child{
            background: red;
        }

        /*选中ul的最后一个子元素*/
        ul li:last-child{
            background: green;
        }

        /*
            题目:选中 段落01
            这个意思是:选择当前p元素的父级元素(目前是body)的第二个元素,
            也就是按父级元素下的顺序来找(当前  “段落01”  位于父级元素body的第二位)
        */
        p:nth-child(2){
            background: #2626e7;
        }

        /*
            题目:选中 段落03
            这个意思是:选择当前p元素的父级元素(目前是body)的    p的第三个元素,
            也就是按父级元素下的类型的顺序来找(当前  “段落03”  位于p元素的第三)
        */
        p:nth-of-type(3){
            background: #131010;
        }

        a:hover{
            background: aqua;
        }
    </style>
</head>
<body>

<h5>标签1</h5>
<p>段落01</p>
<p class="active">段落02</p>
<p>段落03</p>
<p>段落04</p>
<p>段落05</p>
<ul>
    <li>无序01</li>
    <li>无序02</li>
    <li>无序03</li>
    <li>无序04</li>
</ul>
<p>段落06</p>
<p>段落07</p>
<a href="www.baidu.com">百度官网</a>

</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <!--
        属性名[属性值(这个值可以为正则表达式)]
        语法:
            属性名[]{}

        =       绝对等于
        *=      包含
        ^=      以...开头
        $=      以...结尾
    -->

    <style>
        .test14 a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: black;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }

        /*选中存在id属性的元素*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/


        /*选中id=first的元素*/
        /*a[id=first]{*/
        /*    background: #4e4e07;*/
        /*}*/

        /*选中  class有links  的元素*/
        /*a[class*="links"]{*/
        /*    background: yellow;*/
        /*}*/


        /*选中 href中以http开头  的元素*/
        /*a[href^="http"]{*/
        /*    background: yellow;*/
        /*}*/

        /*选中 doc结尾  的元素*/
        a[href$="doc"]{
            background: green;
        }
        /**/
        /**/
    </style>

</head>
<body>

<p class="test14">
    <a href="http://www.baidu.com" class="links item first" id="first">01</a>
    <a href="" class="links item active" target="_blank" title="test">02</a>
    <a href="image/a.html" class="">03</a>
    <a href="image/a.png" class="links item">04</a>
    <a href="image/a.jpg" class="links item">05</a>
    <a href="aaa" class="links item">06</a>
    <a href="/a.pdf" class="links item">07</a>
    <a href="/aaa.doc" class="links item">08</a>
    <a href="aaa.txt" class="links item">09</a>
    <a href="https.doc" class="links item last">10</a>
</p>

</body>
</html>

irst" id=“first”>01
02
03
04
05
06
07
08
09
10

```
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS-in-CSS是一种前端开发技术,也被称为CSS嵌套或CSS模块化。它的主要思想是将CSS样式定义在组件级别,使得样式与组件的逻辑和结构紧密关联,提高代码的可维护性和可重用性。 在传统的CSS开发中,样式是全局共享的,容易造成样式冲突和难以维护。而CSS-in-CSS通过将样式封装在组件内部,实现了样式的局部作用域。这样一来,每个组件都可以拥有自己独立的样式规则,不会相互干扰。 CSS-in-CSS有多种实现方式,其中比较常见的有以下几种: 1. CSS Modules:CSS Modules是一种使用Webpack等构建工具实现的CSS-in-CSS方案。它通过给每个CSS类名添加唯一的哈希值,实现了样式的局部作用域。在使用时,可以通过import语法引入CSS文件,并在组件中使用对应的类名。 2. CSS-in-JS:CSS-in-JS是一种将CSS样式直接写在JavaScript代码中的方式。它通过使用JavaScript对象来描述样式规则,并在运行时动态生成对应的CSS。常见的CSS-in-JS库有styled-components、Emotion等。 3. CSS Nesting:CSS Nesting是一种提案,旨在原生CSS中实现嵌套样式的语法。它使用类似于Sass的嵌套语法,可以更方便地描述组件内部的样式关系。目前,CSS Nesting还处于实验阶段,尚未得到所有浏览器的广泛支持。 总的来说,CSS-in-CSS是一种将CSS样式与组件紧密结合的开发方式,可以提高代码的可维护性和可重用性。不同的实现方式适用于不同的项目需求和开发环境。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值