CSS入门（二）

article/2025/11/11 5:49:23

CSS入门（一）
https://blog.csdn.net/Veer_c/article/details/103882856

CSS文本属性和值：

<style type="text/css">
div{/*设置字符间距*/letter-spacing:4px;/*设置文本的位置*/text-align:center;/*给文本设置上划/下划/中划线*/text-decoration:underline;/*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/word-spacing:10px;}
</style>
</head>
<body>
<div>为中华 之崛起 而读书</div>
</body>

注意：在改变字符的空间的时候，可以将字符直接改变，如果要改变每一个词语之间的空隙，必须要提前将词语的划分好。
字体的大小，颜色，字体类型

<style type="text/css">div{/*设置字体*//*font-family:"黑体";*//*设置字体大小*//*font-size:36px;*//*设置字体样式*//*font-style:italic;*//*设置字体的粗细*//*font-weight:bold;*//*字体设置的简写属性,一定要注意属性的顺序*/font:italic bold 36px "黑体";}
</style>
</head>
<body>
<div>为中华之崛起而读书</div>
</body>

注意：在使用字体属性的时候，可以有两种方法的，一种是利用的font——每个属性的值，可以逐一设置，当然也可以利用font属性中的每一个值，直接去设置，但是必须按照一定的顺序
在这里插入图片描述
设置背景

<style type="text/css">body{/*给标签设置背景颜色*//*background-color:#006;*//*将背景设置为图片*//*background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);*//*设置背景图片的重复规则repeat:默认显示的重复方式,x,y方向都重复repeat-x:设置图片仅在x方向上重复repeat-y:设置图片仅在y轴方向上进行重复no-repeat:图片不重复*//*background-repeat:no-repeat;*//*设置图片的位置*//*background-position:top right ;*//*设置图片背景的简写样式*/background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top right;}
</style>
</head>
<body>
</body>

注意：在这里设置的图片的位置属性：top left, top cente········
参数1：显示的图片的需要从哪个位置开始，将图片由上至下分为三个部分，top,center,bottom
参数2：你的图片需要展示的位置，分为 left,center,right.将标签的body分为三个部分
设置链表的图标

<style type="text/css">ul{/*设置列表选项前面的样式*//*list-style-type:circle;*//*将图片设置为列表选项的一个标记*//*list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);*//*列表样式的简写属性*/list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg);}
</style>
</head>
<body>
<ul>
<li>章子怡</li>
<li>刘亦菲</li>
<li>刘诗诗</li>
</ul>
</body>

合并表格的边框：

<style type="text/css">table{/*合并表格的边框*/border-collapse:collapse;}
</style>
</head>
<body>
<table border="1" align="center" width="400px" height="300px">
<tr>
<td>姓名</td>
<td>班级</td>
<td>成绩</td>
</tr>
<tr class="c">
<td>刘德华</td>
<td>java</td>
<td>60</td>
</tr>
<tr class="c">
<td>张学友</td>
<td>java</td>
<td>70</td>
</tr>
<tr class="c">
<td>郭富城</td>
<td>java</td>
<td>80</td>
</tr>
</table>
</body>

边框（给每个边框设置不同的颜色）

<style type="text/css">
div{width:300px;height:200px;/*必须首先设置边框的样式之后,边框的颜色才可以显示*//*border-color:#F00;*//*给四个边框非别设置不同的颜色*//*border-top-color:#0F0;border-bottom-color:#063;border-left-color:#9C0;border-right-color:#F00;*//*设置边框的样式*//*border-style:solid;*//*实线:solid*//*border-left-style:solid;*//*点划线:dotted*//*border-top-style:dotted;*//*双实线:double*//*border-right-style:double;*//*虚线:dashed*//*border-bottom-style:dashed;*//*设置边框的宽度*//*border-width:5px;*//*border-left-width:1px;border-top-width:3px;border-right-width:6px;border-bottom-width:9px;*//*使用简写属性,设置边框样式:booder:border-width border-style border-color*//*这个简写属性必须牢记*/border:2px solid #F00;}
</style>
</head>
<body>
<div>div</div>
</body>

注意：这个边框的简写属性是：border-width,border-style,border-color,这个简写属性，一定要掌握。

盒子模型（重点掌握）

<!--
css中的盒子模型:我们将我们页面上的每一个标签全部看成一个盒子(宽,高,内边距(盒子内部的东西和盒子内部的间距),外边距(盒子与盒子之间的距离),盒子的厚度)
width:盒子的宽度
height:盒子的高度
border-width:盒子的厚度
padding:设置盒子的内边距
margin:设置盒子的外边距
-->
<style type="text/css">
div{width:100px;height:100px;border:6px solid #900;}
#d1{width:200px;height:200px;padding-top:10px;padding-left:10px;margin-bottom:10px;}
</style>
</head>
<body>
<div id="d1">div1</div>
<div>div2</div>
</body>

注意：盒子模型我们在使用的时候，重点要掌握每个参数所代表的意义

CSS的定位

<!--
css定位:
1.相对定位(relativ):相对于自己之前的位置
2.绝对定位(absobute):相对于自己的父标签
3.固定定位:相对于自己的浏览器而言的
-->
<style type="text/css">
div{width:100px;height:100px;border:3px solid #F00;}
#d2{/*相对定位,相对于自己之前的位置*//*position:relative;top:20px;left:20px;*//*绝对定位:相对于自己的父标签而言的*//*position:absolute;top:20px;left:20px;*//*固定定位:相对于浏览器而言*/position:fixed;left:500px;top:300px;}
</style>
</head>
<body>
<div>div1</div>
<div id="d2">div2</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>