css basic

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
盒子模型?







 

 

 

 

posted on 2019-06-24 23:53  chenqr11  阅读(203)  评论(0编辑  收藏  举报