CSS - 让它更好看!

未匹配的标注
本文档最新版为 1.8,旧版本可能放弃维护,推荐阅读最新版!

我们的博客看起来仍然很丑吧?是时候来让它变得更好看了!为此,我们将使用 CSS。

CSS 是什么?

层叠样式表 (Cascading Style Sheets) 是一种语言,用来描述使用标记语言 (如 HTML) 写成的网站的外观和格式。把它当做我们网站的化妆 :wink: 。

但我们不想总是从零开始,对吧? 我们将会再一次采用程序员们发布到互联网上的免费程序。 重新发明轮子十分无趣,你懂的。

让我们用 Bootstrap 吧!

Bootstrap 是最流行的 HTML 和 CSS 框架之一,可以开发炫酷的网站: getbootstrap.com/

起初,它由 Twitter 的程序员编写,现在由来自世界各地的志愿者开发!

安装 Boostrap

若要安装 Bootstrap,在代码编辑器打开.html 文件,将下面的代码添加到 <head> 节中:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

这不会向你的项目添加任何文件。它只是指向在互联网上存在的文件。所以,继续打开你的网站,并刷新页面。你瞧!
Figure 14.1

已经看起来不错了!

Django 中的静态文件

最后我们来看看这些我们叫做静态文件的东西。 静态文件是指你所有的 CSS 文件和图片文件。它们的内容不依赖于请求的内容,即对于所有用户都是一样的。

Django 的静态文件放在哪儿呢?

Django 已经知道到去哪里为内建的 “admin” 应用查找静态文件。现在我们需要给我们的 blog 应用添加一些静态文件。

我们在 blog 应用的目录下创建一个名为 static 的文件夹:

djangogirls
├── blog
│   ├── migrations
│   ├── static
│   └── templates
└── mysite

Django 会自动找到你所有应用的文件夹目录下,所有名为 “static” 的文件夹,并能够将它们作为静态文件使用。

你的第一个 CSS 文件!

现在让我们创建一个 CSS 文件,为你的 web 页中添加你自己的样式。 在 static 的目录下创建一个新的目录称为 css 。 然后,在这个 css 目录里创建一个新的文件,命名为 blog.css 。 准备好了吗?

djangogirls
└─── blog
     └─── static
          └─── css
               └─── blog.css

是时候来写一些 CSS 了!首先在代码编辑器打开 blog/static/css/blog.css

在这里我们不会太深入自定义和学习关于 CSS 的内容。如果你想了解更多,这页的最后会有一个免费课程的推荐。

但让我们稍微做一点吧。 也许我们可以改变我们标题的颜色? 计算机使用特殊的编码来了解颜色。 这些编码以 #开始,后面跟着 6 个字母 (A 到 F) 或数字 (0-9)。例如,蓝色的的编码是#0000FF。 你在这里可以发现许多颜色的编码: www.colorpicker.com/。 你也可以使用 predefined colors(预先定义的颜色),如 red (红色) 和 green (绿色)。

在你的 blog/static/css/blog.css 文件中可以添加下面的代码:

h1 a, h2 a {
    color: #C25100;
}

h1 a 是 CSS 选择器。 这意味着我们要将我们的样式应用于在 h1 元素的任何一个 a 元素 ; h2 a 选择器也会为 h2 元素这样做。所以,类似 <h1><a href="">link</a></h1> 的代码, 上述的样式h1 a就会被应用。在这种情况下,我们告诉了它要改变其颜色为 #C25100,即深橙色。 或者,你可以把自己的颜色放在这里,但是要保证它与白色背景有明显的对比!

在 CSS 文件中,我们控制 HTML 文件中元素的样式。我们标识元素的第一种方式是用元素名。你可以将来自于 HTML 段落的这些元素名当做标签记忆。 例如 ah1body,这些都是元素名。我们也用属性去标识元素,如 class 或属性 id 。 类和 id 是你为这些元素定义的。 类定义元素组,id 指向特定元素。 例如,可以使用标记名称 a、 类名 external_link 或 id名 link_to_wiki_page 标识以下标签:

<a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">

你可以了解更多关于CSS Selectors(CSS 选择器) at w3schools.

我们还需要告诉我们的 HTML 模板,我们添加了一些 CSS。在代码编辑器打开 blog/templates/blog/post_list.html 文件并在文件最开始的地方添加以下代码:

{% load static %}

我们刚刚加载了静态文件到这里:blush:。 然后,在 <head> 和 </head >标记之间,在 Bootstrap 的 CSS 文件的链接之后添加以下行:

<link rel="stylesheet" href="{% static 'css/blog.css' %}">

