CSS入门（二）

最新推荐文章于 2024-06-20 20:20:21 发布

Veer_c

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量7k

点赞数 6

本文链接：https://blog.csdn.net/Veer_c/article/details/103883102

版权

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

Veer_c

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门（二）

CSS文本属性和值<style type="text/css">div{ /*设置字符间距*/ letter-spacing:4px; /*设置文本的位置*/ text-align:center; /*给文本设置上划/下划/中划线*/ text-decoration:underline; /*设置词语和词语之间的间距,设置之前...
复制链接

扫一扫