关于CSS初步入门简述1

关于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=""; ; height="";/>

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

时间: 2024-11-09 00:44:36

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

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

大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成前台网页制作.小强老师是这样分类的,前几次课,我们将CSS+DIV入门基础,后几天课程我们讲案例制作.咱们接下来讲的是css基础部分. 高清视频地址如下: 01  css语法规范:                       http://www.tudou.com/programs/view/8s

CSS初步理解

最近在学习牛腩的时候遇到了网页的制作,挺新鲜的.当中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间,找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下链接. CSS基础知识 以下是对CSS理解的导图 通过上图我们也发现,CSS也很难,也容易.容易是说,学起来很快就可以上手,这中语言简单易懂,只要你具备小学英语的知识量就可以了.困难是在指学好它并不容易,因为它需要你耐心.就好比我们对word文档的排版,哪里需要主体鲜明一点,哪里需要着重突出一下,哪

【Android 初学】7、相对布局--初步入门

Start Android  1.什么是相对布局() 相对布局是另外一种控件的摆放的方式: 相对布局是通过指定当前控件与兄弟控件或是父控件之间的相对位置,从而达到控制控件位置的目的: 2.为什么要使用相对布局 相对布局的UI性能比线性布局(嵌套太多)更好: 3.相对布局的常用属性 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false     android:layout_centerHrizontal  水平居中     android:layout_cent

CSS基础入门 第4天课堂笔记

CSS基础入门 第4天课堂笔记(本课程共6天) 前端与移动开发学院 http://web.itcast.cn 目录 目录 2 一.复习 3 二.浮动性质的复习 4 三.浮动的清除 5 3.1 清除浮动方法1:给浮动的元素的祖先元素加高度. 5 3.2 清除浮动方法2:clear:both; 6 3.3 清除浮动方法3:隔墙法 7 3.4 清除浮动方法4:overflow:hidden; 8 3.5 清除浮动总结与案例 9 3.6 浏览器兼容问题 11 四.margin 13 4.1 margin

Android之Web篇:Day01Html与Css基础入门

Day01 html与css基础入门 1.html的常见标签和实战 1.1 a标签 <a href="https://www.baidu.com" target="_blank">点我送福利哦!</a> // target属性值_blank表示另取空白页打开网页,用new有同样的效果 1.2 img标签 <img src="plmm.jpg" width="100px" height="

Java反射-初步入门

Java反射-初步入门 学反射先了解什么是反射. 百度百科:JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制. 上面提到了类和对象,先了解什么是类和对象. java中类: 1.抽象描述 类:类是客观存在的.抽象的.概念东西. 对象:对象是具体的,指一个具体的东西. 打比方:饮料是一个类,可乐.雪碧就是对象. 总结一句话:类是对象的模版,对象

Shel脚本-初步入门之《02 什么是 Shell 脚本》

Shel脚本-初步入门-什么是 Shell 脚本 2.什么是 Shell脚本 当命令或程序语句不在命令行下执行,而是通过一个程序文件来执行时,改程序就被称为 Shell 脚本.如果在 Shell 脚本里内置了很多条命令.语句及循环控制,然后将这些命令一次性执行完毕,这种通过文件执行脚本的方式称为非交互式的方式.这些命令.变量和流程控制语句等有机地结合起来,就形成了一个功能强大的 Shell 脚本. 范例1: 清除 /var/log 下 messages 日志文件的简单命令脚本 把所有命令放在一个

大三开学第一天--编译原理和人工智能的初步入门

开学的第一天,学的都是入门,所以知识比较少,但是我还是会整理出来.因为是开学第一天,事情比较忙,知识没有得到很好的消化和了解,所以今天只作初步了解,过几天会找时间重新整理,具体化. 编译原理第一课: 编译器:编译器是一种语言处理器,可以将“一种语言(通常为高级语言)”翻译为“另一种语言(通常为低级语言)”.通俗的讲,就是我们目前所使用的高级语言,如C++,java,都是易于人们理解和编写的.但是对于机器来说,只能看懂机器语言(即汇编语言,属于低级语言).所以,人们用高级语言写出来的代码,首先要经

(转)Div+CSS布局入门

在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图. 下面,我们需要根据构思图来规划一下页面的布局