CSS基本内容

于 2024-10-10 21:03:42 发布
阅读量268 收藏 4
点赞数 9
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84309743/article/details/142830321
版权

一、CSS的定义

层叠样式表(Cascading Style Sheets)是给HTML标签添加样式的语言，可以设置HTML页面中文字大小、颜色以及元素的位置等样式。

二、CSS的意义

实现内容与样式分离，便于后期的维护以及样式的重复使用。

三、CSS的应用方式

1.行内式

  • 样式写在元素上的style属性中
  • 最有最高优先级

运行代码如下：

<h2 style="color: aqua; font-size: 30px;">
        测试css引用方式：行内式
</h2>

运行结果如下：

2.内嵌式

  • 与HTML的内容和结构标签分开来，内嵌在HTML文件中
  • 最有中等最低级

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌式</title>
    <style>
        h3{
            color:red ;
            font-size: 30px;
            font-family: 楷体;
        }
    </style>
</head>
<body>
    <h3>测试css引用方式：内嵌式</h3>
</body>
</html>

运行结果如下：

3.外链式

  • 通过HTML页面添加链接 <link> 标签的方式生效
  • 可被多个网页甚至整个网站所有网页运用
  • 具有中等优先级

（1）< link >标签

<link>标签必须放在页面的< head >...< /head >标签对内，语法格式为

<head>
    <link rel="stylesheet" href="外部样式表文件名.css" type="text/css">
</head>

注：CSS文件外链尽可能使用相对路径，以提高代码移植性 

首先新建文件 ”1.style.css“ （要规范命名，一般命名为 style 或 css）

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本内容</title>

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

    <h4>测试css引用方式：外链式</h4>

</body>
</html>

1.style.css 文件的运行代码如下：

h4{
    color: blue;
    font-size: 30px;
    font-family: 宋体;
}

运行结果如下：

4.优先级

CSS方式优先级：行内式、外链式、内嵌式 ，根据“后来居上”原则

（1）行内式：最高优先级

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本内容</title>

    <style>
        h2{
            color:red ;
            font-size: 30px;
            font-family: 楷体;
        }
    </style>

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

    <h2 style="color: aqua; font-size: 30px;">
        行内式：最高优先级
    </h2>


</body>
</html>

1.style.css 文件的运行代码如下：

h2{
    color: blue;
    font-size: 30px;
    font-family: 宋体;
}

运行结果如下：

结论：依旧是以行内式的属性优先

（2）外链式：中等优先级

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本内容</title>

    <style>
        h4{
            color:red ;
            font-size: 30px;
            font-family: 楷体;
        }
    </style>

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

    <h4>外链式：中等优先级</h4>

</body>
</html>

1.style.css 文件的运行代码如下：

h4{
    color: blue;
    font-size: 30px;
    font-family: 宋体;
}

运行结果如下：

结论：h4不受内嵌式控制，受外链式控制属性，所以外链式具有中等优先级，则内嵌式是最低优先级

