使用外部链接的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屋！
