码迷,mamicode.com
首页 > Web开发 > 详细

HTML+CSS小结

时间:2014-11-10 15:05:56      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:des   style   io   color   ar   os   使用   java   sp   

WEB标准构成:

   结构   HTML        

   样式   CSS      

   行为   JavaScript(交互行为)

 

html代码规范:

  声明doctype

  UTF-8

  标签缩进

  标签小写

  注释

  <!doctypt html>

   <meta charset="utf-8" />

   <meta name="参数" content="name属性值"/>

   <meta name="keywords" content=""/>

   <meta name="description" content=""/>

   <title>网页标题</title>

 

table标签的属性:

   <caption>标题</caption>

   <table cellpadding="0" cellspacing="0">        /* cellpadding相当于padding,cellspacing相当于margin */

       <tr>表格的行

           <th colspan="3">表头单元格</th>            /* colspan:跨列,rowspan:跨行 */

           <td>单元格</td>

       </tr>

   </table>

 

ul、ol的区别:

  ul—无序列表

       <ul>

           <li></li>

           <li></li>

       </ul>

  ol—有序列表

       <ol>

           <li></li>

           <li></li>

       </ol>

 

css的引入方式以及优缺点:

外部引入:<link rel="stylesheet" type="text/css" href="css/index.css" />

   优点:一个css文件可控制多个页面、易改版、便于维护、减少代码量、代码简介规范 易于分工协作

   缺点:相对于单页有垃圾代码、外部引入中的href属性会给服务器造成请求的压力

       ——常用于访问量巨大的网页

 

头部引入:<style></style>

   优点:速度快、没有服务器请求压力、相对于外部引入单页代码量少

   缺点:不易改版与维护、代码较乱不易前后台沟通

   ——常用于大型互联网首页    如:网易、新浪等

 

标签内引入:<div ></div>

   优点:优先级最高

   缺点:余代码多、代码量大、不利于维护

   ——个别特殊效果的使用

 

css选择器与书写:

  ID 选 择器: #div1{ }

  类 选 择器: .div1{ }

  标签选择器: a/img/span/p/div1{ }

  群组选择器: #div1,#div2,#div3{ }

  后代选择器: #div1 .div2 a{ }

 

css选择器的优先级:

 

html标签的基本属性: 块属性    行属性
块属性标签:

   h1~h6

   ol-有序列表

   ul-无序列表

   dl-定义列表

   table-表格

   p-段落

   br-换行

 

行属性标签:

   span-无语意标签,类似于div,font-weight加粗;

   a-定义锚,有利于seo搜索引擎优化

   img-定义图片,用于在页面中显示图片

   var-定义文本的变量部分

   strong-定义强调文本

   em-定义强调文本

   form-表单提交,用于提交数据

 

块标签可以嵌套块标签和行标签,但行标签只能嵌套行标签!

行标签可以通过给浮动或转成块属性display:block;

textarea:定义多行的文本输入控件

select-定义选择列表(下拉列表)

option-定义选择列表中的选项

  <select>

       <option>Volvo</option>

       <option selected="selected">Saab</option>

       <option>Mercedes</option>

       <option>Audi</option>

   </select>

 

input-定义文本变量部分,常用type属性值如下:

   <input type="text" name=""  value="" onclick="" />

   <input type="button" name=""  value="" onclick="" />

   <input type="submit" name=""  value="" onclick="" />

   <input type="gile" name=""  value="" onclick="" />

   <input type="heckbox" name=""  value="" onclick="" />

   <input type="radio" name=""  value="" onclick="" />

   <input type="password" name=""  value="" onclick="" />

   <input type="reset" name=""  value="" onclick="" />

   <input type="hidden" name=""  value="" onclick="" />

 

css的样式:

   文本、字体:可同时为页面设置多个字体,当浏览器找不到第一个字体是会寻找第二个,知道找到可用字体。

   font-family: "宋体",Arail,Tabhoma,sans-serif;

   字体设置:1、中文页面以宋体为首选,其他字体次之

            2、英文页面以Arail/Tahoma等字体

            3、中英结合网站用英文字体

            4、特殊字体一律用图片

 

 font-size: px/百分数/em;

   font-style: normal(常规字体) / italic(斜体)/ oblique(倾斜)

  font-weight: normal / bold / bolder(更粗) / lighter(更细)

   font-color: #ffffff;

  text-decoration: none / underline / overline(上划线) / line-through(删除线贯穿线)

  line-height: normal / length;

   text-indent: length/px/em;

   text-align: left / center / right / justify(两端对齐);

  vertical-align: top / bottom / middle(上下居中); 支持table其它标签不建议使用

   word-spacing: normal / length;        改变单词间距

  letter-spacing: normal / length;        改变字间距

   background-color: red / #ffffff;

   background-image: none / url("") 0 0 no-repeat;

  background-position: x轴px% / y轴px%

   background-attachment: scroll(背景图跟着页面滚动) / fixed(页面滚动且背景图不滚动);

   background: color url("") position repeat;

   border: 像素值 线条类型 线条颜色;

   border-radius: 左上 右上 右下 左下

盒模型

  padding:top right bottom left;

  margin:top right bottom left;

  border::top right bottom left;

  display:inline-block;

  标准模式:margin+padding+border+content

  怪异模式:内容(padding+border+content)+margin

 

css布局

   float:none / left /right;        浮动会导致文档流塌陷

   clear: none / left / right / both;

   overflow: hidden(超出隐藏) /visible(显示超出) / auto(在需要时剪切内容并添加滚动条) / acroll(显示滚动条)

   visibility(可视): visible(元素可视) / hidden(元素不可视) / inherit(集成父元素可视性);

   position:reative / absolute / static(默认值) / fixed(可定位相对于浏览器窗口的指定坐标) / inherit;

  zindex: nomber / auto            设置元素的堆叠顺序,正负值

   opacity: number(0~1之间数值)

   filter: alpha            IE的半透明滤镜fiter:alpha(opacity=50);

 

a标签的伪类

   a:link{}

   a:visited{}

   a:hover{}

   a:active{}

常见兼容问题

   margin+float会出现双倍间距-解决:用padding

   border-radius IE8以下无效-解决:用背景图圆角;

HTML+CSS小结

标签:des   style   io   color   ar   os   使用   java   sp   

原文地址:http://www.cnblogs.com/jessies/p/4087181.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!