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>

相关推荐
SHIPKING3931 小时前
【机器学习&深度学习】什么是下游任务模型?
人工智能·深度学习·机器学习
子燕若水5 小时前
Unreal Engine 5中的AI知识
人工智能
极限实验室6 小时前
Coco AI 实战(一):Coco Server Linux 平台部署
人工智能
杨过过儿6 小时前
【学习笔记】4.1 什么是 LLM
人工智能
巴伦是只猫6 小时前
【机器学习笔记Ⅰ】13 正则化代价函数
人工智能·笔记·机器学习
大千AI助手6 小时前
DTW模版匹配:弹性对齐的时间序列相似度度量算法
人工智能·算法·机器学习·数据挖掘·模版匹配·dtw模版匹配
AI生存日记6 小时前
百度文心大模型 4.5 系列全面开源 英特尔同步支持端侧部署
人工智能·百度·开源·open ai大模型
LCG元7 小时前
自动驾驶感知模块的多模态数据融合:时序同步与空间对齐的框架解析
人工智能·机器学习·自动驾驶
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端