CSS — 内部样式几种常用写法（类、id）

最新推荐文章于 2024-04-26 21:32:46 发布
最新推荐文章于 2024-04-26 21:32:46 发布
阅读量3.8k 收藏 7
点赞数 1
分类专栏： Web 文章标签： CSS Web 内部样式 类、id
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27494201/article/details/100804457
版权

效果图：
在这里插入图片描述

一丶类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.p1{
			color: red;
			size: 20px
		}
		.r1{
			color: red;
			size: 20px
		}
		.p2{
			color: red;
			size: 20px
		}
	
	</style>
</head>
<body>

	<h1>本周末任务计划</h1>
	<ul class="p1">
		<li>去书店买书</li>
		<li>去逛街，给爸爸妈妈买新衣服</li>
		<li>周六早上9点去见客户</li>
		<li>周日带着乐乐去去公园画画</li>
	</ul>

	<h1>老哥排行榜</h1>
	<ul class="r1">
		<li>海阔天空</li>
		<li>甜蜜蜜</li>
		<li>一路上有你</li>
		<li>我是一只小小鸟</li>
	</ul>

	<h1>友情链接</h1>
	<ul class="p2">
		<li>购书指南</li>
		<li>账户管理</li>
		<li>配送方式</li>
	</ul>


</body>
</html>

二丶 id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		#p1{
			color: red;
			size: 20px
		}

		#r1{
			color: #0DFC8B;
			size: 20px
		}
		#p2{
			color: #F806D8;
		}
	</style>
</head>
<body>

	<h1>本周末任务计划</h1>
	<ul id="p1">
		<li>去书店买书</li>
		<li>去逛街，给爸爸妈妈买新衣服</li>
		<li>周六早上9点去见客户</li>
		<li>周日带着乐乐去去公园画画</li>
	</ul>

	<h1>老哥排行榜</h1>
	<ul id="r1">
		<li>海阔天空</li>
		<li>甜蜜蜜</li>
		<li>一路上有你</li>
		<li>我是一只小小鸟</li>
	</ul>

	<h1>友情链接</h1>
	<ul id="p2">
		<li>购书指南</li>
		<li>账户管理</li>
		<li>配送方式</li>
	</ul>


