Question

I have a link in which I wish to have it with a specific css.

The css file is called: my_django.css and it has this [snap] data:

.selectize-control.multi .selectize-input.disabled [data-value] 
.remove {
 background: none;
}


.selectize-control.multi .selectize-input [data-value] {
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 border: none;
 background-color: #ff5067;
 padding: 5px 7px;
}

My goal is to access the file above and have it 'styled' on a specific url with .selectize-control.multi .selectize-input [data-value] {.

at the moment, I do it manually where I embed the style in the tag. So it looks like this:

    {% for tag in old_post.tags.all %}              
        <a style="webkit-border-radius: 2px; moz-border-radius: 2px;  border-radius: 2px;  border: none;  background-color: #ff5067;  padding: 5px 7px; color: white;" href="{% url 'by_mylabel' tag.name %} "> {{ tag.name }}</a>                  
    {% endfor %}

Obviously I don't want to copy past it to every location I have and merly wish to utilize the file with the ID. Wonder how to do it. I'm not a CSS/HTML expert. When I use DIV tag, the result comes in a new line (not good) so I take it that it must be inside <a but not sure how.

What have I tried:

<link href="{% static "css/my_django.css" %}" type="text/css" media="all" rel="stylesheet"/>

        {% for tag in old_post.tags.all %}              
            <a class="selectize-control multi" href="{% url 'by_mylabel' tag.name %} "> {{ tag.name }}</a>                  
        {% endfor %}

however the result comes empty. (The file is there and works elsewhere!)

edit 2: ok - what worked and suggested by @connexo is to place the entire code in a different file. So what I did was:

.class {

webkit-border-radius: 2px; 
moz-border-radius: 2px;  
border-radius: 2px;  
border: none;  
background-color: #f90223;  
padding: 5px 7px; 
color: white;
}

the key was the .class and the html would be the same:

<a class="class" href="{% url 'by_mylabel' tag.name %} "> {{ tag.name }}</a>

Answer 1

要应用此样式，您必须通过将CSS添加到布局的<head>部分来加载CSS，例如：

<head>
  <link rel="stylesheet" type="text/css" href="/path/to/your.css">
  <!-- ... other stuff in head ... -->      
</head>

然后将指定的类应用于您的链接

   {% for tag in old_post.tags.all %}              
        <a class="selectize-control multi" href="{% url 'by_mylabel' tag.name %} "> {{ tag.name }}</a>                  
    {% endfor %}

Answer 2

我不知道为什么CSS选择器不是一个选择。将类别或ID添加到标签中。另外，为共享样式创建css文件，然后从html文档中导入它。

如何将css样式从文件添加到链接<a>

2 个答案: