zoukankan      html  css  js  c++  java
  • 关于CSS初步入门简述1

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

    首先关于CSS会由浅入深,写在前面的有很多不严谨,只是为了引出后文所写。不过如果谬误较大,敬请指正!
    1.大部分的代码要写在之中
    简单的例子:
    <body>
        <div style="height:200px; 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;  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="200px; height:50px; text-align:center; line-height:50px; border-top:2px solid red;">吃了吗?</p>
        <p style="200px; height:50px; text-align:center; line-height:50px; border-bottom:2px solid red;">吃了吗?</p>
        <p style="200px; height:50px; text-align:center; line-height:50px; border:2px dashed red;">吃了吗?</p>
        <p style="200px; height:50px; text-align:center; line-height:50px; border:2px dotted red;">吃了吗?</p>
    </body>
    4.简单的input标签
    对于CSS来说input是绕不过去的标签,它的功能很多,先简单介绍两个
        <input type="text" value="你好" style="500px; height:20px;" />
        <input type="button" value="天气" style="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是当图片丢失后显示的内容;高度可以调节图片大小,是按照比例调节的,如果宽高不按比例写会以宽高为准

     
  • 相关阅读:
    Spring Boot启动时执行初始化操作三种方法分享
    springboot自定义验证传值范围
    动态数据源玩起来
    多线程之Semaphore登录限流示例
    elementui表格自定义格式实现原理???
    31 Days of Windows Phone | Day #5 System Theming
    SQL 子查询关联查询和非关联查询 性能分享
    windows phone app 发布后在市场里找不到呢。
    APP Hub 应用发布失败,请问大家都是怎么设置可以成功提交哦
    WPF:Main方法到哪里去了?
  • 原文地址:https://www.cnblogs.com/ziyuan-shanliangdehaohaizi/p/5420856.html
Copyright © 2011-2022 走看看