Why am I having difficulties bordering an HTML element through externally linked CSS file? Help! The code in my HTML:
为什么我通过外部链接的CSS文件与HTML元素接壤有困难?帮帮我!我的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>
How my n.css file looks:
我的n.css文件看起来如何:
<style>
#1id {border:2;}
.2class{text-decoration:underline;}
.3class{text-style:italic;}
.4class{font-weight:bold;}
</style>
5 个解决方案
#1
4
First you have to understand some points to fix your code
首先,您必须了解一些要修复代码的要点
1. don't use <style> tag in your .css file...use it if you are writing your css in .html file
1.不要在.css文件中使用
2. there is no text-style property in css...use font-style instead
2. css中没有text-style属性...而是使用font-style
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)
3.在id和class开始时使用数字不是一个好习惯(这里也是以数字开头的id和类的解决方案)
4. you have used invalid value for border i.e. border:2...use border:2px solid currentcolor
4.你使用了边框的无效值,即边框:2 ...使用边框:2px solid currentcolor
Note: Also for better coding don't use multiple classes on the same element to styling...you can apply multiple styles at same class
注意:为了更好的编码,不要在同一元素上使用多个类来设置样式...您可以在同一个类中应用多个样式
Solution1 (id and class does not start with numbers)
Solution1(id和class不以数字开头)
Stack Snippet
#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>Solution2 (id and class starts with numbers)
Solution2(id和类以数字开头)
How id differs in between HTML 4.01 and HTML5
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.
HTML 4.01规范声明ID令牌必须以字母([A-Za-z])开头,后面可以跟任意数量的字母,数字([0-9]),连字符( - ),下划线(_) ,冒号(:)和句点(。)。对于class属性,没有这样的限制。类名可以包含任何字符,并且它们不必以字母开头有效。
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.
HTML5摆脱了对id属性的额外限制。剩下的唯一要求 - 除了在文档中是唯一的 - 是值必须包含至少一个字符(不能为空),并且它不能包含任何空格字符。
This means the rules that apply to values of class and id attributes are now very similar in HTML5.
这意味着适用于class和id属性值的规则现在在HTML5中非常相似。
Reference for id starts with special character
id的引用以特殊字符开头
Reference for class starts with special character
课程参考以特殊字符开头
Here you have to add the \3 prefix to the number and a space after that.
在这里你必须为数字添加\ 3前缀,然后添加空格。
Stack Snippet
#\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>#2
1
you can set border in externally css same as internally css like m supposing your .2class one more thing try to start class name with letters.
你可以在外部css中设置边框,就像在内部css一样,假设你的.2class还有一件事要尝试用字母启动类名。
.2class{ border:1px solid black;}
it gives you black border outside your .2class
它会为你的.2class提供黑色边框
#3
1
#1id{
border:2px solid #999;
padding:10px;
}
.section{
float:left;
padding:0 5px;
margin:-20px 0 0 30px;
background:#fff;
}
#4
1
- Remove
<style>tag from your external css - your css is not taking because you have started the id and class with number in that case you have to write like this for HTML5
从外部CSS中删除
你的css没有服用,因为你已经用数字启动了id和类,在这种情况下,你必须为HTML5编写这样的代码
Example id='1id'
[id="1id"] { border : 2px solid #000; }
Example class='2class'
[class='2class']{font-weight:bold;}
You can not use more than 1 class which started with number like class='2class 3class 4class'
你不能使用超过1个以class ='2class 3class 4class'开头的类
[id="1id"] { border : 2px solid #000; }
[class='2class']{font-weight:bold;}<section id='1id' class='2class'>
I have 1 id and 1 class oh ye!
</section>#5
0
The main mistake was #1id {border:2;} which got corrected by adding 'solid color' and 'px'- to:
主要的错误是#1id {border:2;}通过添加'纯色'和'px'来纠正:
#id1{border:2px solid currentcolor;}
The other two sub-mistakes were using <style></style> in a css file, and starting ID's and CLASSES with a number like 1id, 2class, etc. The correct way of starting ID's and CLASSES is like id1, class2, etc.
另外两个子错误是在css文件中使用
#1
4
First you have to understand some points to fix your code
首先,您必须了解一些要修复代码的要点
1. don't use <style> tag in your .css file...use it if you are writing your css in .html file
1.不要在.css文件中使用
2. there is no text-style property in css...use font-style instead
2. css中没有text-style属性...而是使用font-style
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)
3.在id和class开始时使用数字不是一个好习惯(这里也是以数字开头的id和类的解决方案)
4. you have used invalid value for border i.e. border:2...use border:2px solid currentcolor
4.你使用了边框的无效值,即边框:2 ...使用边框:2px solid currentcolor
Note: Also for better coding don't use multiple classes on the same element to styling...you can apply multiple styles at same class
注意:为了更好的编码,不要在同一元素上使用多个类来设置样式...您可以在同一个类中应用多个样式
Solution1 (id and class does not start with numbers)
Solution1(id和class不以数字开头)
Stack Snippet
#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>Solution2 (id and class starts with numbers)
Solution2(id和类以数字开头)
How id differs in between HTML 4.01 and HTML5
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.
HTML 4.01规范声明ID令牌必须以字母([A-Za-z])开头,后面可以跟任意数量的字母,数字([0-9]),连字符( - ),下划线(_) ,冒号(:)和句点(。)。对于class属性,没有这样的限制。类名可以包含任何字符,并且它们不必以字母开头有效。
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.
HTML5摆脱了对id属性的额外限制。剩下的唯一要求 - 除了在文档中是唯一的 - 是值必须包含至少一个字符(不能为空),并且它不能包含任何空格字符。
This means the rules that apply to values of class and id attributes are now very similar in HTML5.
这意味着适用于class和id属性值的规则现在在HTML5中非常相似。
Reference for id starts with special character
id的引用以特殊字符开头
Reference for class starts with special character
课程参考以特殊字符开头
Here you have to add the \3 prefix to the number and a space after that.
在这里你必须为数字添加\ 3前缀,然后添加空格。
Stack Snippet
#\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>#2
1
you can set border in externally css same as internally css like m supposing your .2class one more thing try to start class name with letters.
你可以在外部css中设置边框,就像在内部css一样,假设你的.2class还有一件事要尝试用字母启动类名。
.2class{ border:1px solid black;}
it gives you black border outside your .2class
它会为你的.2class提供黑色边框
#3
1
#1id{
border:2px solid #999;
padding:10px;
}
.section{
float:left;
padding:0 5px;
margin:-20px 0 0 30px;
background:#fff;
}
#4
1
- Remove
<style>tag from your external css - your css is not taking because you have started the id and class with number in that case you have to write like this for HTML5
从外部CSS中删除
你的css没有服用,因为你已经用数字启动了id和类,在这种情况下,你必须为HTML5编写这样的代码
Example id='1id'
[id="1id"] { border : 2px solid #000; }
Example class='2class'
[class='2class']{font-weight:bold;}
You can not use more than 1 class which started with number like class='2class 3class 4class'
你不能使用超过1个以class ='2class 3class 4class'开头的类
[id="1id"] { border : 2px solid #000; }
[class='2class']{font-weight:bold;}<section id='1id' class='2class'>
I have 1 id and 1 class oh ye!
</section>#5
0
The main mistake was #1id {border:2;} which got corrected by adding 'solid color' and 'px'- to:
主要的错误是#1id {border:2;}通过添加'纯色'和'px'来纠正:
#id1{border:2px solid currentcolor;}
The other two sub-mistakes were using <style></style> in a css file, and starting ID's and CLASSES with a number like 1id, 2class, etc. The correct way of starting ID's and CLASSES is like id1, class2, etc.
另外两个子错误是在css文件中使用