直接将代码复制到TXT文档中并将文件后缀.txt改为.html即可看到效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day49</title>
<style>
div{
border: 1px black solid;
}
.test_body{
font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif ;
}
.test_font_size{
font-size:20px;
}
table{
border: 1px black solid;
}
table th,td{
border: 1px black solid
}
li {
display:inline;
border: red 1px solid;
padding-right:10px;
}
</style>
</head>
<body>
<dl>
<dt>CSS相关属性</dt>
<dd>宽和高</dd>
<dd>width属性可以为元素设置宽度，height可以为元素设置高度</dd>
<dd>块级标签才可以设置宽度，内联标签的宽度由内容来决定；</dd>
<dt>字体属性</dt>
<dd>文字字体-大小-粗细-文本颜色</dd>
<dt>font-family\font-size\font-weight\color</dt>
</dl>
<div>
<p>字体属性 </p>
<p class="test_body">文字字体-font-family<br/>font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。</p>
<p>文字大小 <br/>font-size</p>
<p class="test_font_size">文字大小为20PX</p>
<p>文字粗细(字重) <br/>font-weight用来设置字体的字重（粗细）。</p>
<p style="font-weight: normal">默认值</p>
<p style="font-weight: bold">粗体</p>
<p style="font-weight: bolder">更粗</p>
<p style="font-weight: lighter">更细</p>
<p style="font-weight: 700">设置具体粗细，400等用于默认值，700等同于加粗</p>
<p style="font-weight: inherit">继承父元素字体的粗细值 因没定义所以没法展示</p>
<p>文本颜色 color</p>
<p>颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值-如：#FF0000;一个RGB值-如:RGB(255.0.0.1);颜色的名称-如：red</p>
<p>还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。</p>
<p style="color: #FF0000">十六进制值-如：#FF0000</p>
<p style="color:RGB(255.0.0.0)">一个RGB值-如:RGB(255.0.0.1)</p>
<p style="color: red">颜色的名称-如：red</p>
<p style="color: RGBA(255,0,0,0.3)">rgba(255,0,0,0.3)</p>
</div>
<div>
<p>文字属性</p>
<p>文字对齐 <br/>text-align 属性规定元素中的文本的水平对齐方式。</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>left</td>
<td style="text-align: left" >左边对齐-默认值</td>
</tr>
<tr>
<td>right</td>
<td style="text-align: right">右对齐</td>
</tr>
<tr>
<td>center</td>
<td style="text-align: center">居中对齐</td>
</tr>
<tr>
<td>justify</td>
<td style="text-align: justify;">两端对齐</td>
</tr>
</tbody>
</table>
<p>文字装饰<br/>text-decoration 属性用来给文字添加特殊效果。</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>none</td>
<td style="text-decoration: none" >默认，定义标准文本</td>
</tr>
<tr>
<td>underline</td>
<td style="text-decoration:underline">定义文本下的一条线</td>
</tr>
<tr>
<td>overline</td>
<td style="text-decoration:overline">定义文本上的一条线</td>
</tr>
<tr>
<td>line-through</td>
<td style="text-decoration:line-through">定义穿过文本线下的一条线</td>
</tr>
<tr>
<td>inherit</td>
<td style="text-decoration:inherit">继承父元素的text-decoration属性的值</td>
</tr>
</tbody>
</table>
<p>常用的为去掉a标签默认的下划线：<a href="#" style="text-decoration:none;">去掉链接的下划线</a>    <a href="#">默认链接带下划线</a></p>
<p>首行缩进  text-indent<br/>将段落的第一行缩进一定的像素；</p>
<p style="text-indent: 50px;">哈哈哈哈哈哈哈</p>
</div>
<div>
<p>背景属性</p>
<p>背景颜色<br/>background-color:red;</p>
<p>背景图片<br/>background-image:url('图片地址');</p>
<p>背景重复<br/>background-repeat:repeat(默认平铺)\repeat-x(水平方向平铺)\repeat-y(垂直方向平铺)\no-repeat(不平铺)</p>
<p>背景位置<br/>background-position:top right bottom left</p>
<p>支持简写<br/>background: red url('') no-repeat right top</p>
<p>使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。</p>
</div>
<div>
<p>边框</p>
<p>边框属性<br/>border-width(边框的宽度)\border-style(边框的样式：实线\虚线\...)\border-color(边框的颜色)</p>
<p style="border:1px solid red">通常使用简写方式：border:1px solid red;</p>
<P>边框的样式</P>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<th>none</th>
<th style="border:1px none red">无边框</th>
</tr>
<tr>
<th>dotted</th>
<th style="border:1px dotted red">点状虚线边框</th>
</tr>
<tr>
<th>dashed</th>
<th style="border:1px dashed red">矩形虚线边框</th>
</tr>
<tr>
<th>solid</th>
<th style="border:1px solid red">实线边框</th>
</tr>
</tbody>
</table>
<p></p>
<div style="margin-left:20px;border-top-style: dotted; border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none; width: 600px;height:150px;">也可给一个边框的四边设置不同的样式：<br/>border-top-style: dotted; <br/>border-top-color: red;<br/>border-right-style:solid;<br/>border-bottom-style:dotted;<br/>border-left-style:none; </div>
<p></p>
<p>border-radius 设置圆角效果<br/>将border-radius设置为长或高的一半即可得到一个圆形。</p>
<div style="margin: 20px; border-radius: 5px;">border-radius-------border-radius: 5px;</div>
</div>
<div>
<p>display属性<br/>用于控制HTML元素的显示效果</p>
<table>
<thead>
<tr>
<td>值</td>
<td>意义</td>
</tr>
</thead>
<tbody>
<tr>
<td>display:"none"</td>
<td>HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。</td>
</tr>
<tr>
<td>display:"block"</td>
<td>默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。</td>
</tr>
<tr>
<td>display:"inline"</td>
<td>按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。</td>
</tr>
<tr>
<td>display:"inline-block"</td>
<td>使元素同时具有行内元素和块级元素的特点。</td>
</tr>
</tbody>
</table>
<div style="display:none;">display:none;</div>
<div style="display:inline;">display:inline;</div>
<ul>
<li style="display:inline;">或者在统一的CSS文件里添加 li{ display:inline;}</li>
<li>display:inline;2</li>
<li>display:inline;3</li>
</ul>
<p style="font-weight: bold;">display:"none"与visibility:hidden的区别：</p>
<p>visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。</p>
<p>display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。</p>
</div>
<div>
<p>CSS盒子模型</p>
<table>
<thead>
<tr>
<td>值</td>
<td>意义</td>
</tr>
</thead>
<tbody>
<tr>
<td>margin</td>
<td>用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。</td>
</tr>
<tr>
<td>padding</td>
<td>用于控制内容与边框之间的距离；</td>
</tr>
<tr>
<td>border(边框)</td>
<td>围绕在内边距和内容外的边框。</td>
</tr>
<tr>
<td>content(内容)</td>
<td>盒子的内容，显示文本和图像。</td>
</tr>
</tbody>
</table>
<div style="border:orange 10px solid;width:200px; background: orange;">
magin(外边距)
<div style="border:10px red solid;background: red;">
border
<div style="border:10px green solid;background: green;">
padding
<div style="border:10px deepskyblue solid;background: deepskyblue;">
content
</div>
padding
</div>
border
</div>
magin(外边距)
</div>
<p>margin外边距</p>
<div style="width:300px;">
最外层假如是BODY
<div style="margin: 90px 50px 10px 20px">模拟margin外边距效果：
<br/>margin-top:90px;
<br/>margin-right:50px;
<br/>margin-bottom:10px;
<br/>margin-left:20px;
<br/>可以简写margin: 90px 50px 10px 20px
<br/>顺序：上右下左
</div>
</div>
<p>padding内边距</p>
<div style="padding: 30px 50px 10px 20px; width:300px;">模拟padding内边距效果：
<br/>padding-top:30px;
<br/>padding-right:50px;
<br/>padding-bottom:10px;
<br/>padding-left:20px;
<br/>可以简写padding: 30px 50px 10px 20px;
<br/>顺序：上右下左
</div>
</div>
</body>
</html>
代码块
90
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
