关于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是当图片丢失后显示的内容;高度可以调节图片大小,是按照比例调节的,如果宽高不按比例写会以宽高为准

 

关于CSS初步入门简述1的更多相关文章

  1. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  2. Struts 2 初步入门(三)

    接Struts 2初步入门(二) 若想用多个通配符设定访问: <struts> <package name="default" namespace="/ ...

  3. Java反射-初步入门

    Java反射-初步入门 学反射先了解什么是反射. 百度百科:JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动 ...

  4. Shel脚本-初步入门之《06》

    Shel脚本-初步入门-06 Shell 脚本的建立和执行 6.Shell 脚本的建立和执行 6.1 Shell脚本的建立 在 Linux 系统中,Shell 脚本(bash Shell 程序)通常是 ...

  5. Shel脚本-初步入门之《01》

    Shel脚本-初步入门-什么是 Shell 1.什么是 Shell Shell 是一个命令解释器,它的作用是解释执行用户输入的命令及程序等.Shell 存在于操作系统的最外层,负责与用户直接对话,把用 ...

  6. Shel脚本-初步入门之《02》

    Shel脚本-初步入门-什么是 Shell 脚本 2.什么是 Shell脚本 当命令或程序语句不在命令行下执行,而是通过一个程序文件来执行时,改程序就被称为 Shell 脚本.如果在 Shell 脚本 ...

  7. Shel脚本-初步入门之《03》

    Shel脚本-初步入门-Shell 脚本在 Linux 运维工作中的地位 3.Shell 脚本在 Linux 运维工作中的地位 Shell 脚本语言很适合用于处理纯文本类型的数据,而 Linux 系统 ...

  8. Shel脚本-初步入门之《04》

    Shel脚本-初步入门-04 脚本语言的种类 4.脚本语言的种类 4.1 Shell 脚本语言的种类 Shell 脚本语言是弱类型语言(无须定义变量的类型即可使用),在 Unix/Linux 中主要有 ...

  9. Shel脚本-初步入门之《05》

    Shel脚本-初步入门-05 常用操作系统默认的 Shell 5.常用操作系统默认的 Shell 通过以下两种方法可以查看 CentOS Linux 系统默认的 Shell 方法1: echo $SH ...

随机推荐

  1. Javascript DOM编程艺术 语法部分

    1.变量,可以变化的东西我们称为变量,随着年龄的增大,我们的age不断变大 2.Javascript变量声明用var,可以不声明变量类型.尽量声明为一个字符串字面量. 3.弱类型:要求程序员必须明确的 ...

  2. Java泛型学习笔记 - (一)泛型的介绍

    一.什么是泛型:泛型的作用是用来规定一个类, 接口或方法所能接受的数据的类型. 就像在声明方法时指定参数一样, 我们在声明一个类, 接口或方法时, 也可以指定其"类型参数", 也就 ...

  3. Dojo的Gridx使用jsonrest需要注意的地方

    在使用gridx时,如果要使用jsonrest,主要的工作主要是在服务端,服务端在返回数据时,必须在返回头里添加Content-Range: 0-9/73 属性和值,其中0表示从第0条记录开始,9表示 ...

  4. oracle使用sqlplus创建表空间

    一.打开命令行窗口,输入以下命令:sqlplus /nolog 回车后,将出现提示符 SQL>, 这时输入conn / as sysdba 一般即可登录,如果失败的话,可以试一下用conn sy ...

  5. svg坐标系变换

    svg的坐标变换有三个属性来决定:viewport, viewBox, 和 preserveAspectRatio,我发现三篇比较详细的博客,转载如下: 理解SVG坐标系和变换:视窗,viewBox和 ...

  6. python基础之内置函数

    该博客内容参考http://www.cnblogs.com/wupeiqi/articles/4943406.html 内置函数 一 详细见python文档,猛击这里 文件操作 操作文件时,一般需要经 ...

  7. 预装win8的系统换win7需要做的bios设置

    https://zhidao.baidu.com/question/873669708066476212.html (一)联想G50-70由于预装的是WIN8位系统,哪么改装WIN7 64位的方法如下 ...

  8. windows核心编程---第八章 使用内核对象进行线程同步

    使用内核对象进行线程同步. 前面我们介绍了用户模式下线程同步的几种方式.在用户模式下进行线程同步的最大好处就是速度非常快.因此当需要使用线程同步时用户模式下的线程同步是首选. 但是用户模式下的线程同步 ...

  9. SQL盲注之正则攻击

    我们都已经知道,在MYSQL 5+中 information_schema库中存储了所有的 库名,表明以及字段名信息.故攻击方式如下: 1. 判断第一个表名的第一个字符是否是a-z中的字符,其中bli ...

  10. ResultSet 结果集带回来的一些信息

    ResultSet.getMetaData() 得到结果集的结构信息,比如字段数.字段名等. ResultSet.getMetaData().getTableName(1) 就可以返回表名. Resu ...