</body>
</html>
王睿丶
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
唐伟俊自定义css样式
11-18
在CSS中，有几种常见的方法可以隐藏`div`元素： 1. **display**：设置`display: none;`可直接让元素消失，不占用任何空间。 2. **visibility**：设置`visibility: hidden;`元素依然占据原有空间，但内容不可见。 ...
jquery菜单手风琴_3种模式可以多组操作
12-26
总结起来，创建一个jQuery菜单手风琴涉及到HTML布局、CSS样式设计以及jQuery的事件监听和DOM操作。通过理解这三部分的结合，你可以根据需求调整和扩展手风琴菜单，使其适应各种应用场景。在实际项目中，你可能会遇到...
CSS3.0
weixin_44960905的博客
03-25 2632
CSS3 Cascading Style Sheet 层叠级联样式表 CSS：表现（美化网页） 发展史 CSS1.0 CSS2.0 DIV+CSS，html与css结构分离的思想 CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画 快速入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &lt
CSS基础_CSS样式的几种书写形式
weixin_41804367的博客
09-14 3000
1.内嵌式 将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> 2.内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下： <标签名 style="属性1:属性值1; 属性
CSS知识点（2）
最新发布
2303_76838876的博客
04-26 1150
CSS知识点（2）
css第一课：css内部样式
YY的博客
08-25 1800
css内部样式
CSS的书写方式
wei7a7a7a的博客
02-28 914
第三种：外部样式：因为这种方式真正做到了 元素页面和样式 分离。首先要创建一个css文件，css文件的后缀.css。
html中index.css里面写什么,css中z-index是什么意思？
weixin_31704137的博客
06-10 1235
css中z-index属性的意思：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。简单的说就是利用这个属性可以把一段文字置于一张图片之上，或者把图片置于文字之上，只要设置好合适的优先级就可以了。注释：元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效(例如 position:absolute;)！说明：该属性设置一个定位元素沿 z 轴的位置，...
css基础知识
08-17
例如，设置段落（p）的颜色为红色，可以有以下几种写法： ```css p { color: #ff0000; /* 十六进制表示 */ color: #f00; /* 缩写形式 */ color: rgb(255, 0, 0); /* RGB数值表示 */ color: rgb(100%, 0%, 0%); ...
css 跨浏览器实现float-center.docx
01-13
此外，还提到了一些相关的CSS知识点，如`javascript css styleFloat`、`javascript css float 属性的特别写法`、`CSS 中Float（浮动）相关技巧`、`javascript 下操作 css 的float 属性的特别写法`、`css position: ...
跟着Jquery API学Jquery之一 选择器
01-19
基本 我们知道jquery最常用的就是选择器了，我们看一下jqueryAPI中的 选择器—基本中有5种情况 class ,id ,element, *,还有一个多选择器，这里我们想一下css样式的写法 css样式也有几种情况：1.类样式 2.id样式 3....
CSS在网页上实现浮动层跟随滚动条特效(兼容IE6)
04-11
这种方式使用几个特殊的 CSS 来解决 IE6 下跟随滚动条移动的问题： 1. `position:absolute;` 让 IE6 相信 absolute 就是 fixed。 2. `body { margin:0; height:100%; overflow-y:auto; }` 整段代码演示： ```html...
02Spring笔记_07月6日1
08-08
这里提到了几种常见的选择器： - **ID选择器**：使用 `#` 符号，如 `#myID`，选择ID为`myID`的元素。 - **CLASS选择器**：使用 `.` 符号，如 `.myClass`，选择class为`myClass`的元素。 - **元素选择器**：直接...
省市县级联demo
09-19
2. CSS样式：可能使用CSS来美化这些下拉菜单，使其符合网页的整体设计。 3. JavaScript事件监听：通过`addEventListener`或`onchange`事件监听用户在省市县级联中的选择，触发相应的更新逻辑。 4. DOM操作：使用`...
jquery判断元素是否隐藏的多种方法
10-25
本文将详细介绍几种不同的方法来检查一个DOM元素在页面上是否处于隐藏状态。 首先，我们可以使用CSS属性`display`来判断。通过获取元素的`display`样式属性，并与字符串`none`进行比较，可以确定元素是否被隐藏。...
2021年最新版前端面试题精选
03-23
7. **清除浮动的几种方式** - `clear: both;`：在浮动元素之后添加一个元素，并设置此样式。 - 使用`clearfix`类：通过伪元素`::before`和`::after`清除浮动。 - 使用`display: flex`或`grid`布局，它们会自动...
html&CSS-----CSS介绍与样式书写
m0_73633088的博客
06-02 719
详细介绍HTML中CSS的写法样式（行内样式，外部样式，内部样式），进来看看吧！
2、HTML嵌入CSS样式（四种方法）
you can you up up up的博客
11-12 2909
CSS 样式代码必须保存在.css类型的文本文件中，或者放在网页内 <style> 标签中，或者插在网页标签的 style 属性值中。 CSS 样式应用的方法主要包括 4 种：行内样式、内嵌式、链接式以及导入样式 1. 行内样式 行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的style属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。 示例1：针对段落、<h2> 标签、<em> 标签、<strong&gt
纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标
随便写写
02-26 676
纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标
设置css样式的几种格式
04-30
常见的设置 CSS 样式的几种格式有： 1. 内部样式表：将样式代码放在 HTML 文档的 head 标签内，使用 style 标签定义样式。 ```html <!DOCTYPE html> <html> <head> <style> /* 样式代码 */ </style> </head> <body> <!-- 页面内容 --> </body> </html> ``` 2. 外部样式表：将样式代码放在一个独立的 .css 文件中，使用 link 标签链接到 HTML 文档中。 ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- 页面内容 --> </body> </html> ``` 3. 行内样式：直接在 HTML 元素内使用 style 属性设置样式。 ```html <!DOCTYPE html> <html> <body> <h1 style="color: red;">标题</h1> <!-- 页面内容 --> </body> </html> ``` 以上是常见的三种设置 CSS 样式的格式，选择哪种格式取决于具体场景和需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王睿丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值