无论是刚刚踏出校门的学生，还是正在自学UI设计的平面设计师们，代码一直都是艺术行业很多新人的噩梦，只要一看一大堆符号和代码，就让人头疼不已，完全提不起学下去的勇气。没关系，这篇教程就是写给郁闷的你的。

 

　　首先，让我们对要学习的这门语言有一个基本印象。

 

　　所谓HTML+CSS，就是用一些符号来标记一段话，而这些符号代表着不同的外观。

 

　　把这些话连带符号存成一个文件，这个文件就叫做网页，可以通过网址来打开。

 

　　当我们打开网页时，浏览器会把这段话按符号注明的的样式显示出来。

 

　　Y总是个好同志。

 

　　<标题> Y总是个好同志。</标题>

 

　　标题 {颜色：红色;}

 

　　上面这段代码，输出的结果就是红色的“Y总是个好同志”

 

　　这段代码里，已经完整的包含了整个HTML和CSS的语法和思想。搞懂上面这段代码，你就搞懂了HTML+CSS了。

 

　　在HTML中，标记由<>开始，</>结束。这个标记有两个功能，被称为标签：

 

　　第一，告诉电脑，这段内容属于什么类型。（又叫做语义，可以被搜索引擎和其他程序使用。）

 

　　第二，告诉电脑，从哪里开始应用符号注明的样式，到哪里结束。

 

　　HTML的英文全名叫做hyper text markup language，即超文本标记语言。

 

　　而标题 {颜色：红色;}这段，就叫做CSS。

 

　　它固定由一个名称，一个大括号，和大括号中的“形容词”组成。

 

　　其中标题叫做选择器，它直接连接HTML的标记（标签）。

 

　　颜色：红色；

 

　　{}是固定不变的，和： ;一样，都是固定格式，绝对不可以写错。

 

　　因为电脑其实是文盲。

 

　　是不是很简单？

 

　　HTML中有很多标签，当然不是用中文写的，如：

 

　　段落<p>用于标记正文，大串的文字。

 

　　标题<h>用于标记标题，有<h1><h2>…直至<h6>。

 

　　链接<a>用于标记超链接，就是点击后可以跳转网址。

 

　　列表<ul>用于标记列表，如导航列表。

 

　　列表元素<li>用于标记列表中的元素。

 

　　块元素<div> 也就是页面中的方块。

 

　　最后我们需要知道的是，因为有时候我们要给一段文字很多样式，所以标签会互相包围，极易看串看错。

 

　　所以经常会这样写：

 

　　<div>

 

　　<ul>

 

　　<li>导航1</li>

 

　　<li>导航2</li>

 

　　<li>导航3</li>

 

　　</ul>

 

　　<h>这里是标题</h>

 

　　<p>这里是内容</p>

 

　　<a>返回主页</a>

 

　　</div>

 

　　这种写法叫做缩进，用对其的方式帮助我们不要弄错标签的成对关系。

 

　　好，第一节就到这里，同学们，下课！

 

　　如需转载，请注明文章出处和来源网址：

 

　　1.css基本语法

 

　　css的定义方法是：

 

　　选择器 { 属性：值; 属性：值; 属性：值;}

 

　　选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

 

　　div{ width:100px; height:100px; color:red }

 

　　css的优先级 ： 越接近目标的样式定义优先级越高，高优先级样式将继承低优先级样式的未重叠 定义但覆盖重叠的定义 如果4种样式表对同一元素定义了不同的样式，那么他们的优先级顺序从高到低 是，元素内定，内嵌样式表，导入样式表，外联样式表。

 

　　2.css页面引入方法：

 

　　1、外联式：通过link标签，链接到外部样式表到页面中。

 

　　<link rel="stylesheet" type="text/css" href="css/main.css">

 

　　2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

 

　　<style type="text/css">

 

　　div{ width:100px; height:100px; color:red }

 

　　……

 

　　</style>

 

　　3、内联式：通过标签的style属性，在标签上直接写样式。

 

　　<div style="width:100px; height:100px; color:red ">……</div>

 

　　3.常用的应用文本的css样式：

 

　　color 设置文字的颜色，如： color:red;

 

