CSS的使用方式

最新推荐文章于 2024-08-24 06:11:04 发布
最新推荐文章于 2024-08-24 06:11:04 发布
阅读量210 收藏 1
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hello_zbs/article/details/106698264
版权

内联样式表

CSS代码和HTML代码放在同一个文件中
用法：借助标签中的style属性，在属性中设置样式

<!-- 内联样式 -->
  <p style="color: red;">p标签1</p>

内联样式表

CSS代码和HTML代码放在同一个文件中用法：借助网页中的style标签，在标签中设置样式，一般情况下style标签写在head标签的最后。

<!-- 内部样式 -->
  <style type="text/css">
   /* 把p标签的文本颜色改为红色 */
   p{
    color: red;
   }
  </style>

外部样式表

单独创建一个css文件

/* 需求：把所有div标签的文本颜色改成蓝色 */
div{	color: blue;}

用法：通过link标签引入到html当中

  <link rel="stylesheet" type="text/css" href="../css/Demo1.css">

rel：当前文件于引入文件之间的关系 层叠样式表
type：引入文件的类型
href：引入文件的地址

CSS的基础语法

h1：需要添加样式的元素
color：给元素添加什么样式
red：样式的值

选择器{
样式：样式值;
}

基本选择器

元素选择器用法：元素名
含义：选中网页中相同的元素

<!-- 给网页中span标签的文本颜色设置成绿色 -->
span{
	color: green;
}
<span>彼得，英国留学</span>

Id选择器用法：#id值
含义：选中网页中id为特定值的元素Id一般在使用的时候保证其唯一性，属性没有任何意义，帮助css/js选择元素

#myschool{
	color: red;
}
<div id="jqschool">玛丽，剑桥留学</div>

class选择器用法：.class值
含义：选中网页中class为某个特定值的元素class属性没有任何意义，帮助css/js选择元素

.school{
	color: #0000FF;
<div class="school">彼得，哈佛大留学</div>
}

子元素选择器用法：父元素 子元素 —> 选择器1 选择器2
含义：通过选择器1选择元素Q，选择器2在元素Q的子标签中再选择

.myp #myspan{
	color: red;
	<body>
  <p class="myp">
   <span id="myspan">6-30位字母、数字或“_”,字母开头</span>
  </p>
 </body>
}

群组选择器用法：选择器1,选择器2,选择器3
含义：只有元素被其中一个选择器选中那么就设置对应样式

#qqid,.intro,a{
	color: #00FFFF;
	<body>
  <div id="qqid">
   i am cxy
  </div>
  <span class="intro">
   shsxxt
  </span>
  <a href="">big data</a>
  <p>
   last p
  </p>
 </body>
}
<body>
  <div id="qqid">
   i am cxy
  </div>
  <span class="intro">
   shsxxt
  </span>
  <a href="">big data</a>
  <p>
   last p
  </p>
 </body>
