新航路师徒学院

 找回密码
 立即注册
搜索
查看: 344|回复: 0

【新航路】css 入门首选

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-31 13:05:33 | 显示全部楼层 |阅读模式
  1. css 入门首选
  2. ###一.CSS概述
  3.         + 层叠样式表
  4.         + 不需要编译,直接被浏览器解释执行
  5.         + 用来实现内容与显示的分离
  6.                 + 改版简单,维护方便
  7.                 + html与css分离开发方便
  8.                 + 减少代码量,增加加载速度
  9.         + 前端开发必备的技能
  10. ###二.CSS引入方式
  11.         + 在HTML文件的head部分加入
  12.                 + <link rel="stylesheet" type="text/css" href=“my.css"/>
  13.                         + rel 表明链接的文件与html文件之间的关系
  14.                         + type 表明文件类型
  15.                         + href 指向链接的css 外部文件
  16.         + 在HTML文件的head部分直接写入css文档
  17.                 <style type="text/css">
  18.                         div {
  19.                                 margin:0;
  20.                                 padding:0;
  21.                                 border:1px solid red;
  22.                         }
  23.                 </style>               
  24.         + 在HTML标签里直接写入css属性
  25.                 <div style="border:1px solid red; height:30px;"></div>
  26.         + 使用@import 引入css 文件
  27.                 @import url(my.css)
  28.                 PS: @import 本身为css 命令 在能在css 文档中使用
  29. ###三.CSS选择器
  30.         + 类选择器(class)
  31.                 html:
  32.                         <div class="myclass">
  33.                                 测试代码
  34.                         </div>
  35.                 css:
  36.                         .myclas {
  37.                                 width:100px;
  38.                                 height:100px;
  39.                                 border:1px solid red;
  40.                         }
  41.         + 标签名选择器 (div)
  42.                 html:
  43.                         <div>
  44.                                 这是div标签
  45.                         </div>
  46.                         <p>这是p标签</p>
  47.                         <span>这是span标签</span>
  48.                 css:
  49.                         div {
  50.                                 width:100px;
  51.                                 height:100px;
  52.                                 border:1px solid red;
  53.                         }
  54.                         p {
  55.                                 line-height:30px;
  56.                         }
  57.                         span {
  58.                                 dispaly:block;
  59.                         }
  60.         + ID选择器(#id)
  61.                 html:
  62.                         <div id="header">共公头信息</div>
  63.                 css:
  64.                         #header {
  65.                                 height:80px;
  66.                                 overflow:hidden;
  67.                         }
  68.         + 后代选择器 (div span)
  69.                 html:
  70.                         <div class="icon"><span>小图标</span></div>
  71.                 css:
  72.                         div span {
  73.                                 display:block;
  74.                                 height:30px;
  75.                                 width:50px;
  76.                         }
  77.                         .icon span {
  78.                                 display:block;
  79.                                 height:30px;
  80.                                 width:50px;
  81.                         }
  82.         + 群组选择器 (div,p,span)
  83.                 html:
  84.                         <div>
  85.                                 这是div标签
  86.                         </div>
  87.                         <p>这是p标签</p>
  88.                         <span>这是span标签</span>
  89.                 css:
  90.                         div,p,span {
  91.                                 padding:0 20px;
  92.                                 border:1px solid red;
  93.                         }
  94. ###四.CSS选择器使用
  95.         + 使用不同选择器的原则
  96.                 + 准确的控制内容的样式
  97.                 + 代码简化,争取最少代码量
  98.                 + 代码美观,易读
  99.                 + 利用优选级 来做样式覆盖
  100.         + 使用不同选择器的优先级
  101.                 + 直接在标签中 style="" 视为1000
  102.                 + ID 算100
  103.                 + class 为10
  104.                 + 标签的放为1
  105.                 + ps:当然有人拿20个id 来与style 对比,这个可不是这么理解的 style为最高,知道了优秀级使用起来更方便
  106. ###五.CSS命令一
  107.         + 字体设置(font)
  108.                 + color: red | #ff6600 | #f60;
  109.                 + font-family: tahoma | Arial | “宋体”| sans-serif;
  110.                 + font-size: 12px | 1.1em;
  111.                 + font-weight: normal | bold | bolder;
  112.                 + font-style: normal | italic;
  113.                  + text-decoration: none | underline | line-through;
  114.                   + line-height: norma | length;

  115.                   + font: font-style font-weight font-size/line-height font-family;
  116.         + 文本设置 (text)
  117.                 + text-indent: length | 2em;
  118.                 + text-algin: left | center | right;
  119.                 + vertical-align: top | middle | bottom;
  120.         + 背景设置(background)
  121.                 + background-color: red | #ccc;
  122.                 + background-image: none | url(i/logo.png);
  123.                 + background-position: length length || position position;
  124.                 + background-repeat: repeat | no-repeat | repeat-x | repeat-y;
  125.                 + background-attachment: scroll | fixed;

  126.                 background: background-color background-image background-repeat background-position;
  127.         + 尺寸
  128.                 + height: length;
  129.                 + width: length;       
  130. ###六.CSS命令二
  131.         + 可视图
  132.                 + margin
  133.                 + border(#号表示区)
  134.                 + padding
  135.                 + 内容区 width + height
  136.                 ---------------------------------
  137.                 |                 margin (外补丁)                        |
  138.                 |        #########################        |
  139.                 |        #          padding(内补丁)        #        |
  140.                 |        #        WWWWWWWWWWWWWWWWW        #        |
  141.                 |        #        H                                H        #        |
  142.                 |        #        H          内容区                H        #        |
  143.                 |        #        H                            H        #        |
  144.                 |        #        WWWWWWWWWWWWWWWWW   #        |
  145.                 |        #                                                #        |
  146.                 |   #########################        |
  147.                 |                                                           |
  148.                 ---------------------------------
  149.         + 外补丁 (margin)
  150.                 + margin-top: length;
  151.                 + margin-right: legnth;
  152.                 + margin-bottom: length;
  153.                 + margin-left: length;

  154.                 + margin: length;
  155.                 + margin: length length;
  156.                 + margin: length length length;
  157.                 + margin: length length length length;
  158.                 + margin: auto;
  159.                 + margin: 0 auto;
  160.         + 内补丁 (padding)
  161.                 + padding-top: length;
  162.                 + padding-right: legnth;
  163.                 + padding-bottom: length;
  164.                 + padding-left: length;

  165.                 + padding: length;
  166.                 + padding: length length;
  167.                 + padding: length length length;
  168.                 + padding: length length length length;
  169.         + 边框 (border)
  170.                 + border-color: red | #ccc;
  171.                 + border-style: none | dotted | dashed | solid;
  172.                 + border-width: length;
  173.                 + border-left|right|top|bottom: ;

  174.                 + border: border-width border-style border-color;       
  175. ###七.CSS命令三
  176.         + 浮动(float)
  177.                 + float: none | left | right;

  178.                         none: 对象不浮动
  179.                         left: 对象左浮动
  180.                         right: 对象右浮动
  181.         + 清浮动(clear)
  182.                 + clear: none | both;

  183.                         none: 允许两边都可以有浮动对象
  184.                         both: 不允许有浮动对象
  185.         + 超出(overflow)
  186.                 + overflow: visible | auto | hidden | scroll;

  187.                         visible: 不剪切内容也不添加滚动条
  188.                         auto: 默认属性
  189.                         hidden: 隐藏超出内容
  190.                         scroll: 总是显示滚动条

  191.                 + overflow-x:
  192.                 + overflow-y:
  193.         + 显示(display)
  194.                 + display: block | none | inline | table;

  195.                         block: 对象以块属性的方式显示
  196.                         none: 对象不显示
  197.                         inline: 对象以行属性的方式显示
  198.                         table: 对象以表格的形式显示(基本用不到)
  199.         + 可视 (visibility)
  200.                 + visibility: inherit | visible | hidden;

  201.                         inherit:继承上一个父对象的可见性(基本用不到)
  202.                         visible:对象可见
  203.                         hidden:对象隐藏
  204. ###八.CSS命令四
  205.         + A的四个伪类
  206.                 + :link 未被访问前的样式属性
  207.                 + :visited 其链接地址已被访问过后的样式属性
  208.                 + :active 用户激活(鼠标点击与释放之间的事件)时的样式表属性
  209.                 + :hover 鼠标悬停时的样式属性
  210.         + 伪元素(before after)
  211.                 + :before 选择器在被选元素的内容前面插入内容
  212.                         p:before {
  213.                                 content:"内容";
  214.                                 background-color:yellow;
  215.                                 color:red;
  216.                                 font-weight:bold;
  217.                         }
  218.                 + :after 选择器在被选元素的内容后面插入内容
  219.                         p:after {
  220.                                 content:"内容";
  221.                                 background-color:yellow;
  222.                                 color:red;
  223.                                 font-weight:bold;
  224.                         }
  225.         + 列表 (list)
  226.                 + list-style-type: none 设置列表项目所使用的预设标记
  227.                        
  228.                         none:不显示默认标记
  229.         + 表格 (table)
  230.                 + border-collapse: separate | collapse
  231.                        
  232.                         separate: 默认值。边框会被分开
  233.                         collapse: 如果可能,边框会合并为一个单一的边框
  234. ###九.CSS命令五
  235.         + 定位 (position)
  236.                 + position: relative | absolute | static | fixed;

  237.                 relative: 相对,对象不可能层叠,但将依据 left right top bottom 等属性在正常文档流中偏移位置
  238.                 absolute: 绝对,对象从文档流中脱离出,使用left,right,top,bottom等属性进行绝对定位,而其中层叠通过z-index 属性定义
  239.                 fixed: 固定定位 相对body 可视区
  240.                 static: 无特殊定位 (几乎用不到)       
  241.         + 定位相关
  242.                 + z-index: number;
  243.                 + left: length;
  244.                 + right: length;
  245.                 + top: length;
  246.                 + bottom: length;
  247.         + 透明设置
  248.                 + filter:alpha(opacity=70);  /** IE */
  249.                 + opacity:0.7; /** 支持css3的浏览器 */

  250. ###PS:
  251.         以上就是css2.0的东东,css3 稍后更新


复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-5-23 09:35 , Processed in 0.148422 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表