网络零售商的终极网站
 HTML5。 入门的教训。  W3Schools 乌克兰语

西斯

HTML 样式 - CSS


时尚过时了,但风格过时了! 这是真的!..
可可香奈儿


CSS 入门指南 层叠样式表 - каскадні таблиці стилів.

CSS 拯救了很多机器人。 您可以同时创建多个网站的布局。


CSS = 样式和颜色

文本操作
科罗里, 积木



借助 CSS 设计 HTML 样式。 层叠样式表

CSS розшифровується як C级联 年代风格 年代heets - 级联样式表。

CSS 简介, 使用 HTML 元素,您可以创建带有原始内容的视频。.

CSS економить багато часу。 CSS 常用动画图形设计。

CSS 基本属性和 HTML 属性的定义如下:

  • 排队 (вбудований або рядковий) - використовуючи атрибут style HTML 元素
  • 内部的 (внутрішній) - використовуючи елемент <style> в разділі <head>
  • 外部的 (зовнішній) - 为家庭用户提供 CSS

添加 CSS 最常见的方法是将样式保存在多个 CSS 文件中。 Tim 同样,这里我们将重点介绍使用和内部样式,这样更容易入门演示,并且您尝试自己编写 CSS 代码也会更容易。

波拉达: 您可以在以下位置了解有关 CSS 的更多信息Podruchnik 的 CSS на нашому сайті W3Schools 乌克兰.


内联 CSS - Vbudovaniy(行)样式

库存 CSS 用于创建单个 HTML 元素的独特样式。

CSS 维基百科属性 style HTML 元素。

此示例将颜色设置为元素的文本 <h1> в синій:

屁股

<h1 style="color:blue;">最热门的话题</h1>
自己尝试一下»

内部 CSS - 内部样式

修改内部 CSS 以匹配相邻 HTML 边的样式。

内部 CSS 包含在各个部分中 <head> HTML 页面与文档元素<style>:

屁股

<!DOCTYPE html>
<html>
<head>
<style>
主体 {背景颜色:powderblue;}
h1 {颜色:蓝色;}
p{颜色:红色;}
</style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>
自己尝试一下»

外部 CSS - 外部样式

外部样式表用于定义许多 HTML 页面的样式。

借助新的样式表,您只需更改一个文件即可改变整个网站的新外观!

要自定义您自己的样式表,请在 部分中添加一条消息 <head> HTML 文件:

屁股

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>谢头</h1>
<p>这一段。</p>

</body>
</html>
自己尝试一下»

外部样式表以及 HTML 代码可以用任何格式编写 текстовому редакторі 。 该文件不得包含 HTML 代码,并且必须保存 .css 扩展名。

轴看起来像文件“styles.css”:

身体 {
背景颜色:粉蓝色;
}
h1 {
颜色:蓝色;
}
磷{
红色;
}

笔记: 您可以在 参考资料 部分中阅读有关文本编辑器的更多信息HTML 编辑 на нашому сайті W3Schools 乌克兰.


CSS 字体

CSS 指南 color визначає колір тексту, який буде використовуватися.

CSS 指南 font-family визначає сімейство шрифту, яке буде використовуватися.

CSS 指南 font-size визначає розмір тексту, який буде використовуватися.

屁股

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
颜色:蓝色;
字体系列: verdana;
字体大小:300%;
}
磷{
红色;
字体系列:courier;
字体大小:160%;
}
</style>
</head>
<body>

<h1>谢头</h1>
<p>这一段。</p>

</body>
</html>
自己尝试一下»

CSS 边框 - 边框

CSS 指南 border 请查看我的 HTML 文档元素:

屁股

磷{
边框:1px 实心粉蓝色;
}
自己尝试一下»

CSS 填充 - 内部访问

CSS 指南 padding визначає відступ (пробіл) між текстом і межею:

屁股

磷{
边框:1px 实心粉蓝色;
填充:30px;
}
自己尝试一下»

CSS 边距 - 外部输入

CSS 指南 margin визначає простір (пробіл) поза межею (зовнішній відступ):

