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

html和css总结

时间:2015-10-25 19:12:55      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:

  1. css:用于控制网页的外观,包括内容和图像的定位,不同颜色使用。
  2. css有四种方法:1.内嵌样式 2.内部样式表 3.外部样式表 4.浏览器缺省设置(默认的值),优先级依次递减。内嵌优先级最高!
  3. css外部引用的方法:<link rel="stylesheet" href="test-css.css" type="text/css">
  4. css同时给一个标签的同一个属性给了不同值,那么后面的会覆盖前面的值。
  5. css的语法:选择器{声明1;声明2}其中声明包括属性=值。eg:p{color="red";fontsize="14px"}p{color:rgb(143,12,12);fontsize="14px"}一个值包括几个单词时需用引号。比如某些字体的值。
  6. 选择器分组用“,”;“*”为选中所有标签。
  7. 派生选择器:某个标签下的子标签。方法:父标签和子标签之间用空格。eg:h1 p{....}指给h1下的p标签设置css样式。
  8. “#”定义id.eg:#id名。“.”定义类选择器。eg:.center
  9. id和class的区别:id只能用一次,class可以被引用多次。
  10. class和id 都可以有派生用法。eg.center li意思为class=center的标签下的li标签
  11. “[]”定义属性。eg:[title],或者[title=wsschool],或者[title~=hello]或者[title|hello]可以有值可以无值可以包含。(后面两种都是包含,但前一种适用于空格 连接的属性值,后一种适用于连字符连接的属性值。属性选择器多用于对其他人代码的维护

常用属性

  1. backgroud
  2. backgroud-image
  3. backgroud-repeat
  4. backgroud-position
  5. text-align
  6. word-spacing
  7. letter-spacing
  8. text-transform:转换大小写
  9. text-decoration:文本装饰,其值有:underline,overline,bink,line-through
  10. border-width
  11. border-style
  12. border-color:可以有三种表示颜色的方式。eg:border-color{red},border-color{rgb()},border-color{#16位制颜色}
  13. white-space:处理文本的格式。其值有:pre,nowrop(不换行),pre-wrap(保留空白,不换行),pre-line(保留空白,换行)
  14. list-style-type
  15. list-style-image:给定url
  16. list-style-position
  17. border-collapse:边框合并
  18. padding:内边距,可以有撑开元素的效果
  19. content:用于给伪元素插入内容
  20. attr:获取属性?

伪类

  1. 伪类用于元素状态改变时的设置。常用于点击链接时链接颜色的改变,但一定注意顺序!a:link;a:visited;a:hover;a:active

伪元素

  1. 伪元素给元素标签里的特定内容设置样式。常用的有first-letter,first-line,before(在元素之前添加内容),after(在元素之后添加内容)。eg:p:before{content:url(logo.gif)}效果为在p标签原有内容之前添加一个图片。

Spring(图片替换文字)技术

  1. 一种意义:将文字替换为图片来展示,可增加效果。
  2. 第二种意义:

优先级(权重)

<p style> 优先级最高 <style></style>优先级次之 link.css tab 优先级最低 style(a),id(b),类属性和伪类(c),元素和伪元素(d) “!important”优先级在所有里最高。

css3

  1. border-radius:圆角边框
  2. border-radius:浏览器内核:-moz-;-webkit-,-o-注意声明。
  3. box-shadow:10px(阴影右边距) 20px(阴影下边距) 5px(模糊化)
  4. boder-image:url("")30 30 round/stretch
  5. backgroud-size
  6. backgroud-origin:
  7. text-shadow
  8. word-wrap:

盒模型

  1. :padding:不能为负值,百分比时是相对父级元素的wdith值,不是height值,只给定三个值时,代表上,左右,下。
  2. border:没有style则不会显示。transparent为透明。
  3. margin:可以有负值,负值时有可能会覆盖其他元素。默认值一般为0,但是有的浏览器会对有的元素设置预定的样式,因此最好*{margin=0;}然后再单独给需要的元素设置。margin{0,auto},auto会相对与父元素居中。在子元素中设置margin值,那么这个margin会传递给父元素去显示,而不是在子元素中显示。解决方法是给父元素设置padding值而不是给子元素设置margin值。!

html和css总结

标签:

原文地址:http://www.cnblogs.com/jiayulingzi/p/4909197.html

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