EX_C
关注
web实验2 CSS基本语法.zip
06-27
实验内容：1.CSS的引入和基本选择器应用;2.利用CSS对网页进行控制；3.利用DIV+CSS实现如图2-3、2-4网页效果的布局和设计，并在多种浏览器上测试。所需图片见附件。4.利用DIV+CSS实现如图2-5网页效果，并在多种浏览器...
HTML + CSS 基本案例
08-22
在这个“HTML + CSS 基本案例”中，我们将探讨这两个关键技术的基础知识和应用。 HTML是网页内容的结构语言，它定义了网页上的各个元素，如标题、段落、链接、图像等。在`学成在线首页.html`这个文件中，我们可以...
CSS修改样式基本内容
weixin_64178950的博客
04-26 2100
CSS修改样式基本内容1 > 选择器1.1 > 伪元素选择器1.2 > 选择器优先级1.3 > 选择器总结2 > 字体样式3 > 文字属性4 > 背景属性5 > 边框6 > display属性7 > 盒子模型8 > 浮动(重要)9 > 解决浮动造成的影响 1 > 选择器 1.1 > 伪元素选择器    伪元素选择器的作用就是通过css来操作文本内容。具体操作代码如下：    1 > 修改首个字体样式 p
css的基本内容梳理
MoYuP_ENG的博客
02-23 1612
一、css基础 1、css简介：层叠样式表（美化网页，布局页面）也是一种标记语言 2、css语法规范：选择器 { 样式 } 属性和属性值之间用键值对形式出现 3、css样式格式：①紧凑型 ②展开型（建议用）样式大小写：一般用小写 空格规范：属性值前面，冒号后面，选择器和大括号之间，都要有空格 4、选择器的作用：选择标签 二、基础选择器： 1、标签选择器：html标签名作为选择器 格式：标签名 { 属性 } 优点：快速为页面中同类标签统一设置样式 缺点：不能差异化设置 2、类选择器：.类名{
CSS基本语法规则
qq_39162679的博客
07-06 6427
CSS写在style标签中，style标签一般写在head标签里面，title标签下面 ctrl+/ CSS注释快捷键 选择器 {css属性}内嵌式：CSS写在style标签中 提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中 作用：当前页面 外联式：CSS写在一个单独的.css文件中 作用：多个页面 提示：需要通过link标签在网页中引入 行内式：CSS写在标签的style属性中 写法：style="属性：属性值" ​ 作用：当前标签 ​ 提示：基础不推荐使用，之后会配合js使
CSS基本概念
YiLin_Classics的博客
03-08 1378
css基本概念css相关知识点css的基本语法css的引入行内样式表、内部样式表、外部样式表的优先级 css相关知识点 css的含义：层叠样式表（cascading（层叠）、style(样式) 、sheet(表格)） 目前来看遵循的是w3c css3.0版本相关规则 css的基本语法 选择器{ 属性：属性值； 属性：属性值； 属性：属性值； } 属性和属性值需要使用冒号链接 属性和属性值使用分号结束 基本语法分为两部分：选择器和样式规则。其中，选择器：查找页面元素的一种方法，{}：样式
CSS的基本样式
wangkai2580的博客
07-24 3137
常用的 CSS 基础样式
css基本介绍
y516369的博客
08-04 4594
css基本介绍
CSS的基本使用
weixin_63680062的博客
02-06 3473
CSS的基本使用一 1.CSS基本语法 CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一份CSS属性和属性值 选择器名 { 属性 ： 属性值； 属性 ： 属性值； ······ } div { background-color : red; } 注意： css声明以分号结束，声明用{}括起来 建议一行写一个属性 若值为若干单词，要把值用引号引起来，如：font-family:“agency fb”; 2. CSS的使用 2.1 行内式 ​ 行内样式将样式定义在
CSS基本知识点总结
qq_40046544的博客
07-29 9697
CSS指的是层叠样式表（CascadingStyleSheets）CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素CSS节省了大量工作。它可以同时控制多张网页布局。盒子的概念页面中的每一个标签都可以看做是一个盒子；通过盒子的视角，可以更方便的进行布局浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域，我们也形象称之为盒子盒子模型内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成。...
css3 基本语法
m0_61073617的博客
12-14 2539
使用W3C标准制作网页还有一个非常重要的作用，那就是可以实现网页内容和样式的分离，其中HTML负责组织内容结构，CSS负责表现样式。 CSS全称层叠样式表，又称风格样式表 CSS规则由两部分组成：选择器和声明 HTML引入CSS样式的方法有三种： 行内样式 注意：每条声明由一个属性和一个值组成，属性和值用冒号分开，每条语句以英文分号结尾。 <h1 style="color: red;">style属性的应用</h1> <p style="font-size: 14
CSS的基本用法
wzfi20042002的博客
01-24 2259
**CSS的基本用法 css样式 样式是css最小单元语法，每个样式包括两部分内容：选择器和声明。 选择器（Selector）：选择器告诉浏览器该样式将作用于页面中的哪些对象，这些对象可以是某个标签、所有网页对象、指定class或ID值等。浏览器在解析这个样式时，根据选择器来渲染对象显示效果。 声明（Declaration）：声明可以有一个或无数个，这些声明命令浏览器如何去渲染选择器指定的对象。声明必须包括两个部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。所有声
css:CSS基本练习模块
05-28
综上所述，这个CSS基础练习模块覆盖了从基本语法到实际布局的广泛内容，是学习和提高CSS技能的良好起点。通过实践这些知识点，你可以更好地理解和运用CSS，创造出更具吸引力和功能性的网页设计。
CSS基本选择器实用PPT课件.pptx
10-06
标记选择器是 CSS 中最基本的选择器，它可以定义几乎所有 HTML 标记中的内容样式。例如： p { font-family: " 宋体 "; } 3.2 类别选择器 类别选择器是 CSS 中另一种基本选择器，它可以定义一个类名，然后在页面...
常用的DIV+CSS的基本框架结构但不推荐都放一个div里
10-30
DIV+CSS基本框架结构详解 在 Web 开发中，DIV+CSS 是一种常见的前端开发技术，用于构建网站的基本框架结构。今天，我们将详细介绍 DIV+CSS 的基本框架结构，并探讨为什么不推荐将所有内容都放入一个 DIV 元素中。 ...
使用CSS实现酷炫加载
最新发布
qq_33003143的博客
10-03 953
使用CSS实现炫酷loading动画
前端学习第二天笔记 CSS选择 盒子模型 浮动 定位 CSS3新特性 动画 媒体查询 精灵图雪碧图 字体图标
samroom的博客
10-02 1633
CSS选择器，背景属性，文本属性，表格属性，关系选择器，CSS盒子模型，弹性盒子模型，文档流，浮动，清除浮动，相对定位，绝对定位，固定定位，CSS3新特性，动画，媒体查询，雪碧图精灵图，字体图标
CSS实现服务卡片
qq_33003143的博客
10-03 702
综合使用CSS知识实现卡片效果。
0基础学前端 day10--css预处理
无限大的博客
10-02 1323
CSS预处理器是一种独立于纯CSS之外的样式编写工具，提供了条件语句、变量、继承、函数等功能，可以更高效地编写、管理和维护CSS代码。通过这些特性，CSS预处理器能够提高代码的可扩展性和可维护性。@mixin：这是Sass的一部分，用于定义一个可重用的样式块。在这里，命名为。$radius：这是一个参数，用于接收调用Mixin时传入的值。在这个例子中，它表示圆角的半径。样式代码：该Mixin包含了三个属性，用于设置元素的圆角：: 针对Webkit引擎的浏览器（如Safari、Chrome）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值