使用外部链接的CSS将边框应用于html元素 [英] Apply border to html elements using externally linked CSS
问题描述
为什么我很难通过外部链接的CSS文件为HTML元素添加边框?帮助!HTML中的代码:
Why am I having difficulties bordering an HTML element through externally linked CSS file? Help! The code in my HTML:
<html>
<head>
<link href='n.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<section id='1id' class='2class 3class 4class'>
I am bordered & got 1 ID & 3 classes,oh ye!
</section>
</body>
</html>
我的n.css文件外观如何:
How my n.css file looks:
<style>
#1id {border:2;}
.2class{text-decoration:underline;}
.3class{text-style:italic;}
.4class{font-weight:bold;}
</style>
推荐答案
首先,您必须了解一些要点,以解决您的代码
1..请勿在 .css
文件中使用< style>
标记...如果您要编写自己的代码,请使用它 .html
文件中的css
1. don't use <style>
tag in your .css
file...use it if you are writing your css in .html
file
2..css中没有 text-style
属性...改用 font-style
2. there is no text-style
property in css...use font-style
instead
3..在 id
和 class
开头使用数字不是一个好习惯(这里也有以数字开头的 id
和 class
的解决方案)
3. It is not a good practice to use a number at starting to the id
and class
(Here is also solution for the id
and class
starting with number)
4..您为 border
使用了无效值,即 border:2
...使用了 border:2px纯currentcolor
4. you have used invalid value for border
i.e. border:2
...use border:2px solid currentcolor
注意:另外,为了获得更好的编码,请不要在同一元素上使用多个类来进行样式设置...您可以在同一类上应用多个样式
解决方案1 ( id
和 class
都不以数字开头)
Solution1 (id
and class
does not start with numbers)
堆栈代码段
#id1 {
border: 2px solid currentcolor;
}
.class2 {
text-decoration: underline;
}
.class3 {
font-style: italic;
}
.class4 {
font-weight: bold;
}
<section id='id1' class='class2 class3 class4'>
I have 3 classes and 1 id oh ye!
</section>
解决方案2 ( id
和 class
以数字开头)
Solution2 (id
and class
starts with numbers)
HTML 4.01 规范规定, ID 令牌必须以字母([[A-Za-z])可能后跟任意数量的字母,数字([0-9]),连字符(-),下划线(_),冒号(:)和句点(.).对于class属性,没有这种限制.类名可以包含任何字符,并且不必以字母开头即可有效.
The HTML 4.01 spec states that ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.). For the class attribute, there is no such limitation. Classnames can contain any character, and they don’t have to start with a letter to be valid.
HTML5摆脱了对 id 属性的其他限制.除了在文档中唯一之外,剩下的唯一要求是该值必须包含至少一个字符(不能为空),并且该字符可以为'不能包含任何空格字符.
HTML5 gets rid of the additional restrictions on the id attribute. The only requirements left — apart from being unique in the document — are that the value must contain at least one character (can’t be empty), and that it can’t contain any space characters.
这意味着适用于 class 和 id 属性值的规则现在在 HTML5 中非常相似.
This means the rules that apply to values of class and id attributes are now very similar in HTML5.
在这里,您必须在数字前加上 \ 3
前缀,并在其后添加空格.
Here you have to add the \3
prefix to the number and a space after that.
堆栈代码段
#\31 id {
border: 2px solid currentcolor;
}
.\32 class {
text-decoration: underline;
}
.\33 class {
font-style: italic;
}
.\34 class {
font-weight: bold;
}
<section id='1id' class='2class 3class 4class'>
I have 3 classes and 1 id oh ye!
</section>
这篇关于使用外部链接的CSS将边框应用于html元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!