CSS初级课程

来源:互联网 发布:linux u盘文件系统 编辑:程序博客网 时间:2024/04/30 06:17

一、定义
CSS的名称叫做“层叠样式表”,说的直白点,就是改变HTML元素的样式。比如颜色、大小、边框这种。

CSS示意

二、设置颜色:

<h1 style="color:brown;">我的个人网页</h1>

在style里改变,注意语法。

三、设置宽度和高度

<hr style="height:15px;width:900px;">

改变水平线的高度,效果如下:
这里写图片描述

四、设置背景色

background-color:pink;

<hr style="background-color:pink;height:15px;width:900px;">

效果:
这里写图片描述

五、设置文字大小
font-size

<u style="font-size:10px;">但是我不喜欢陌生人。</u>

六、设置边框样式

style="border-width:1px,border-color:grey;border-style:dotted;"

或者border:1px black dotted;

边框样式:solid(实线)、dashed(虚线)、double(双线)、dotted(点线)

七、设置边距

 <h2>我最近计划:</h2>    <ol>        <li style="margin-top:20px;">去韩国</li>        <li style="margin-top:20px;">去桂林</li>        <li style="margin-top:20px;">去贵州</li>  </ol>

简练写法:
margin:20px 10px 5px 10px;代表上边距20px、右边距10px、下边距5px、左10px。

八、设置表格边框粗细和颜色

表格里边和外边的线条设置方法不同。style元素可以设置内部线条,table中的border属性不能包含全部线条。

<h2>我的朋友们</h2>    <style>td{border:1px blue dotted;}</style>    <table style="border:1px blue dotted;">     <tr>         <td>朋友</td>         <td>小军</td>         </tr>         <tr>         <td>同学</td>         <td>三月</td>         </tr>         <tr>         <td>闺蜜</td>         <td>小林</td>         </tr>        </table>

显示为:
表格内外皆虚线

以上为CSS的基础知识点,高级课程待续。

原创粉丝点击