【前端web入门第三天】01 css定义和引入方式 四种标签选择器

简介: 本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。

文章目录:


1.css 定义

层叠样式表(Cascading Style Sheets,缩写为CSS),是一种样式表语言,用来描述HTML文档的呈现(美化内容)书写位置:title标签下方添加style 双标签,style标签里面书写CSS代码。

写在哪里?
head里,title下面

怎么写
先写style标签,里面写css代码,然后就是写选择器和css属性
选择器{属性名:属性值;}

代码模板样例:

<style>
        /* 选择器 */
        p{
    
    
            /* css属性,键值对的形式 */
            /* color:颜色; */
            color: darkorange;
            /* font-size: 像素大小; */
            font-size: 100px;
        }
 </style>
<body>
 <p>CSS首次学习</p>
</body>

效果如下:
image.png


2.css引入方式

  • 内部样式表:学习使用
    • CSS代码写在style标签里面
  • 外部样式表:开发使用

    • CSS代码写在单独的CSS文件中(.css)
    • 在HTML使用link标签引入

        <link rel="stylesheet" href="./my.css">
      

.css文件里面怎么写
直接写style里面的代码即可

rel写什么?
行内样式表

  • 行内样式:配合JavaScript使用
```html
<div style="color: red; font-size:20px;">这是div标签</div>
```

3.选择器

作用:查找标签,设置样式。

基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

s

3.1 标签选择器

标签选择器:使用标签名作为选择器→选中同名标签同名标签设置相同的样式

例如:p, h1 , div , a, img......

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

解释说明:

就是说我们设置了p为红色,下面所有需要红色的文字部分,我们都用p来设置

3.2 类选择器

如果我们需要有的是红色,有的是别的颜色,但是我们文字部分用的都是p标签怎么办?
使用类选择器.

作用:查找标签,差异化设置标签的显示效果。

步骤:

  • 定义类选择器→.类名
  • 使用类选择器→标签添加class="类名"

模板代码:

<style>
    <!--定义类选择器-->
    .red {
    color: red;}
</style>

<!--使用类选择器-->
<div class="red">这是div标签</ div>

完整代码举例说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器 */
       .red{
    
    
            color: rgb(255, 17, 0);
        }
    </style>
</head>
<body>
 <p>CSS首次学习</p>
 <p class="red" >CSS首次学习</p>
</body>
</html>

多个类选择器怎么同时使用?

  <style>
        /* 定义*/
       .red{
    
    
            color: rgb(255, 17, 0);
        }
        .size{
    
    
            font-size: 50px;
        }
    </style>

<body>
 <p class="red size" >CSS首次学习</p>
</body>

注意:

  • 类名自定义,不要用纯数字或中文,尽量用英文命名.
  • 一个类选择器可以供多个标签使用
  • 一个标签可以使用多个类名,类名之间用空格隔开

开发习惯:类名见名知意,多个单词可以用–连接,例如:news-hd


3.3 id选择器

作用:查找标签,差异化设置标签的显示效果。
场景:id选择器一般配合JavaScript使用,很少用来设置CSS样式

步骤:

  • 定义id选择器→#id名
  • 使用id选择器→标签添加id= "id名"
  <style>
        /* 定义 */
      #red {
    
    
        color: red;
      }
    </style>

 <p id="red">红色</p>

规则:
同一个id选择器在一个页面只能使用一次


3.4 通配符选择器

作用:查找页面所有标签,设置相同样式。
通配符选择器:*,不需要调用,浏览器自动查找页面所有标签,设置相同的样式

 *{
     color: red;
}

它会让所有的标签都变成红色.

在实际开发过程中的用处?
许多标签或者列表之类的各种各样的格式标签,中间的间距都是不同的,我们可以使用通配符选择器,刷新他们之间的间距为0,然后再统一更改

4. 画盒子

目标:使用合适的选择器画盒子
新属性
image.png

代码样例:

 <style>
       .red{
    
    
        width: 100px;
        height: 100px;
        background-color: brown;
       }

       .orange{
    
    
        width: 200px;
        height: 200px;
        background-color: orange;
       }
 </style>

<body>
 <div class="red">div1</div>
 <div class="orange">div1</div>
</body>

image.png

相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
58 3
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
24天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
24天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
27 5
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
20 3
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
114 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
41 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
37 3
下一篇
DataWorks