【前端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

相关文章
|
5天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
8天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
12 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
8天前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
12 2
前端基础(九)_CSS的三大特征
|
5天前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
8天前
|
前端开发 开发者 Python
从零到一:Python Web框架中的模板引擎入门与进阶
在Web开发的广阔世界里,模板引擎是连接后端逻辑与前端展示的重要桥梁。对于Python Web开发者而言,掌握模板引擎的使用是从零到一构建动态网站或应用不可或缺的一步。本文将带你从基础入门到进阶应用,深入了解Python Web框架中的模板引擎。
14 3
|
6天前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
7天前
|
存储 前端开发 JavaScript
浅谈Web前端安全策略xss和csrf,及又该如何预防?
该文章详细讨论了Web前端安全中的XSS(跨站脚本攻击)和CSRF(跨站请求伪造)攻击原理及其防范措施,帮助读者了解如何保护Web应用程序免受这两种常见安全威胁的影响。
浅谈Web前端安全策略xss和csrf,及又该如何预防?
|
7天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
8天前
|
编解码 前端开发
前端基础(六)_CSS单位
本文介绍了CSS中常用的单位,包括像素(px)、相对长度单位(em、rem)、百分比(%)、视窗宽度(vw)和视窗高度(vh)。文章通过示例代码展示了这些单位在实际布局中的应用,解释了它们各自的特点和使用场景。例如,em和rem单位与字体大小相关,百分比单位与父元素的尺寸相关,而vw和vh单位则与浏览器视窗的宽度和高度相关。
10 1
|
8天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
31 1
下一篇
无影云桌面