使用内联 CSS 来设置 div 的样式？

Question

我在处理页面页脚中的某些文本时遇到了一些问题。在我的外部样式 sheet

中，文本默认左对齐。但我的理解是 Inline CSS 会覆盖它。这是我对我的代码所做的：

<div  id="footer" style="text-align: center; ">
    <p>Created by John Smith<br>Copyright "Microsoft Inc." 2015</p>
</div>

但是文本仍然出现在页面的左侧，我这里的错误是什么？

提前致谢。

Answer 1

嗨现在已经习惯了

<div  id="footer" >
    <p style="text-align: center; ">Created by John Smith<br>Copyright "Microsoft Inc." 2015</p>
</div>

现在 p 是块级别 element 所以你可以应用到 css p 标签

第二个选项，如果你习惯于外部 CSS 在外部习惯于此 CSS 就像这样

#footer>p{text-align:center;}

Answer 2

要使后面的声明覆盖前面的声明：

/* 0: default */

#footer { text-align:left; }
#footer { text-align:center; }

/* 1: using !important */

#footer { text-align:left; }
#footer { text-align:center !important; }

/* 2: specific selector */

#footer { text-align:left; }
#mainpage #footer { text-align:center; }

/* 3: selector type tag - id - class */

div { text-align:right; }
div.footer { text-align:left; }
div#footer { text-align:center; }

应用具有最高 CSS 特异性的样式。不同元素的特异性定义如下：

!important = is the superior: only !important can override !important
ID attribute = 100
Class attribute = 10
Element = 1

<p id="target" class="target">Hello World</p>

<style>
p#target {color: black} /* Specificity: 101 */
p#target {color: red} /* Specificity: 101 */
p.target {color: blue} /* Specificity: 11 */
p {color: tomato} /* Specificity: 1 */
/* Red color is applied */
</style>

牢记这些规则：

.contents {color: #999 !important;}

section.contents {color: #999;}

body .contents {color: #999;}

#container > .contents {color: #999;}

来源：CSS 规则优先级：https://developer.tizen.org/dev-guide/web/2.3.0/org.tizen.mobile.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm

Answer 3

#footer p {
    text-align: center;
}

在外部样式中尝试此代码 sheet。

使用内联 CSS 来设置 div 的样式？

Using Inline CSS to style div's?

html

css

inline