关于CSS初步入门简述1

diaotai1637

于 2016-04-22 12:52:00 发布

阅读量54

点赞数

原文链接：http://www.cnblogs.com/ziyuan-shanliangdehaohaizi/p/5420856.html

版权

关于CSS的简介可以自行百度，本篇只考虑内容

首先关于CSS会由浅入深，写在前面的有很多不严谨，只是为了引出后文所写。不过如果谬误较大，敬请指正！

1.大部分的代码要写在之中

简单的例子：

<body>
    <div style="height:200px; width:200px; background:#000; color:fff;">你好
    </div>
</body>

这是个长宽200像素黑背景白字的你好，写的时候要注意要用;分隔 " "必须完整颜色前要加上#

2.颜色

主要有三种写法：

style= "color:red;" style= "color:#ff0000;" style= "color:rgb(255,0,0);" 都是红色，第二三种可以互换，因为16进制ff就是10进制255，注意写法即可。

3.文字居中和边框

简例：

<body>
    <p style="background:blue;  width:200px; height:50px; text-align:center; line-height:50px; border:10px solid red;">吃了吗？</p>
</body>

由于文字在行内上下自动居中所以可以把行高的值设成等于块高即：height=line-height，这样上下就能居中，左右居中靠text-align：center ；边框分三个部分分别是宽度，样式，颜色，例子的border是四周宽度10px，实线，红色。写的时候靠空格分隔

solid实线；dashed虚线；dotted点线；

border-top上边线；border-bottom下边框； border-left左边框； border-right右边框。

<body>
    <p style="width:200px; height:50px; text-align:center; line-height:50px; border-top:2px solid red;">吃了吗？</p>
    <p style="width:200px; height:50px; text-align:center; line-height:50px; border-bottom:2px solid red;">吃了吗？</p>
    <p style="width:200px; height:50px; text-align:center; line-height:50px; border:2px dashed red;">吃了吗？</p>
    <p style="width:200px; height:50px; text-align:center; line-height:50px; border:2px dotted red;">吃了吗？</p>
</body>

4.简单的input标签

对于CSS来说input是绕不过去的标签，它的功能很多，先简单介绍两个

    <input type="text" value="你好" style="width:500px; height:20px;" />
    <input type="button" value="天气" style="width:100px; height:20px;" />

上面两个分别是按钮和输入框仅仅是因为type的值不同

5.p标签和h标签和br标签

h标签是标题标签，只有6种分别为h1-h6他们有固定的大小和默认加粗是最大

p标签是段落标签，与其他的p标签有默认的间距

p和h都是双标签

br标签是换行标签，
是单标签

6.超链接

    <a href="https://www.baidu.com/">百度</a>

　　<a href="#">本页最上</a>

7.title属性

title属性是公有属性标签里都能添加，和style等属性写法一样，当鼠标停留在选定区时，会出现提示文字

8.img图片

    <img src=""; title=""; alt=""; height="";/>

src是私有属性，在img标签里生效,是图片的路径;alt是当图片丢失后显示的内容；高度可以调节图片大小，是按照比例调节的，如果宽高不按比例写会以宽高为准

转载于:https://www.cnblogs.com/ziyuan-shanliangdehaohaizi/p/5420856.html

diaotai1637

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于CSS初步入门简述1

关于CSS的简介可以自行百度，本篇只考虑内容首先关于CSS会由浅入深，写在前面的有很多不严谨，只是为了引出后文所写。不过如果谬误较大，敬请指正！1.大部分的代码要写在之中简单的例子：<body> <div style="height:200px; width:200px; background:#000; color:fff;">...
复制链接

扫一扫