HTML+CSS的学习

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

                    Html和CSS的关系                        Hello World!

上述代码中设置字体大小，和颜色以及文字位置就是CSS的体现

下面解释更多标签的含义

                    这是主题                勇气        三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。        到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。

下面是效果图

称为根标签，所有的网页标签都在中

标签用于定义文档的头部，它是所有头部元素的容器。头部元素有

、<div cdata_tag="script" cdata_data="%E3%80%81%E3%80%81%E7%AD%89%E6%A0%87%E7%AD%BE"><div cdata_tag="style" cdata_data="%E3%80%81%E3%80%81%E7%AD%89%E6%A0%87%E7%AD%BE"><link/>、<meta/>等标签</div></div>

和标签之间的内容是网页的主要内容

就是标题标签，

是段落标签，就是放置图片

注释的方法是：

有了段落又有了标题，如果想在一段话中强调某几个文字，可以用XXX或者XXX标签

XXX可以改变文本样式，如颜色

回车换行

 代表一个空格，注意不能漏分号

---

分隔线

代码

加入大量代码

    列表信息  精彩少年  美丽突然出现  触动心灵的旋律

   自带序号的列表   信息   信息   ......

在网页制作过程中，可以把一些独立的逻辑部分划分出来，放在一个

标签中，这个

标签的作用就相当于一个容器，可以用id属性来为

提供唯一的名称，如：

   

热门课程排行榜

   

       

• 前端开发面试心法

     

• 零基础学习html

       

• javascript全攻略

   

   

web前端开发导学课程

   

       

• 网页专业名词大扫盲

       

• 网站职位定位指南

       

• 为您解密Yahoo网站制作流程

   

创建表格的四个元素：table、tbody、tr、th、td.

加上上面的代码就可以添加黑色边框

使用可实现超链接：链接显示的文本

与用户交互：

        用户名:                密码:

加入文本框：

   个人简介：

   在这里输入内容...

   

   

 

单选框/复选框：

radio/checkbox

   性别:

   男

   

   女

   

下拉列表框：（在里加上就是多选）

   爱好:

   

     看书

     旅游

     运动

     购物

   

重置：

从上面的代码中，我们看到了很多label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等

如：

span{

   color:blue;

}

   

慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！

CSS中，注释用/*  ....  */

CSS样式代码插入的形式来看基本分为以下3种：内联式、嵌入式和外部式三种。

内联式：

这里文字是红色。

嵌入式：

外部式： 

优先级：内联式>嵌入式>外部式

ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次

可以使用类选择器词列表方法为一个元素同时设置多个样式

正确代码：

.stress{    color:red;}.bigsize{    font-size:25px;}到了三年级下学期时，我们班上了一节公开课...

错误代码：

#stressid{    color:red;}#bigsizeid{    font-size:25px;}到了三年级下学期时，我们班上了一节公开课...

伪类选择符：它允许给html不存在的标签设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

CSS的某些样式是具有继承性的p{color:red;}三年级时，我还是一个胆小如鼠的小女孩。

可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;

p{border:1px solid red;}三年级时，我还是一个胆小如鼠的小女孩。

在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。

有些特殊情况需要为某些样式设置具有最高权限，这时可以使用!important来解决

可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。

body{font-family:"宋体";}

将字体设置为斜体：

p a{font-style:italic;}

设置下划线：

p a{text-decoration:underline;}

设置删除线：

 .oldPrice{text-decoration:line-through;}

段落前面空两个空格：

p{text-indent:2em;}

行间距（行高）：

p{line-height:2em;}

文字间隔：h1{letter-spacing:20px;}

英文字间隔：h1{word-spacing:20px;}

设置居中、居左、居右：

div{text-align:center;}、div{text-align:left;}、div{text-align:right;}

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

、

、

...

、

1. 、

• 、

  • 、、

、

、

常用的内联元素有：

、、
、、、、、、、、

常用的内联块状元素有：

、

在html中

、

、

、、、

• 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码是将内联元素a转换为块状元素，从而使a元素具有块状元素特点：

a{display:block;}

块级元素特点：

1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2. 元素的高度、宽度、行高以及顶点和底边距都可设置。

3. 元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

将块状元素div转换为内联元素，从而使div元素具有内联元素特点：div{display:inline;}

内联元素特点：

1. 和其他元素都在一行上；

2. 元素的高度，宽度以及顶部和底部边距不可设置；

3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素（inline-block）就是同是具备内联元素、块状元素的特点 ，代码：display:inline-block

盒子模型的边框就是围绕着内容及不败的线，这条线你可以设置它的粗细、样式和颜色（边框三个属性）。

如：div{border:2px solid red;}

上面是border代码的缩写形式，可以分开写：

div{border-width:2px;

border-style:solid;

border-color:red;

}

1. border-style（边框样式）常见样式有：dashed（虚线）、dotted（电线）、solid（实线）

2. border-color（边框颜色）中的颜色可设置为十六进制颜色，如：border-color：#888（井号不能漏）

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

div{padding:20px 10px 15px 30px;}

顺序一定不要搞混。可以分开写上面代码：

div{

   padding-top:20px;

   padding-right:10px;

   padding-bottom:15px;

   padding-left:30px;

}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

div{margin:20px 10px 15px 30px;}

也可以分开写：

div{

   margin-top:20px;

   margin-right:10px;

   margin-bottom:15px;

   margin-left:30px;

}

如果上右下左的边界都为10px;可以这么写：

div{ margin:10px;}

如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}

总结一下：padding和margin的区别，padding在边框里，margin在边框外。

CSS包含3种基本的布局模型，用英文概括为：Flow(流动模型)、Layer(层模型)、Float(浮动模型)

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{

    width:200px;

    height:200px;

    border:2px red solid;

    position:fixed;

    left:100px;

    top:50px;

}

本文出自 “11828641” 博客，请务必保留此出处http://11838641.blog.51cto.com/11828641/1894596