java基础学习第二讲

一:选择器

1.1类选择器

将要选择的元素取一个类名;再在内部或外部样式中编辑你要选择的元素属性

<style type="text/css">
/*类选择器
       通过给标签类名来获取该元素 */
.div1{ width: 100px; height: 100px; background-color: red;}
</style>

<div class="div1">我是div1</div>

1.2 id选择器

将要选择的元素取一个id名;再在内部或外部样式中编辑你要选择的元素属性

<style type="text/css">
/*ID选择器

                         给元素起一个ID名 用来获取 该元素  设置样式的时候使用
一个元素既可以同时有id名和类名 */
#div{ width: 100px; height: 100px; background-color: blueviolet;}
</style>

<div id="div1">我是div1</div>

1.3 标签选择器

<style type="text/css">

                         /*标签选择器
可以获取当前html中所有的标签 
用来修改样式*/

div{ width: 100px; height: 100px; background-color: aquamarine;}

</style>

二  border 边宽属性

2.1 属性

可以单独设置border边宽属性

border-left :左边框;                 border-right:有边框;                    border-top:上边框;                    border-button:下边框

也可以综合设置

border:(宽度)(类型)(颜色)

2.2 border类型

常用类型:

dashed  虚线            solid   实线                 dotted  圆点虚线                double  双边宽

三 外边距      内边距

外边距:两个盒子之间的距离 以及盒子与body之间的距离;常用margin值来改变盒子之间的距离.(margin可以单独设置也可以综合设置)

内边距:嵌套内容与盒子之间的距离 (常用padding值来改变内容与盒子之间的距离. padding可以单独设置也可以综合盒子)

四:table表单初识

           <!--tr代表行

             th代表列 默认加粗  居中  表头
td代表列表一行-->       

4.1  table表  属性

    caption:表标题

   rows代表列    cals代表列

rowspan合并列    calspan合并行

4.2 表的嵌套

嵌套的内容嵌套在单元格内

<table>
<tr>
<th>表头(自动加粗)</th>
</tr>
<tr>
<td>(嵌套元素)单元格</td>
</tr>
</table>

五: 文字换行
5.1 属性

word-break: break-word;  自动换行

word-break: break-all;自动换行

长串英文超出div宽度的英文 不会自动换行   系统认为空格 汉字是换行的标志