当前位置：首页> 正文

最新html&css入门详解

　　本文主要讲解一些比较关键的知识点，基础的就简单介绍了。

　　h：标题（heading）；　　p；段落（paragraph）；　　b：加粗（bold）；　　i：斜体（italic）；　　sup：上标（superscript）；　　sub：下标（subscript）；　　br：换行（break）；　　hr:换行线（horizontal rule）；　　strong：强调（strong importce）；　　em：强调（emphasize）；　　q：引用（具体效果为“引号”quote）；　　abbr：缩写（abbreviation，鼠标放在缩写字符上是未缩写字符将完整显示出来，需与title搭配使用）；　　cite：引用（cite，在cite标签内的字符将会以斜体的显示显示）；　　address：地址（address，改变显示出来的字符的格式）　　ins：插入（insert，字符下方会被添加一条下划线）；　　del：删除（delete。字符会被一条线穿过，与“s”标签显示出来的效果相同）；　　ol+li:列表（ordered list）；ul+li：未排序列表（unordered list）；　　表格的嵌套再浏览器中会自动产生效果；

　　a：链接（需要跟href搭配使用，搭配 target=“_black”会在一个新的窗口打开链接），同一个窗口内部的链接可以实现快速到达指定位置：<h id="lf"> header</h> <a href="">点击回到头部</a>（需要注意的是id不能是数字以及标点符号，只能是英文。当转向的链接是链接到另一个界面是需首先将该页面的html存储地址作为链接地址然后在加上对应的id如：）；　　mailto：邮件（点击后会自动弹出一个邮箱的程序）；

　　img:插入图像（几个比较好的图片收集网站：），图片的大小设置：height=“100px"，利用align属性可以改变页面的其他部分对图片的环绕方式，如align="right"可以让图片分布在右边，利用align=“middle”可以让文本的第一行和图片的中间对齐；书中还提到了在不同的情况下应当使用的图片的格式：当图片的颜色较多是应当使用JPEG的图片格式；当图片的颜色较少，且同一颜色的覆盖区域较大是用GIF或PNG格式的图片。

　　table:表格，内部包含tr（table row，行）与td（table data，列），可以利用th（table heading）标签来作为每一行/列的头部，利用scope=“row/col”区分是列头还是行头；当需要改变一个元素占用的列数时使用colspan，如

　　html主要内容是各个标签的用法，下面开始讲解css，css的功能是跟html搭配实现对页面布局的设计。

　　作者为了帮助读者理解添加了上面的黄色线与绿色线，这些线就组成了一个个单独的盒子。

　　使用css有两种调用方法：内部调用（internal css ），外部调用（external css）。

　　内部调用是我们直接将css代码写与style元素中，style元素位于head元素内部。

　　外部调用则是将css的“地址”在head内部声明：css选择器（ css selector），不同的情况可以使用不同的选择器。

　　通配选择器（universal selector）：作用对象是所有元素，格式：

　　元素选择器（type selector）：作用对象是标签，格式：类选择器（class selector）：作用对象由我们自己确定，格式：后代选择器（descendant selector）：只要是后代就会产生效果，不一定是子元素，格式：相邻兄弟选择器（adjacent sibling selector）：两个元素相邻时就会产生效果，格式：通用兄弟选择器（general sibling selector）：前面的元素会选择所有后面的元素，格式：css的覆盖问题：遵守三个原则：新鲜性（last rule），如果有相同的元素名，则css会加载最后一个元素效果；具体性（specify），css会加载更加具体的元素，如h比“*“更加具体；重要性（important），在属性的后面加上“！important”可以增加属性的重要性。

　　css的继承性：继承性是指内部的标签具有外部标签的样式，但是有的元素不会继承父元素的样式，如a，h等具有默认值得标签不会继承父元素的属性。

　　颜色：字体颜色：color:字体颜色；

　　盒子的居中：只有大小（高度或宽度之一）设定好了的盒子才能进行居中设置，然后将左右的margin设为auto就可以居中了

　　盒子边线的宽度：border-width:10px/（1px 2px 3px 4px）/thick/medium/thin；border-top/bottom/left/right-width.边线的样式：border-style:soild/dotted/dashed/double/groove/ridge/inset/outset.

　　盒子边线颜色：border-color:red; 可以单独对border的属性进行设置，也可以一次性的设置完毕：borde: 3px dotted red;

　　盒子属性设置：display：inline/block/inline-block/none。none可以将元素隐藏。

　　盒子可见性设置：visibility:hidden/visible.hidden可以将元素隐藏但是会留有其对应的空白（leave a space where the element would have been）。

　　盒子圆角设置：css3中新添加了可以对盒子边角设置的特性：

　　也可以自定义图片最为排序的标号：标号位置：list-style-position:inside/outside,位于文本块的内部/外部。

　　同理也可以一次性的完成对标号的设置：