浏览器按照给定文件的顺序读取文件,所以我们需要确保代码在正确的位置,否则我们文件中的代码可能会被 Bootstrap 文件中的代码覆盖。我们只是告诉我们的模板我们的 CSS 文件所在的位置。

现在,您的文件现在看起来应该像这样:

{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        {% for post in posts %}
            <div>
                <p>published: {{ post.published_date }}</p>
                <h2><a href="">{{ post.title }}</a></h2>
                <p>{{ post.text|linebreaksbr }}</p>
            </div>
        {% endfor %}
    </body>
</html>

OK,保存该文件并刷新网站 !
Figure 14.2

也许我们想要给我们的网站一点空间并增加左边缘。让我们来试试这个 !

body {
    padding-left: 15px;
}

将它添加到你的 CSS 代码,保存该文件并查看效果如何 !

Figure 14.3

也许我们可以在我们的网站头部中自定义字体吗?在你的blog/templates/blog/post_list.html中的<head>部分粘贴下面的代码:

<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">

像之前一样,检查blog/static/css/blog.css之前的顺序,并将这行代码放在blog/static/css/blog.css的链接之前。这一行将会从 Google字体导入 Lobster字体 (www.google.com/fonts).

找到 CSS 文件 blog/static/css/blog.css中的h1 a 声明块 (花括弧 { 与 } 之间的代码),在花括号之间添加一行 font-family: 'Lobster';

h1 a, h2 a {
    color: #C25100;
    font-family: 'Lobster';
}

Figure 14.3

好极了!

正如前面提到的,CSS 有一个概念叫做类,它们允许你为一部分 HTML 代码命名,并将样式只应用在该部分,而不影响其他部分。 这是非常有用的!如果你有两个 div 块,它们行为不同 (比如你的标题和帖子)。类可以帮你使它们看起来不同。

让我们继续为部分 HTML 代码命名。添加一个名为 page-header 的类到包含头部标题的 div 中,像这样:

<div class="page-header">
    <h1><a href="/">Django Girls Blog</a></h1>
</div>

现在添加类 post 到包含博客文章的 div 块中:

<div class="post">
    <p>published: {{ post.published_date }}</p>
    <h2><a href="">{{ post.title }}</a></h2>
    <p>{{ post.text|linebreaksbr }}</p>
</div>

现在,我们将会为不同的选择器添加声明块。 选择器以. 开头,关联到类。 网络上有很多很棒的 CSS 教程以及相关阐述,可以帮助你理解下面的代码。 现在,就简单地复制下面代码并粘贴到你的 blog/static/css/blog.css 文件中吧:

.page-header {
    background-color: #C25100;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

.content {
    margin-left: 40px;
}

h1, h2, h3, h4 {
    font-family: 'Lobster', cursive;
}

.date {
    color: #828282;
}

.save {
    float: right;
}

.post-form textarea, .post-form input {
    width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h2 a, .post h2 a:visited {
    color: #000000;
}

然后将类声明嵌入到显示文章的 HTML 代码中。在 blog/templates/blog/post_list.html 中,替换以下内容:

{% for post in posts %}
    <div class="post">
        <p>published: {{ post.published_date }}</p>
        <h2><a href="">{{ post.title }}</a></h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}

替换为:

<div class="content container">
    <div class="row">
        <div class="col-md-8">
            {% for post in posts %}
                <div class="post">
                    <div class="date">
                        <p>published: {{ post.published_date }}</p>
                    </div>
                    <h2><a href="">{{ post.title }}</a></h2>
                    <p>{{ post.text|linebreaksbr }}</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

保存这些文件并刷新你的网站。

Figure 14.4

Woohoo!看起来棒极了,是吧?看看我们刚刚粘贴的代码,来查找在 HTML 中添加类的地方,以及在 CSS 中使用这些类的地方。如果你想要日期变成绿松石色,你该在哪里做改变呢?

不要害怕摆弄这个 CSS,并试图去改变一些东西。调整 CSS 可以帮你搞明白不同的东西怎样工作。如果你做错了什么东西——别担心——你总是可以撤消它 !

我们非常建议在线免费课程  "Basic HTML & HTML5" 和 "Basic CSS" ,它们在 freeCodeCamp 上。它可以帮你学到所有有关如何使用 HTML 和 CSS ,使你的网站更漂亮。

准备好开启下一章了吗?! :blush:

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/django-girls/2....

译文地址:https://learnku.com/docs/django-girls/2....

上一篇 下一篇
Summer
贡献者:2
讨论数量: 0
发起讨论 只看当前版本


暂无话题~