font-size:36pt; // 字体大小
margin-left:50px; // 左外边距
<p><a href="http://www.w3cschool.cn" target="_blank">This is a link</a></p> // link declare
color:red; // 字体颜色
background-color:yellow; // 背景色
test-align:center; // 文本位置 居中、左、右
Part1
Css组成:选择器+声明 如,
p {color:red;text-align:center;} // 属性、值以:隔开,以 ;结束。
查看示例 https://www.w3cschool.cn/tryrun/showhtml/ex2
Tip: css 注释方法: /* 起始 */结束
Part2
Css id 和 Css class
简单记: id#、class.
Part3
插入css到html的三种方式:
1' 外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Note: css文件内的属性和值间不要留空格,如color: red;是错误的
2' 内部样式表
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3' 内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
Note:同时具备多重样式,内联优先级高于内部样式高于外部样式。
Part4
Css text
1‘当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐
2’ text-decoration 属性用来设置或删除文本的装饰
3‘ 文本缩进 如,p {text-indent:50px;}
Part4
Css link
a:link {color:#FF0000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Part5
Css Table
1' 边框
table, th, td
{
border: 1px solid black;
}
padding属性? => 控制表格内文字与边框的距离
Part6
盒子模型?