Lesson03_01 什么是CSS和CSS的设置方式
什么是CSS
CSS(Cascading Style Sheets) 是一种样式表语言，用于描述网页上的文本、样式、布局等设计元素的外观、样式和排版。利用CSS，作者可以控制一个HTML文件的样式和外观，而无需修改HTML元素。
CSS主要作用是美化网页，为网页添加更多的样式，例如字体、字号、颜色、背景色、高度、宽度、边距、居中对齐等。
CSS的设置方式
CSS的设置方式主要有以下三种：
内联样式
内联样式是直接在HTML标签上设置的样式，使用style属性实现。内联样式可以用于单独设置某个HTML元素。
<p style="color:red;font-size:16px;">我是一段红色、16像素大小的文本。</p>
内部样式表
内部样式表是定义在head标签内的样式表，多用于单独定义某个HTML文件的样式。在内部样式表中，可以定义多个样式，并通过class和id来调用对应的元素。
<head>
<style>
.red-text {
color: red;
}
#title {
font-size: 2em;
}
</style>
</head>
<body>
<h1 id="title" class="red-text">标题</h1>
<p class="red-text">我是红色的文本。</p>
</body>
外部样式表
外部样式表是放在CSS文件中，通过link标签引用，多用于多个HTML文件共用同一套样式。
在CSS文件中，可以定义多个样式，并通过class和id来调用对应的元素。
HTML代码：
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title">标题</h1>
<p class="text">我是文本。</p>
</body>
style.css代码：
.title {
font-size: 2em;
}
.text {
color: red;
}
示例说明
示例1: 禁止右键菜单
HTML代码：
<body oncontextmenu="return false;">
<p>右键禁止菜单。</p>
</body>
使用内联样式的方式，定义在body元素上，设置了oncontextmenu属性为return false。这个属性意为右键点击时打开菜单事件触发时，返回false。这种方法可以禁止右键菜单的出现。
示例2: 文本滚动效果
HTML代码：
<div class="box">
<p class="marquee">文本滚动效果。</p>
</div>
CSS代码：
.box {
width: 200px;
height: 50px;
overflow: hidden;
border: 1px dotted #ccc;
}
.marquee {
position: relative;
width: 200%;
height: 50px;
top: 0;
left: 0;
font-size: 24px;
color: #f00;
animation: marquee 5s linear infinite;
}
@keyframes marquee {
from {
left: 0;
}
to {
left: -50%;
}
}
使用CSS样式的方式，定义了box容器类和marquee文本类，通过设置marquee的position为relative，top和left值为0，使marquee可以在box容器内左右滚动。并通过animation关键字，定义了marquee在5秒内无限循环向左滚动的动画效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Lesson03_01 什么是CSS和CSS的设置方式 - Python技术站
微信扫一扫 
支付宝扫一扫 