3.12-3 html

css层叠样式

层叠样式

(1)定义:css是一种用来表现html或xml等文件样式的计算机语言。

(2)css 不仅可以静态的修饰网页,还可以配合各种动态对网页元素进行格式化;

(3)层叠样式表有两种方法:

第一种:在head中加上style属性

代码:

<style type="text/css">

p{

color: red;

}

</style>

案例:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>层叠样式</title>

<style type="text/css">

p{

color: red;

}

</style>

</head>

<body>

<p>1</p>

<p>2</p>

<p>3</p>

<em>a</em>

<i>i</i>

<h1>标题</h1>

</body>

</html>

第二种:通过外链方式

在css中新建一个css文件,在css文件中写内容

在使用link 通过外链方式实现

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>层叠样式</title>

<!--<style type="text/css">

p{

color: red;

}

</style>-->

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

</head>

<body>

<p>1</p>

<p>2</p>

<p>3</p>

<em>a</em>

<i>i</i>

<h1>标题</h1>

</body>

</html>

二、选择器

(1)id选择器 # id

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>层叠样式</title>

<style type="text/css">

#dcs{

color: red;

}

</style>

<!--<link rel="stylesheet" type="text/css" href="../css/渲染.css"/>-->

</head>

<body>

<p id=dcs>1</p>

<p>2</p>

<p>3</p>

<em id=dcs>a</em>

<i>i</i>

<h1>标题</h1>

</body>

</html>

(2)class选择器(.)

(3)标签选择器

比如:i 标签

(4)组合标签

(5)伪类选择器

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>层叠样式</title>

<style type="text/css">

p{

color: red;

}

p:hover{

color: blue;

cursor: pointer;

}

</style>

<!--<link rel="stylesheet" type="text/css" href="../css/渲染.css"/>-->

</head>

<body>

<p id=dcs>1</p>

<p class=a>2</p>

<p>3</p>

<em id=dcs>a</em>

<i>i</i>

<h1>标题</h1>

</body>

</html>

三、层叠样式中的内容可以多样化

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>层叠样式</title>

<style type="text/css">

p{

color: red;

font-size: 50px;

font-family: "微软雅黑" ;

font-style: italic;

font-weight: bold;

text-align: center;

cursor: pointer;

text-decoration: underline;

}

</style>

<!--<link rel="stylesheet" type="text/css" href="../css/渲染.css"/>-->

</head>

<body>

<p id=dcs>1</p>

<p class=a>2</p>

<p>3</p>

<em id=dcs>a</em>

<i>i</i>

<h1>标题</h1>

</body>

</html>

相关推荐
东坡肘子4 分钟前
高温与奇怪的天象 | 肘子的 Swift 周报 #092
人工智能·swiftui·swift
JosieBook5 分钟前
【Java编程动手学】Java常用工具类
java·python·mysql
KaneLogger22 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
度假的小鱼24 分钟前
从 “人工编码“ 到 “AI 协同“:大模型如何重塑软件开发的效率与范式
人工智能
zm-v-159304339862 小时前
ArcGIS 水文分析升级:基于深度学习的流域洪水演进过程模拟
人工智能·深度学习·arcgis
拓端研究室3 小时前
视频讲解|核密度估计朴素贝叶斯:业务数据分类—从理论到实践
人工智能·分类·数据挖掘
灵智工坊LingzhiAI3 小时前
人体坐姿检测系统项目教程(YOLO11+PyTorch+可视化)
人工智能·pytorch·python
昨日之日20063 小时前
Video Background Remover V3版 - AI视频一键抠像/视频换背景 支持50系显卡 一键整合包下载
人工智能·音视频
SHIPKING3934 小时前
【机器学习&深度学习】什么是下游任务模型?
人工智能·深度学习·机器学习
子燕若水8 小时前
Unreal Engine 5中的AI知识
人工智能