　　font-size 设置文字的大小，如：font-size:12px;

 

　　font-family 设置文字的字体，如：font-family:'微软雅黑';

 

　　font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜

 

　　font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

 

　　font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';

 

　　line-height 设置文字的行高，如：line-height:24px;

 

　　text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

 

　　text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

 

　　text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

 

　　4.css选择器

 

　　常用的选择器有如下几种：

 

　　1、标签选择器

 

　　标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。 举例：

 

　　*{margin:0;padding:0}

 

　　div{color:red}

 

　　？

 

　　？

 

　　<div>…</div>   <!-- 对应以上两条样式 -->

 

　　<div class="box">…</div>   <!-- 对应以上两条样式 -->

 

　　2、id选择器

 

　　通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 举例：

 

　　#box{color:red}

 

　　？

 

　　<div id="box">…</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

 

　　3、类选择器

 

　　通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。 举例：

 

　　。red{color:red}

 

　　。big{font-size:20px}

 

　　。mt10{margin-top:10px}

 

　　？

 

　　<div class="red">…</div>

 

　　<h1 class="red big mt10">…</h1>

 

　　<p class="red mt10">…</p>

 

　　4、层级选择器

 

　　主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。 举例：

 

　　。box span{color:red}

 

　　。box .red{color:pink}

 

　　。red{color:red}

 

　　？

 

　　<div class="box">

 

　　<span>…</span>

 

　　<a href="#" class="red">…</a>

 

　　</div>

 

　　？

 

　　<h3 class="red">…</h3>

 

　　5、组选择器

 

　　多个选择器，如果有同样的样式设置，可以使用组选择器。 举例：

 

　　。box1,.box2,.box3{width:100px;height:100px}

 

　　。box1{background:red}

 

　　。box2{background:pink}

 

　　。box2{background:gold}

 

　　<div class="box1">…</div>

 

　　<div class="box2">…</div>

 

　　<div class="box3">…</div>

 

　　6、伪类及伪元素选择器

 

　　常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

 

　　。box1:hover{color:red}

 

　　。box2:before{content:'行首文字';}

 

　　。box3:after{content:'行尾文字';}

 

　　<div class="box1">…</div>

 

　　<div class="box2">…</div>

 

　　<div class="box3">…</div>

 

　　如需转载，请注明文章出处和来源网址：

 

　　CSS属性

 

　　属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性

 

　　属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。

 

　　文本属性

 

　　1:文本大小 font-size

 

　　说明：

 

　　1） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。

 

　　2）单位还可以是pt，9pt=12px;

 

　　3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值，即1em.默认情况下，1em=16px,0.75em=12px; rem

 

　　4）使用绝对大小关键字

 

　　xx-small=9px

 

　　x-small=11px

 

　　small=13px

 

　　medium=16px

 

　　large=19px

 

　　x-large=23px

 

　　xx-large=27px

 

　　2:文本颜色 color

 

　　说明： ?

 

　　用十六进制（是计算机中数据的一种表示方法）表示颜色值：

 

　　0 1 2 3 4 5 6 7 8 9

 

　　0 1 2 3 4 5 6 7 8 9 A B C D E F

 

　　颜色模式：光色模式

 

　　R G B

 

　　FF 00 00

 

　　颜色值的缩写：

 

　　当表示三原色的三组数字同时相同时，可以缩写为三位;

 

　　当用十六进制表示颜色值时，需要在颜色值前加“#”

 

　　# fa 00 00

 

　　3:文本类型 font-family:字体1，字体2，字体3……

 

　　说明：

 

　　浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；

 

　　当字体是中文字体时，需加双引号；

 

　　当英文字体中有空格时，需加双引号如（“Times New Roman”）

 

　　当英文字体只有一个单词组成是不加双引号；如：（Arial）；

 

　　Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.

 

　　4:文字加粗font-weight:bolder（更粗的）/bold（加粗）/normal（常规）/100—900;

 

　　说明：

 

　　在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，

 

　　100-400 一般 500常规字体 600-900加粗字体

 

　　5:font-style：italic/oblique/normal（取消倾斜，常规显示）;

 

　　说明：

 

　　italic和oblique都是向右倾斜的文字， 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果。

 

