前端0×01

CSS

• 逻辑上，实现内容与样式相分离
• 相同的标签以及内容可以使用不同的样式
• 相同的样式可以作用到不同的标签以及内容中去

简单样式

字体颜色

color : blue;

背景色

background-color: blue;

字体大小

font-size:20px;

位置属性

text-align:center;

 选择器

标签选择器

通过标签名字给样式。

<style>
    td {
        text-align: right;
        width: 100px
}
</style>

<td>用户名:<td>

类选择器

通过class属性给样式。

<style>
    .l-td {
        text-align: right;
        width:200px
}
</style>

ID选择器

通过id属性给样式。

<style>
    #td_username {
        text-align:right;
        width:100px
}
</style>
<td class="opt" id="td_username" name"td_username">用户名:</td>

选择器对比

选择器	示例	示例说明
.class	.opt	选择所有 class="opt"
#id	#td_username	选择所有id="td_username"的标签
element	td	选择所有<td>标签
element，element	div,p	选择所有<div>标签和<p>标签
element，element	div p	选择所有<div>标签内的所有<p>标签

内联样式

CSS的样式在标签的<stylr>属性中

<td style="text-align:right ; width:100px"> 用户名 </td>

特点：

• CSS只能作用一个标签
• 多个CSS样式同时存在，yong；隔开

内部样式

<style>
    td {
        width: 600px;
}
    .l-td {
        text-align: right;
        width:200px
}
    #an {
        text-align:center;
}
<style>

 外部样式

在样式声明在独立的样式文件中（*.css），并且独立于任何HTML文档。

<link rel="stylesheet" type="text/css" href="./style/css/form.css"/>