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技术站