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>
CSS(一)
https://blog.csdn.net/Veer_c/article/details/103882856