CSS基础-2

已于 2023-07-15 10:24:07 修改
阅读量30 收藏
点赞数
文章标签： css 前端
于 2023-07-15 10:23:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zqm_1994/article/details/131735619
版权

一、CSS语法

       CSS 语法规则由两个主要的部分构成：选择器和一条或多条声明【具体样式设置】

      选择器通常是您需要改变样式的 HTML 元素。每条声明是由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

二、CSS选择器（常用）

1.元素选择器                  

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS元素选择器</title>

        <style>

            h1{

                font-size: 60px;

                color: blueviolet;

            }

        </style>

    </head>

    <body>

        <h1>元素选择器</h1>

        <h1>选择html中所有此类型的元素</h1>

        <h1>相同名称的元素会使用同一种样式</h1>

    </body>

</html>

2.class选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS class选择器</title>

        <style>

            .name{

                font-size: 60px;

                color: blueviolet;

            }

        </style>

    </head>

    <body>

        <h1>class选择器---根据元素的class属性选择html元素</h1>

        <h1>相同class属性的元素会使用同一种样式</h1>

        <p class="name">测试class选择器</p>

    </body>

</html>

3.id选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS id选择器</title>

        <style>

            #name{

                font-size: 60px;

                color: blueviolet;

            }

            #name1{

                font-size: 60px;

                color: red;

            }

        </style>

    </head>

    <body>

        <h1>id选择器---根据元素的id属性选择html元素</h1>

        <h1>相同id属性的元素会使用同一种样式</h1>

        <p id="name">测试id选择器</p>

        <p id="name">测试id选择器--id属性相同</p>

        <p id="name1">测试id选择器--id属性不相同</p>

    </body>

</html>

4.包含选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS包含选择器</title>

        <style>

            div p{

                font-size: 60px;

                color: blueviolet;

            }

        </style>

    </head>

    <body>

        <h1>包含选择器---选择父元素下的所有子元素</h1>

        <h2>style中包含选择器格式为，父元素名称 子元素名称</h2>

        <p>测试包含选择器----没有被包含</p>

        <div>

            <p>测试包含选择器--div中的子元素</p>

        </div>

    </body>

</html>

5.子元素选择器

只能选择到父元素的直接子元素

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS子元素选择器</title>

        <style>

            #div1>div>p{

                font-size: 60px;

                color: blueviolet;

            }

        </style>

    </head>

    <body>

        <h1>子元素选择器--得到指定父元素直接子元素</h1>

        <h2>元素选择器格式为，父元素名称>子元素名称</h2>

        <p>测试包含选择器----没有被包含</p>

        <div id="div1">

            <p>测试子元素选择器1--最外层div中的子元素</p>

            <div>

                <p>测试子元素包含选择器2---最内层div中的子元素</p>

            </div>

        </div>

    </body>

</html>

6.属性选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS属性选择器</title>

        <style>

            a[target]{

                font-size: 60px;

                color: blueviolet;

            }

        </style>

    </head>

    <body>

        <h1>属性选择器--根据html元素的设置的属性名称得到需要设置样式的html元素</h1>

        <h2>属性选择器格式为，元素名称[元素属性名称]</h2>

        <p>测试属性选择器-</p>

        <a href="https://www.baidu.com/" target="_self">测试属性选择器</a>

    </body>

</html>

