CSS层叠样式表
CSS 是我们用来为 HTML 文档设置样式的语言。
CSS 描述了 HTML 元素应如何显示。
CS定义以及引用
CSS内部样式<style>标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS内部引用</title>
</head>
<body>
<style>
/* CSS 代码 */
/* 选择器 {CSS属性} */
/* 属性名和属性值成对出现 键值对 */
p {
/* 字体颜色 */
color: red;
/* 字体大小 */
font-size: 30px;
}
</style>
<p>
这是css文本内容,css自定义字体大小为30px和颜色红色！
</p>
</body>
</html>
查看如下
CSS外部样式
主文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 引入方式</title>
<!-- link 引入外部样式表 rel；关系，样式表 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>这是 p 标签</p>
<!-- 行内，style ="css 属性" -->
<div style="color: green;font-size: 30px;">这是 div标签</div>
</body>
</html>
link导入的文件(my.css)
/* 这个文件放css代码 */
/* 选择器 {CSS属性} */
p {
/* 字体颜色 */
color: red;
/* 字体大小 */
font-size: 30px;
}
查看如下
CSS选择器
作用：查找标签，设置样式
基础选择器
标签选择器
有这个标签才有这个选择器，没有标签就没有选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
/* 特点：选中同标签设置相同的样式，无法差异化同名标签的样式 */
p {
color:red;
}
</style>
</head>
<body>
<p>这是p标签</p>
<p>123</p>
<p>666</p>
</body>
</html>
查看如下
类选择器（主css）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
/* 特点：选中同标签设置相同的样式，无法差异化同名标签的样式 */
p {
color:blue;
}
/* 定义 自定义类选择器*/
.red {
color: red;
}
.size {
font-size: 50px;
}
</style>
</head>
<body>
<p>这是p标签</p>
<!-- 一个类选择器可以给多个标签使用 -->
<p class="red">123</p>
<!-- 一个类选择器可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
<div class="red size">888</div>
<p>666</p>
</body>
</html>
查看结果
id选择器（配合js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
/* 定义 */
#red {
color: red;
}
</style>
</head>
<body>
<!-- 使用 -->
<div id="red">div标签</div>
</body>
</html>
查看如下
重复id报错且会提醒
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
/* 定义 */
* {
color: red;
}
</style>
</head>
<body>
<!-- 使用 -->
<p>p标签</p>
<div>div标签</div>
<h1>hl标签</h1>
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<strong>strong</strong>
</body>
</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>
.red {
/* 宽度*/
width: 100px;
/* 高度*/
height: 100px;
/* 背景色*/
background-color: red;
}
.orange {
width: 100px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div class="red">dev1</div>
<div class="orange">dev2</div>
</body>
</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>
/* 经验：Google浏览器文字有默认大小16px */
p{
/* 改变字体大小 注意，必须带单位 px ，否则属性不生效 */
font-size: 30px;
}
h2{
/* 去掉标题加粗效果 */
font-weight: 400;
}
span{
/* 普通文字加粗 */
font-weight: 700;
}
em{
/* 去除文字倾斜效果 */
font-style: normal;
}
h5{
/* 文字倾斜效果 */
font-style: italic;
}
</style>
</head>
<body>
<p>测试文字大小</p>
<div>测试默认文字大小</div>
<h2>h2 标题文字不加粗 </h2>
<span>普通文字加粗</span>
<br>
<em>去除文字倾斜效果</em>
<h5>h5文字倾斜效果 </h5>
</body>
</html>
查看如下
文本属性控制
行高设置： line-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>文本属性</title>
<style>
/* 行高 */
p{
font-size: 20px;
/* 1行高是取值是30px */
line-height: 30px;
/* 2 如果是数字，表示是当前标签字体大小的倍数（直接设置行号为字体的2倍间距） */
line-height: 2;
}
/* 文字居中 文字在盒子里面 以此定位居中；即设置行高与盒子高度一致 height值= line-height 值
仅适用单行文字垂直居中
*/
div{
height: 100px;
background-color: aqua;
line-height: 100px;
}
</style>
</head>
<body>
<p>
2024年2月16日，OpenAI在社交媒体平台X（原Twitter）上正式发布了其最新AI视频工具——Sora。
这个革命性的文本转视频模型，能够将用户提供的文字信息，生动地转化为最长可达60秒的视频内容。
虽然文本转视频技术并不是新鲜事，但Sora所展示的技术能力和创意将其推向了一个新的高度。
本文将深入探讨Sora的核心功能、运作原理以及其在各个领域的应用，揭示这一工具如何改变人们的创作方式。
</p>
<br>
<div>文字居中</div>
</body>
</html>
查看如下
字体设置： font-family
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>字体设置</title>
<style>
div{
font-family: 楷体;
}
</style>
</head>
<body>
<div>测试字体为楷体</div>
</body>
</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>
div{
font: italic 700 30px/2 楷体;
}
</style>
</head>
<body>
<div>测试字体为楷体</div>
</body>
</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>
p{
text-index: 2em;
font-size: 30px;
}
</style>
</head>
<body>
<p>测试字体</p>
</body>
</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>
h1{
/* 本质：居中的是文字内容，不是标签 */
text-align: center;
}
</style>
</head>
<body>
<h1>文字居中对齐</h1>
</body>
</html>
效果如下
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