屁股

磷{
边框:1px 实心粉蓝色;
边距:50px;
}
自己尝试一下»

身份认证 - id

要为一个指定元素指定特定样式,请添加一个属性 id до елемента:

<p id="p01">我玩得很开心</p>

您也可以通过以下方式创建带有 id 的列表:

屁股

#p01 {
颜色:蓝色;
}
自己尝试一下»

标识符 ID 使用 css 实现页面布局# (решітка) і назва ідентифікатора.

笔记: 元素的标识符(id)在页面上必须是唯一的,因此标识符选择器用于选择一个唯一的元素!


Атрибут класу - 班级

要指定值元素类型的样式,请添加属性 class до елемента:

<p class="error">我玩得很开心</p>

然后用歌曲类指定元素的样式:

屁股

p.错误 {
红色;
}
自己尝试一下»

克拉斯(班级) 使用 css 进行家庭布局 . (крапка) і назва класу.


外部消息

在外部样式表上,您可以搜索不同的 URL 或直接流式传输网站。

哪个应用程序具有用于发布到样式表的相同 URL:

屁股

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
自己尝试一下»

这个例子参考了流媒体网站html文件夹中提供的样式表:

屁股

<link rel="stylesheet" href="/html/styles.css">
自己尝试一下»

此示例被发送到样式表,位于与流程页面相同的文件夹中:

屁股

<link rel="stylesheet" href="styles.css">
自己尝试一下»

您可以在 参考资料 部分中阅读有关文件路由的更多信息。 HTML 文件路径 на нашому сайті W3Schools 乌克兰.


Резюме розділу

  • Vickory HTML 属性 style для вбудованого стилю
  • 维克里 HTML 元素 <style> 为 VIT 开发人员准备的 CSS
  • 维克里 HTML 元素 <link> 为便于理解,请参阅 CSS
  • 维克里 HTML 元素 <head>,并检查元素<style> та <link>
  • Vickory CSS 电源 color для установки кольору тексту
  • Vickory CSS 电源 font-family для установки сімейства шрифтів тексту
  • Vickory CSS 电源 font-size для установки розміру тексту
  • Vickory CSS 电源 border для установки меж єлементів
  • Vickory CSS 电源 padding для установки відступу всередині меж
  • Vickory CSS 电源 margin для установки відступу поза межами

HTML 右

向自己寻求帮助吧

正确的:

Vickory CSS 将文档(正文)的背景设​​置为黄色。

<!DOCTYPE html>
<html>
<head>
<style>

  :黄色的;

</style>
</head>
<body>

<h1>我的主页</h1>

</body>
</html>


HTML 样式标签

标签 描述
<style> 提供有关 HTML 文档样式的信息
<link> 意味着文档和外部资源之间的消息

要查看所有可用 HTML 标签的完整列表,请转至 HTML 标签浏览器 на нашому сайті W3Schools 乌克兰.


自我控制的营养

  • 什么是网站风格化?
  • 如何解读CSS?
  • 为什么我们需要级联样式表?
  • 如何将 CSS 添加到 HTML 元素?
  • CSS 属性是什么?
  • 内部 CSS 出现在网站的哪个部分?
  • 如何在 HTML 文档中指示外部样式表?
  • 外部样式表文件中需要有哪些扩展名?
  • CSS 能力如何决定文本的颜色?
  • CSS 能力对于字体系列意味着什么?
  • CSS 能力如何影响文本大小?
  • HTML 元素之间的 CSS 能力意味着什么?
  • CSS 权限如何表示 HTML 元素的文本和边框之间的内部空间?
  • CSS power 如何表示 HTML 元素的外边缘?
  • 哪个属性针对指定 HTML 元素的特定样式进行了 vicorized?
  • HTML 元素的标识符 (id) 指示 CSS 中的哪些附加字符?
  • 不同类型的 HTML 元素使用哪个属性?
  • CSS 中的什么附加字符被赋予 HTML 元素类的名称?
  • 将样式发送到外部文件的方法有哪些?


评论