　　7:文字行高 {line-height:normal/value;}

 

　　说明：

 

　　当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；

 

　　当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上；

 

　　当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下（IE6及以下版本存在浏览器兼容问题）

 

　　*文字属性简写：font:12px/24px "宋体";

 

　　font属性的简写：字号，行高，字体

 

　　font-size:12px; line-height:24px; font-family:”宋体”；

 

　　font属性的简写：

 

　　说明：font的属性值应按以下次序书写（各个属性之间用空格隔开）

 

　　顺序： font-style font-weight font-size / line-height font-family

 

　　注意：

 

　　？

 

　　（1）简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。

 

　　（2） 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用，而且，你没有设定font-weight , font-style , 他们会使用缺省值（默认值）。

 

　　8：水平对齐方式

 

　　text-align:left/right/center/justify（两端对齐中文不起作用）

 

　　9:文本修饰text-decoration:

 

　　说明：

 

　　none:没有修饰

 

　　underline:添加下划线

 

　　overline:添加上划线

 

　　line-through:添加删除线

 

　　10:首行缩进

 

　　1）text-indent可以取负值；

 

　　2）text-indent属性只对第一行起作用。

 

　　11:字间距、词间距

 

　　字间距{letter-spacing:value;}控制英文字母或汉字的字距。

 

　　词间距{word-spacing:value;}控制英文单词词距。

 

　　列表属性

 

　　1、定义列表符号样式

 

　　list-style-type：disc（实心圆）/circle（空心圆）/square（实心方块）/none（去掉列表符号）；

 

　　list-style-type:none===list-style:none;

 

　　2、使用图片作为列表符号

 

　　list-style-image：url（所使用图片的路径及全称）；

 

　　3、定义列表符号的位置

 

　　list-style-position:outside（外边）/inside（里边）；

 

　　list-style:none;去掉列表符号

 

　　边框属性

 

　　border:边框宽度 边框风格 边框颜色;

 

　　例如：border:5px solid #ff0000

 

　　？

 

　　边框：border,网页中很多修饰性线条都是由边框来实现的。

 

　　边框宽度：border-width:

 

　　边框颜色：border-color:

 

　　边框样式：border-style:solid（实线）/dashed（虚线）dotted（点划线）double（双线）可单独设置一方向边框，

 

　　？

 

　　可单独设置一方向边框，

 

　　border-bottom:边框宽度 边框风格 边框颜色;底边框

 

　　border-left:边框宽度 边框风格 边框颜色;左边框

 

　　border-right:边框宽度 边框风格 边框颜色;右边框

 

　　border-top:边框宽度 边框风格 边框颜色;上边框

 

　　背景属性

 

　　1、背景颜色 {background-color:颜色值;}

 

　　2、背景图片的设置 background-image：url（背景图片的路径及全称）；背景图片的显示原则 1）容器尺寸等于图片尺寸，背景图片正好显示在容器中 2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素； 3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。 网页上有两种图片形式：插入图片、背景图； 插入图片：属于网页内容，也就是结构。 背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

 

　　3、背景图片平铺属性{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

 

　　4、背景图的位置 性{background-position:left/center/right/数值 top/center/bottom/数值;}水平方向上的对齐方式（left/center/right）或值 垂直方向上的对齐方式（top/center/bottom）或值 background-position:值1 值2; 两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。 当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置 说明：向左方向，向上方向是负值 背景属性的缩写语法： background:属性值1 属性值2 属性值3； 背景缩写：background:url（背景图片的路径及全称） no-repeat center top #f00； 网页上常用的图片格式（压缩图片） 1）jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;（像素点组成的，像素点越多会越清晰 ）如果网页中 2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像; 3）png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;

 

　　5、背景图的固定 性{{background-attachment:scroll（滚动）/fixed（固定）;}fixed 固定，不随内容一块滚动； scroll:随内容一块滚动。

 

　　浮动

 

　　css属性继承

 

　　不可继承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

 

　　所有元素可继承：visibility和cursor。

 

　　内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。

 

　　块状元素可继承：text-indent和text-align

 

　　列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

 

　　表格元素可继承：border-collapse。