好来污最佳男主角
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
多线程
Hello_zbs的博客
04-05 202
线程 线程和进程之间的区别: 进程:每一进程都有自己独立的代码和数据空间, 进程之间切换开销较大,一个进程包含1~n个线 程,进程是资源分配的最小单位 线程:同一类的线程共享代码和数据空间, 线程之间切换开销较小,线程是cpu调度的最小单位 线程和进程一样都分为5个阶段: 创建 就绪 运行 阻塞 终止 多进程: 操作系统能同时运行多个任务(程序) 多线程: 同一个程序中有多个顺序...
面向对象面
Hello_zbs的博客
06-29 327
向过程与面向对象的区别 面向过程：侧重点流程，从头到尾一气呵成，牵一发而动全身，重构复杂。流水线式。 面向对象：模块化(类)，抽离重复的部分。模块组合完成业务。上帝视角。 类和对象的区别 类：模板，模块，图纸。 对象：根据图纸构建出来的具体的事物。 类如何构建 属性 String brand;// 品牌 String color;// 颜色 int speed;// 速度 行为 public void run() { System.out.println("车会跑"); } 综合代码 package
Servlet
Hello_zbs的博客
09-04 565
Servlet的实现 Servlet 是 Server 与 Applet 的缩写，是服务端小程序的意思。使用 Java 语言编写的服务器端程序，可以像生成动态的 WEB 页，Servlet 主要运行在服务器端，并由服务器调用执行， 是一种按照 Servlet 标准来开发的类。 是 SUN 公司提供的一门用于开发动态 Web 资源的技术。（言外之意：要实现 web 开发，需要实现 Servlet 标准）Servlet 本质上也是 Java 类，但要遵循 Servlet 规范进行编写，没有 main()方法，它
CSS的使用
qq_52701502的博客
04-07 525
学习目标 1.掌握css常用选择器 2.掌握css常用属性 3.掌握css的显示模式 4.掌握css的盒子模型 5.掌握css的浮动 6.掌握css的定位 7.能够独立完成静态页面 第一章 CSS引入方式 什么是CSS？ 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表示HTML样式的前端技术 在html中引入css样式，有三种方式 内部样式 外部样式 行内式 1.1节 内部样式 内部样式也称内嵌式：是将CSS代码集中写在HTML文档的head头部标签中，并
CSS基本使用方法
qq_45782839的博客
11-27 1506
1.行内样式，引入style样式 2.内部样式表 在head标签里，统一改想改的标签 <style> h4 { color: aqua; } </style> 3.外部样式表:在css文件里写 需要一个连接<link href="style.css" type="text/css" rel="stylesheet"/> 4.css选择器是选择标签的 5.类选...
css使用方法大全（其一）
weixin_61855876的博客
07-22 238
css概述和语法、css的三种引用、基本选择器、四种组合选择符、属性选择器、CSS三大机制、文本和字体的详细介绍、盒子模型、position定位和背景图像的详细使用方法。
CSS中的四种引用方式
09-22
行内样式是最基础且简单的CSS使用方式之一，它通过在HTML标签中直接使用`style`属性来添加CSS样式。这种方式直接将样式信息写入到HTML元素的`style`属性中。 **示例：** ```html ;">这是一个红色文本。 ``` **优点...
react中使用css的7中方式(最全总结)
10-17
以下是在React中使用CSS的七种常见方式的详细说明： 1. 直接在JSX中使用内联样式 在React中，可以使用内联样式直接在JSX元素上添加样式。内联样式是通过一个名为style的JavaScript对象传递给元素，其中样式属性的...
CSS引入方式资料下载
01-11
本资料下载主要关注CSS的引入方式，这关乎到网页样式如何被浏览器正确解析和应用。下面将详细阐述CSS的几种引入方式。 一、内联样式 内联样式是最基础的CSS应用方式，通过在HTML元素的`style`属性中直接写入CSS代码...
CSS中使用expression表达式
09-25
CSS中的`expression`表达式是一种特定于Internet Explorer的特性，从IE5版本开始支持，它允许开发者使用JavaScript表达式来动态地计算和设置CSS属性。然而，由于其带来的性能问题和浏览器兼容性限制，`expression`...
基于vue中css预加载使用sass的配置方式详解
08-27
基于 Vue 中 CSS 预加载使用 SASS 的配置方式详解 作为一名 IT 行业大师，我将为大家详细解释基于 Vue 中 CSS 预加载使用 SASS 的配置方式。 什么是 SASS？ SASS（Syntactically Awesome StyleSheets）是一种 CSS...
CSS的简单使用
weixin_44702189的博客
10-25 1469
CSS概述 CSS是Cascading Style Sheets（级联样式表） CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分 CSS与HTML的关系 HTML是网页内容 CSS定义页面的样式 基本语法 基本语法-行内样式表 行内样式表,又有人称内联样式、行间样式、内嵌样式
CSS零基础快速入门（详细教程）
小杨的博客
05-20 6977
CSS是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言；CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；CSS还能够对网页中元素位置的排版进行像素级精确控制。
CSS的使用与方法
m0_58310590的博客
03-23 1196
CSS盒子模型是用来描述元素在页面布局中所占空间的模型。每个HTML元素被看作是一个矩形的盒子。这个盒子包括内容区域、内边距、边框和外边距四个部分。盒子模型并不仅仅是内容与边界的距离，而是包括了内容、内边距、边框和外边距，这些部分共同构成了一个元素在页面中所占据的空间。相对定位相对于标签原来的位置移动 relative绝对定位(常用)相对于已经定位过的父标签做移动，如果没有父标签那么就以body为父标签当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位。
CSS的详细介绍及使用
没有简介
05-05 1321
CSS的详细介绍及使用
CSS的基本使用
weixin_63680062的博客
02-06 3444
CSS的基本使用一 1.CSS基本语法 CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一份CSS属性和属性值 选择器名 { 属性 ： 属性值； 属性 ： 属性值； ······ } div { background-color : red; } 注意： css声明以分号结束，声明用{}括起来 建议一行写一个属性 若值为若干单词，要把值用引号引起来，如：font-family:“agency fb”; 2. CSS的使用 2.1 行内式 ​ 行内样式将样式定义在
CSS3 3D 转换
最新发布
lly202406的博客
08-24 298
CSS3 3D 转换是一种强大的技术，它允许开发者创建出令人印象深刻的3D视觉效果，而无需复杂的JavaScript或第三方库。通过使用CSS3的3D转换功能，设计师可以轻松地将元素旋转、倾斜、移动或缩放，以创建出深度和透视感。在本文中，我们将探讨CSS3 3D转换的基础知识，包括如何使用它们以及一些实际的应用示例。
insert-css使用方式
05-19
insert-css 是一个 JavaScript 库，用于将 CSS 样式表动态插入到 HTML 页面中。它可以用于在运行时添加样式，或者在不同设备上使用不同样式。 使用方法如下： 1. 首先下载 insert-css 库，可以从官方网站或者 npm 上下载。 2. 在 HTML 页面中引入 insert-css 库： ```html <script src="path/to/insert-css.js"></script> ``` 3. 使用 insert-css 函数将 CSS 样式表插入到页面中： ```js insertCss('body { background-color: #f0f0f0 }'); ``` 其中，insertCss 函数接受一个字符串参数，该参数是要插入的 CSS 样式表。 4. 可以使用 insert-css 库的其他功能，例如：指定插入的位置、使用回调函数等。具体可以参考官方文档。 ```js insertCss('body { background-color: #f0f0f0 }', { prepend: true, callback: function (err, css) { if (err) throw err; console.log('CSS inserted successfully'); } }); ``` 以上就是 insert-css 库的基本使用方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值