Miz8
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端CSS基础-常规流练习.rar
04-09
本资源"前端CSS基础-常规流练习.rar"聚焦于一个核心概念：常规流布局，这是HTML页面中最基础的布局方式。理解并熟练掌握常规流布局对于任何前端开发者来说都是至关重要的。 常规流（Normal Flow）是CSS布局的基础，...
CSS基础-介绍及语法
11-22
CSS基础-介绍及语法，css入门必备资料
HTML-CSS结合-基础讲解2022优秀文档.ppt
11-14
HTML 和 CSS 是构建网页设计的基础，它们的结合使得开发者能够创建功能丰富且视觉美观的网页。下面我们将深入探讨这两个核心技术。 XHTML 部分： XHTML，即 Extensible Hypertext Markup Language，是 HTML 的一个...
HTML---CSS----基础知识及代码----各种小程序网页设计
04-09
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是前端开发中的基础核心技术，它们共同构建了网页的结构和样式。在这个“HTML---CSS----基础知识及代码----各种小程序网页设计”主题中，我们将...
html，css基础课程-guohanmei
09-05
2. CSS基础：选择器的使用、属性的设置、盒模型理解、浮动与定位、CSS层叠和优先级规则。 3. CSS进阶：CSS3的新特性，如媒体查询（实现响应式设计）、Flexbox（弹性盒布局）和Grid（网格布局）。 4. 实战项目：通过...
使用css如何获取最后一行的元素？使用css解决双边框问题
希文Gershwin
08-20 601
我只要知道最后一行中有哪几个元素，然后给最后一行的元素设置就行了但是只能获取到最后一个元素需要知道一排要有几个元素才行。
深入探索CSS的:unresolved伪类：选择未解析元素的神秘面纱
2401_85702623的博客
08-17 715
伪类是CSS的一个选择器，用于选择那些尚未解析的元素。在Web开发中，我们可能会遇到一些元素，它们依赖于外部资源或异步加载的内容，这些元素在加载过程中可能还没有完全解析。使用伪类，我们可以为这些元素定义特定的样式，直到它们完全解析并显示在页面上。
CSS——弹性盒（flex）
Fan_web的博客
08-16 1413
本文主要跟大家分享了弹性盒的内容，同时扩充了CSS中的部分知识：像素、视口、移动端、完美视口、vw单位以及适配、响应式布局中的媒体查询等等。下一节将开始分享关于JavaScript的初级学习内容。
CSS的:defined伪类：选择已定义元素的新选择器
2401_85743969的博客
08-17 640
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
CSS的文字阴影属性text-shadow
读心悦
08-17 269
CSS的属性用于在文本上添加阴影效果。这个属性可以接受一个或多个阴影，每个阴影由其在X轴和Y轴上的偏移量、模糊半径（可选）和颜色值来定义。你可以通过逗号分隔来指定多个阴影。
CSS的:definite和:indefinitte伪类：探索确定性与不确定性的元素选择
2401_85763803的博客
08-17 538
CSS（层叠样式表）是控制网页样式的核心技术，它允许开发者根据元素的特性来应用样式。CSS4提出了一些新的伪类选择器，其中就包括:definite和伪类。这些伪类基于元素的确定性或不确定性来选择元素，为开发者提供了一种创新的方式来处理基于上下文的样式需求。本文将详细介绍:definite和伪类的使用方式、应用场景以及如何通过它们增强网页的语义表达和视觉表现。
CSS方向选择的艺术：深入探索:horizontal和:vertical伪类
2401_85702623的博客
08-17 776
和:vertical伪类是CSS选择器，用于根据元素的书写模式（writing mode）来选择元素。选择器应用于书写模式为水平方向的元素，而:vertical选择器应用于书写模式为垂直方向的元素。
掌握CSS的:any-link伪类：统一链接样式的高效方法
2401_85339615的博客
08-17 675
any-link伪类是CSS3中引入的选择器，它匹配所有类型的链接元素，无论它们是未访问的还是已访问的。这个伪类是:link和:visited的通用形式，允许开发者编写一套样式规则，同时应用于这两种链接状态。
css 文字图片居中及网格布局
m0_69254007的博客
08-16 297
【代码】css 文字图片居中及网格布局。
深入探索CSS的:local-link伪类：选择指向同一文档的链接
2401_85743969的博客
08-17 571
CSS（层叠样式表）是控制网页样式的核心语言，它允许开发者根据元素的不同状态和特性来应用样式。伪类是CSS中一个相对较少被讨论的选择器，它专门用于选择那些指向同一文档内锚点的链接。本文将详细介绍伪类的使用方式、应用场景以及如何通过它们增强网页的交互性和视觉表现。
css中怎样使calc计算的高度生效？
最新发布
金木编程
08-20 179
在这两个示例中，calc() 函数都可以正常计算子元素的高度，并且该高度基于父元素的高度进行计算。第一种情况下，父元素的高度是固定的 500px，而第二种情况下，父元素的高度是视口高度的 50%。对于计算后的高度要生效，通常父元素需要具备一定的高度定义。2、百分比高度：如果父元素的高度是百分比，那么其父元素（祖先元素）也需要有固定高度或百分比高度，最终回溯到一个具有固定高度的元素。3、vh 单位：父元素可以使用 vh（视口高度单位）来设置高度，这样子元素的 calc() 计算也可以生效。
解决在移动端css使用100vh底部被遮盖的问题
我的米饭
08-20 228
移动端下，若使用100vh单位，那么高度不会是浏览器可视区域的高度，而是会高于可视区域，所以居底部的元素会被遮盖住：如果是chrome浏览器移动端APP的版本在127以上，则可以直接使用代替 vh 单位。如果127版本以下，那么就需要手动兼容了。
CSS的:in-range和:out-of-range伪类：增强输入字段范围验证的视觉反馈
2402_85758936的博客
08-17 571
in-range伪类选择器用于表示输入值在指定范围内的元素。相对的，伪类选择器用于表示输入值超出了指定范围的元素。这两个伪类可以与或具有日期和时间类型的元素一起使用。
css实现水滴效果图
yinge0508的博客
08-12 2121
【代码】css实现水滴效果图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值