　　表格的单元格内容为空时可以通过设置来选择将单元格显示或隐藏：表格的单元格与单元格之间的间隔设置（浏览器默认单元格之间是有一定的间距的）：border-space:1px；border-collapse:collapse/separate；

　　一个比较好的表格代码如下，大家可以参考下：

　　一个比较好的文本输入表单的代码：

　　一个比较好的提交按钮个性化代码：

　　input#submit {

　　color: #444444;

　　text-shadow: 0px 1px 1px #ffffff;

　　border-bottom: 2px solid #b2b2b2;

　　background-color: #b9e4e3;

　　background: -webkit-gradient（linear, left top,

　　left bottom, from（#beeae9）， to（#a8cfce））;

　　background:

　　-moz-linear-gradient（top, #beeae9, #a8cfce）;

　　background:

　　-o-linear-gradient（top, #beeae9, #a8cfce）;

　　background:

　　-ms-linear-gradient（top, #beeae9, #a8cfce）;}

　　input#submit:hover {

　　color: #333333;

　　border: 1px solid #a4a4a4;

　　border-top: 2px solid #b2b2b2;

　　background-color: #a0dbc4;

　　background: -webkit-gradient（linear, left top,

　　left bottom, from（#a8cfce）， to（#beeae9））;

　　background:

　　-moz-linear-gradient（top, #a8cfce, #beeae9）;

　　background:

　　-o-linear-gradient（top, #a8cfce, #beeae9）;

　　background:

　　-ms-linear-gradient（top, #a8cfce, #beeae9）;}

　　接下里进入重头戏了：css盒子模型的布局

　　行内元素（inline-element）：布局时从紧跟前方元素布局，不会从新的一行开始占用空间；块级元素（block-level element）：布局时从新的一行开始占用空间。

　　相对定位（relative positioning）：以其未相对定位前的坐标作为定位基准进行自定义定位，相对定位不会影响周围的元素，其他元素将还是会位于正常的元素流中。，即相对定位前的位置会被保留（留白），显示出来的是定位后的效果，用户可以考到元素已经移动了，但是后面的元素并不知道这个元素已经走自己的路去了，所以还是跟以前一样乖乖的呆在未相对定位前的位置。

　　<body>

　　</body>

　　绝对定位（absolute positioning）：绝对定位意味着定位的基准是包含这个元素的父元素的左上角，绝对定位时元素将会被从元素中拿出来，其他元素则认为被定位元素实际并不存在（直接不留白，从被绝对定位开始这个元素就不被其他元素知晓了），所以绝对定位常常会出现元素相互覆盖的问题，但是这个原理也可以被用来设计哟（原理跟photoshop相似）。

　　<body>

　　</body>

　　相同的代码，我只改动了position的属性。从中可以看出绝对定位与相对定位的是否留白问题了。

　　固定定位（fixed positioning）：固定定位属于绝对定位的一种，他只是将认浏览器框框做了父元素，所以一直位于固定（fixed）的位置不动。

　　<body>

　　</body>

　　可以看到固定定位与绝对定位没啥区别，在浏览器有滚动轴出现时效果才会显现出来，所以固定定位常被用于制作页面的header等。

　　浮动定位（float）：float的官方的描述：the flaot property allow you to take an element out of normal flow and place it ,anything else around it will flow aroud the flaoted elemen.即实现文字环绕图片的目的，但是很多人发现他的这个功能可以发扬光大。将元素想左或向右（float：left/right），直到被浮动元素遇到父元素的包含框或另一个浮动元素的边框，浮动元素跟绝对定位元素一样将会被从元素流中拿出来（take element out of the normal flow）；

　　<body>

　　</div>

　　</body>

　　因为1和2都被拿出元素流了，所以3的位置到了最前方。

　　<body>

　　</div>

　　</body> 2向右浮动，直到遇到父元素或浮动元素的边框。

　　flaot常被应用于盒子的并排排列，但是有的情况下会出现显示混乱的情况，第四段会跟在第三段的后面，但是此时第三段周围还有足够大的空间来放置第四段，所以第四段就直接位于了第四段的下面，这显然不是我们想要的结果，我们可以将每个盒子的大小都跟最大的盒子的大小统一，但是这不是最好的方法，此时我们就需要用到clear了。

　　clear的官方描述：the clear property indicates which sides of an element may not adjacent to earlier flaoting box：clear可以让元素的左/右边不和前面的浮动元素相邻。

　　clear：none（默认值）：可以让前面的浮动元素接近；left：左边不能出现浮动元素；right：右边不能出现浮动元素。将上例的第四段添加clear：left后就完美的移动到了第二列了。

　　对于浮动地位的另一个问题是若一个容器中若全是浮动定位元素则会导致容器塌陷，因为浮动元素是离开了元素流的，利用overflw:auto可以解决这个问题（overflow：auto赋值给容器）。清除浮动的方法有较多方法，这里就不在赘述了。

展开全文阅读