前端html与css学习笔记总结篇(超详细)

技术实现

首先,我们考虑如何根据图片去取到每个格子的颜色值?这个问题并不难,HTML5为我们提供了Canvas标签,而通过Canvas我们可以使用getImageData方法获取到画布中任一一个点的颜色信息以及透明度信息。

然后,我们来考虑如何设计我们的小工具。第一步,根据不同的图片可能会适合不同的格子大小,所以我会保留一个size选项用于设置盒子的大小;第二步,格子与格子之间是否保留间隙,可能根据用户习惯会有不同,所以我提供space选项来设置间隙大小;第三步,格子实际就是一个盒子的其中一个阴影,而阴影的形状是可以根据盒子本身发生变化的,所以我提供radius属性来配置格子圆角大小;最后,既然我们得到的将是一个html标签,那么标签是可以带有各种属性的(比如:id、class等),所以我提供一个attrs属性(一个json对象),来设置生成的html元素的属性。好了,万事俱备,只欠代码实现了!

最后,我们梳理逻辑,封装代码,完成了最基础的版本。效果如下演示:

奥门永利误乐域 1

为了方便大家看到更真实的效果,这里给大家提供在线DEMO

第十四章 块元素、行元素与溢出


  • 基本概念
    • 块级元素:默认情况下独占一行的元素,可控制宽高、上下边距;
    • 行内元素:默认情况下一行可以摆放多个的元素,不可控制宽高和上下边距
  • 行块转换

    • display:none; 不显示
    • display:block; 变成块级元素
    • display:inline; 变成行级元素
    • display:inline-block; 以块级元素样式展示,以行级元素样式排列
  • 溢出

    • overflow:hidden; 溢出隐藏
    • overflow:scroll; 内容会被修剪,浏览器会显示滚动条
    • overflow:auto; 如果内容被修剪,则产生滚动条
  • 文本不换行:white-space:nowrap;

  • 长单词换行:word-wrap:break-word;

  • 行内元素和快级元素小结

    • 一、块级元素:block
      element

      • 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;
      • 块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如只能包含块级元素。

      • DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

    • 二、行内元素:inline
      element

      • 也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素
        “a”。比如 SPAN元素,IFRAME元素和元素样式的display
        : inline
        的都是行内元素。例如文字这类元素,各个字母
        之间横向排列,到最右端自动折行。
    • 三、block(块)元素的特点:

      • ①、总是在新行上开始;
      • ②、高度,行高以及外边距和内边距都可控制;
      • ③、宽度缺省是它的容器的100%,除非设定一个宽度。
      • ④、它可以容纳内联元素和其他块元素
    • 四、inline元素的特点

      • ①、和其他元素都在一行上;
      • ②、高,行高及外边距和内边距不可改变;
      • ③、宽度就是它的文字或图片的宽度,不可改变
      • ④、内联元素只能容纳文本或者其他内联元素
    • 对行内元素,需要注意如下:

      • 设置宽度width 无效。
        设置高度height无效,可以通过line-height来设置。
        设置margin
      • 只有左右margin有效,上下无效。
      • 设置padding只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。
    • 五、常见的块状元素

      • address – 地址
      • blockquote – 块引用
      • center – 举中对齐块
      • dir – 目录列表
      • div – 常用块级容易,也是CSS
        layout
        的主要标签
      • dl – 定义列表
      • fieldset – form控制组
      • form – 交互表单
      • h1 – 大标题
      • h2 – 副标题
      • h3 – 3级标题
      • h4 – 4级标题
      • h5 – 5级标题
      • h6 – 6级标题
      • hr – 水平分隔线
      • isindex – input
        prompt
      • menu – 菜单列表
      • noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
      • noscript –
        可选脚本内容(对于不支持script的浏览器显示此内容)
      • ol – 有序表单
      • p – 段落
      • pre – 格式化文本
      • table – 表格
      • ul – 无序列表
    • 六、常见的内联元素

      • a – 锚点
      • abbr – 缩写
      • acronym – 首字
      • b – 粗体(不推荐)
      • bdo奥门永利误乐域, – bidi
        override
      • big – 大字体
      • br – 换行
      • cite – 引用
      • code – 计算机代码(在引用源码的时候需要)
      • dfn – 定义字段
      • em – 强调
      • font – 字体设定(不推荐)
      • i – 斜体
      • img – 图片
      • input – 输入框
      • kbd – 定义键盘文本
      • label – 表格标签
      • q – 短引用
      • s – 中划线(不推荐)
      • samp – 定义范例计算机代码
      • select – 项目选择
      • small – 小字体文本
      • span – 常用内联容器,定义文本内区块
      • strike – 中划线
      • strong – 粗体强调
      • sub – 下标
      • sup – 上标
      • textarea – 多行文本输入框
      • tt – 电传文本
      • u – 下划线
    • 七,可变元素

      • 可变元素为根据上下文语境决定该元素为块元素或者内联元素。
      • applet – java
        applet
      • button – 按钮
      • del– 删除文本
      • iframe – inline
        frame
      • ins – 插入的文本
      • map – 图片区块(map)
      • object – object对象
      • script – 客户端脚本
    • 八、行内元素与块级元素有什么不同

      • 区别一:

        • 块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度
        • 行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
      • 区别二:

        • 块级:块级元素可以设置宽高
        • 行内:行内元素不可以设置宽高
      • 区别三:

        • 块级:块级元素可以设置marginpadding
        • 行内:行内元素水平方向的margin-left; margin-right;
      • padding-left; padding-right;可以生效。但是竖直方向的margin-bottommargin-toppadding-toppadding-bottom;却不能生效。

      • 区别四:

        • 块级:display:block;
        • 行内:display:inline;
    • 替换元素有如下:(和img一样的设置方法)

      • <img><input><textarea><select>
      • <object>都是替换元素,这些元素都没有实际的内容
  • 可以通过修改display属性来切换块级元素和行内元素


渐入主题

既然可以使用一个标签制作出一副精美的像素图,那么是否就意味着可以用一个标签还原任一一张图片?唯一不能还原的是图片的精细度问题。然而,如果可以精细到每一个像素点,那么高精度的还原整张图也完全可行,只是这必将消耗非常多的计算机资源。这一设想便是催生这个小工具的催化剂,于是我便开始构思起来。

页面优化实践

  • 从下面的几个方面可以进行页面的优化:

    • 减少请求数
    • 图片合并
    • CSS文件合并
    • 减少内联样式
    • 避免在 CSS中使用 import
    • 减少文件大小
    • 选择适合的图片格式
    • 图片压缩
    • CSS 值缩写(Shorthand
      Property
      )
    • 文件压缩
    • 页面性能
    • 调整文件加载顺序
    • 减少标签数量
    • 调整选择器长度
    • 尽量使用CSS 制作显示表现
    • 增强代码可读性与可维护性
    • 规范化
    • 语义化
    • 模块化

网页无图再不是梦想

2015/08/22 · HTML5 · 1
评论
·
网页开发

原文出处: 百码山庄   

一直以来,网页开发对优化方面做的工作从未停止。网页无图也是为了减少页面资源请求而提出的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们已经取得了不朽的成就:从一开始零零碎碎的小图标资源,到后来小图标合并成一个图片出现雪碧图,再到后来Webfont的出现不仅可以取代雪碧图,而且彻底解决了图标管理难,变色实现麻烦的问题。今天我要跟大家介绍一个小工具,也是可以帮助实现网页无图这一终极目标。理论上来讲,它可以将任何一张图片转换成一个不带图片,不带背景图的干干净净的html标签。但是这有前提:你的计算机得有足够的资源去支撑。

第十五章 定位


  • static静态定位(不对它的位置进行改变,在哪里就在那里)

    • 默认值。没有定位,元素出现在正常的流中(忽略 top,bottom, left,
      right
       或者 z-index 声明)。
  • fixed固定定位(参照物–浏览器窗口)—做 弹窗广告用到

    • 生成固定定位的元素,相对于浏览器窗口进行定位。
      元素的位置通过 "left""top""right"以及 "bottom"属性进行规定。
  • relative(相对定位 )(参照物以他本身)

    • 生成相对定位的元素,相对于其正常位置进行定位。
  • absolute(绝对定位)(除了static都可以,找到参照物–>与它最近的已经有定位的父元素进行定位)

    • 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
    • 元素的位置通过
      left""top""right" 以及 "bottom" 属性进行规定
  • z-index

    • z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
    • 定位的基本思想:
      它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
  • 一切皆为框

    • 块级元素: divh1p元素 即:显示为一块内容称之为 “块框“ ;
    • 行内元素: span,strong,a等元素 即:内容显示在行中称
      “行内框”;
    • 使用display属性改变成框的类型 即:display:block;
      让行内元素设置为块级元素,display:none; 没有框
  • 相对定位:

    • 如果对一个元素进行相对定位,它将出现在它所在的位置上。
    • 通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动
    • .adv_relative
      { position: relative; left: 30px; top: 20px; }
  • 绝对定位:

    • 元素的位置相对于最近的已定位祖先元素,如果元素没有已定位
      的祖先元素,它的位置相对于最初的包含块。 .adv_absolute
      { position: absolute; left: 30px; top: 20px; }

奥门永利误乐域 2
奥门永利误乐域 3


案例分析

通过使用开发者工具分析以上案例的源码,我发现其实它的实现并不难。我们知道在CSS3中新增了一个设置盒子阴影的box-shadow属性,而这个属性可以同时设置任意多个不同颜色和扩散度的阴影块,而案例正是完美的诠释了这个新属性。

既然如此,那么我们现在来做个试验,我们在任一一张图上覆盖上一个个大小相同的小方格子,我们就可以将任何一张图片分隔成一个个的小方格,我们只要知道这些小方格的大小、顺序和位置,我们就可以重组这张图片,如下对比图所示:

奥门永利误乐域 4

但是,有个问题:box-shadow的引用颜色是单色的,而每个盒子范围内的图案是复杂的,我们如何去处理这个问题?

因为box-shadow只能设置颜色,所以这个问题的结果只有一个,找出一个能代表这个格子的颜色,那么选取哪一个颜色值就因人而异了,可以选格子四角的任意一个、可选中心点,可选格子内的任意一个点,我选择的是格子的左上角这个点。我们不难发现,如果我们尽可能的缩小格子,小到只剩下一个像素大小,我们就可以完整的还原一张图片了。

第十七章 css高级属性


  • opacity透明属性
    • opacity
      • 对于IE6/7/,使用filter:alpha(opacity:值;) 值为0-100
      • 对于WebkitOperaFirefoxIE9+,使用opacity:值;
        值为0-1
      • 对于早期火狐,使用-moz-opacity:值; 值为0-1
      • 所以写透明属性时,一般写法是
12345
 {     opacity:0.5;   filter:alpha(opacity:50);/*0-100*/   -moz-opacity:0.5; /*取值0-1*/-->针对早起版本的火狐兼容问题的解决}
  • border-radius圆角边框属性

    • 向 div 元素添加圆角边框
      • border-radius:10px;
  • box-shadow阴影属性

    • box-shadow属性向框添加阴影效果,后面跟4个参数。

    • box-shadow:0px
      0px 10px #000;

  • <embed>属性

    • HTML5中新增的标签,媒体嵌入插件标签,可以通过<embed>插入音频或视频

    • <embed
      src=“media/music.mp3” />

    • 格式.mid .wav .mp3


  • CSS部分导图总结

奥门永利误乐域 5


奥门永利误乐域 6


  • css常见简写

奥门永利误乐域 7


总结

从功能上来看,我实现了图片到html元素的转换,但是可能并非是最好的网页无图实现方案,因为工具转换出的HTML标签,设置了太多的阴影块,对浏览器的渲染并不友好,会对用户计算机硬件有一定的要求,特别是块大小为1(即完整还原图片)的时候,转换过程非常缓慢,如果图片再大些,极有可能导致用户浏览器崩溃,因此建议大家测试时慎用大图做测试。而且,转换后得到的html标签和样式字符串大小将有可能远远超过图片本身的大小,所以我只能说这是一种可行的技术方案,但未必是好的实现方案。(然并卵)

1 赞 4 收藏 1
评论

奥门永利误乐域 8

一些总结

  • 自动继承属性:

    • color
    • font
    • text-align
    • list-style
  • 非继承属性:

    • background
    • border
    • position
  • 具有破坏性的元素:

    • float
    • display:none;
    • position:absoblute/fixed/sticky;
  • 具有包裹性的元素:

    • display:inline-block/table-cell

    • position:absolute/fixed/sticky

    • overflow:hidden/scroll

  • 消除图片底部间隙的方法

    • 图片块状化-无基线对齐
      img{display:block;}

    • 图片底线对齐
      img{vertical-align:bottom;}

    • 行高足够小 – 基线位置上移
      .box{line-height:0;}

缘起

那是一个工作日的早上,我向往常一样准时到达了工作岗位上,启动电脑,打开浏览器我偶然发现了一篇名曰《18个你可能不相信是用CSS制作出来的东西》的文章,出于职业敏感,也出于好奇我就点进去看了一看,发现其中有一个很有意思的作品:http://codepen.io/HugoGiraudel/full/gpcwa/,它仅仅用一个div标签就完成了这幅作品,于是我们几个同事好奇使然,开始分析它的实现,渐渐有了下面即将介绍的工具的影子。

第二章 html基本结构


  • 认识HTML:

    • html不是一种编程语言,是一种标志语言
    • 标记语言是由一套标识标签组成的
    • html使用标签来描述网页
  • html结构:

1234
<html>    <head></head>    <body></body></html>
  • 不成对出现的标签
    <br> <hr> <meta> <img> <input..> <option..> <link>

  • HTML 基本标签的讲解:

    • <html> <head> <body>标签
    • <h1>—-<h6>仅仅用于标题文本,不要为了产生粗体文本使用它们
    • <p>标签 段落标签
    • <strong><b>标签

    • 都会让文字产生加粗效果

      • <strong>用于强调文本,强度更深,表示重要文本—>用于SEO优化
      • <b>只是视觉加粗效果—>单纯为了产生加粗

    • <em> <i>标签
      • em用于强调文本
      • i只是视觉斜体效果
      • <strong><em>强调更强
    • 特殊符号:
      • &nbsp; —->空格
      • &gt; —>大于号
      • &lt;—>小于号
      • &quot;—>引号
      • &copy;–>版权号

第七章 表单和表格(下)


  • 表单和表格标签:
    • <textarea>文本域标签
    • <textarea>标签:
    • <textarea></textarea>是文本域标签,可以在其中插入一段文字内容,它有两个常用属性rowscols
  • 注意:

    • rows表示这个文本域有多少行
    • cols表示这个文本域有多少列
  • 除了这两个属性它还有readonly(只读,文本域的内容无法改变,相当于协议)和title(鼠标放上提示)

  • <select>标签的掌握

    • 注:当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name属性
      123456
      <form>          <select name=""  id="">         <option value="1">1月</option>            <option value="2">2月</option>      </select></form>
  • 常用到的属性:disabled=“disabled”
    name="sel" size="2"

  • <table>表格标签
  • <table>表格标签:<table>是表格标签,可以用它定义一个表格。

    123456
    <table border="1">    <tr>    <td>姓名</td>    <td>性别</td>    </tr></table>
  • 注意:<table>border属性不能少

  • <tr> <td>标签的使用

    • <tr>行标签:

      • <tr>可以定义表格中的一行,一个<tr></tr>表示一行。
1234567891011
<table border="1"><tr> <td>姓名</td> <td>性别</td></tr><tr> <td>姓名</td> <td>性别</td></tr></table>
  • <td>单元格标签:

    • <td>可以定义表格中的一个单元格,<td></td>表示一个单元格。
      1234567
      <table border="1"><tr><td >姓名</td><td>性别</td><td>爱好</td></tr></table>

    • border-collapse 属性设置是否将表格边框折叠为单一边框:
    • border-collapse:collapse;
    • colspan左右合并
    • rowspan上下合并

第一部分总结:

  • 非可视化标签:head meta style scrpit...
  • 可视化标签:img div span a ul li
  • 只有可视化标签,才能用css改变它
  • 单标签:meta link base img input br hr
  • 双标签:html head body div a p span ..ul li ol dl ….

  • 常用可视化标签

    • div
      • 一般用它来布局
    • a 超链接标签
      • href*属性:设置跳转的网页地址
      • target属性:设置跳转的目标
      • 结论:凡事页面可以点击跳转或者表单提交的文字,都用a标签
    • img
      • src*属性用来设置图片的url数据
      • alt提供给搜索引擎搜索的
      • width
      • height
      • 结论 :显示图片
    • ul li
      • 列表
      • 结论:只要将来设计页面中有固定样式的列表,就用ul和li
    • table caption tr td
      (th)

      • 慢慢已经被淘汰了 被ul li代替
      • 如果是合并竖排的就是合并行(rowspan
      • 如果是合并横排的就是合并列(colspan

HTML部分导图总结


奥门永利误乐域 9

奥门永利误乐域 10

奥门永利误乐域 11


第一部分 HTML


一些概念

  • BFC

    • BFC全称”Block
      Formatting Context”
       中文为“块级格式化上下文”

    • 记住这么一句话:BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素

    • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此

    • 扩展阅读

  • 优雅降级(graceful
    degradation
    )

    • 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
  • 渐进增强 progressive
    enhancement

    • 是在浏览器开启JavaScript功能后,如果浏览器版本不支持某些 JavaScript 能力,我们解决这种问题的方式
  • 平稳退化
    • 是在浏览器没有JavaScript功能,或没有开启JavaScript功能情况下,我们解决这种问题的方式;

第十六章 框架


  • frameset框架:
    • <frameset> —- 用来定义一个框架;双标签
      不能和 <body> 一起使用
  • rowscols属性

    • rows 定义行表示框架有多少行(取值 px/%* )
    • cols 定义列表示框架有多少列(取值px%* )
  • frame子框架

    • <frame> —- 表示框架中的某一个部分;单标签,要跟结束标志

      • src 显示的网页的路径
      • name 框架名
      • frameborder 边框线(取值 0 / 1)
    • <noframes>属性

    • <noframes>
      提供不支持框架的浏览器显示body的内容;双标签

12345678
<frameset>     <frame  src=“”  />     <frame  src=“” />     <frame  src=“” />     <noframes>      <body>内容</body>     </noframes></frameset>
  • <iframe>内联框架
    • iframe元素会创建包含另外一个文档的内联框架(即行内框架)
    • 允许和 body 一起使用
    • width 宽(取值 px / %)
    • height 高(取值 px / %)
    • name 框架名
    • frameborder 边框线(取值 0 / 1)
    • src 显示的网页的路径

写DIV+CSS 的一些常识

  • 不要使用过小的图片做背景平铺

    • 这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200200=40,
      000
       次,占用资源
  • 无边框

    • 推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源
  • 慎用 通配符

    • 所谓通配符,就是将CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。
  • CSS的十六进制颜色代码缩写

    • 习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。
  • 样式放头上,脚本放脚下。不内嵌,只外链

  • 坚决不用 CSS表达式

  • 使用 引用样式表,而不是通过@import 导入。

  • 一般来说,PNG比 GIF 要小,小得多。再者,GIF 中有多少颜色是被浪费的,很值得优化。

  • 千万不要在 HTML中缩放图片,一者不好看,二者占资源。

  • 正文字体最好用偶数

    • 12px14px16px,效果非常好。特例,15px
  • blockulol等上下留出至少一倍行距,左侧至少两倍行距,右侧随意。

  • 段落之间,至少要有一倍行距

  • 强行指定某些元素的 line-height,正文 1.6倍于文字大小,标题1.3倍。

  • 中文标点用全角

    • 英文夹杂在中文中,左右空格,半角。
  • 中文字体的粗体和斜体,远离较好

附录四 部分工具资源


附录六 进阶学习


附录七 其他资源


第八章 css基础知识


  • css基础知识:
    • css样式表的定义
    • css:(Cascading Style Sheets)层叠样式表;
  • 分类及位置:内部样式-head区域style标签里面
    • 外部样式-link调用
    • 内联样式-标签元素里面
  • css内的注释:/*注释内容*/
  • css样式表的语法

    • CSS规则由两个主要的部分构成:要添加样式的盒子名或者标签名、和要添加的样式。

    • 盒子名或者标签名{属性:值;}

    • CSS中几种颜色的表示方法

      • 用颜色名表示
        • 有17个预先确定的颜色,它们是
          • aquablackbluefuchsiagraygreenlimemaroonnavy,
              oliveorange, purpleredsilvertealwhite,
            and yellow

      • 用十六进制的颜色值表示(红、绿、蓝)

        • #FF0000或者#F00
      • 用rgb(r,g,b)函数表示

        • 如:rgb(255,255,0)
      • 用hsl(Hue,Saturation,Lightness)函数表示(色调、饱和度、亮度)

        • 如:hsl(120,100%,100%),色调0代表红色,120代表绿色,240代表
          蓝色
      • rgba(r,g,b,a)函数表示

        • 其中a表示的是改颜色的透明度,取值范围是0~1,其中0代表完全透明
      • 用hsla(Hue,Saturation,Lightness,alpha)函数表示

        • 色调、饱和度、亮度、透明度
      • 例子

123456789
  <div style="position:absolute;top:0px"> <div style="background-color:gray;">background-color:gray</div> <div style="background-color:#F00;">background-color:#F00</div> <div style="background-color:#ffff00;">background-color:#ffff00</div>   <div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div> <div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div> <div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>   <div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div></div>

奥门永利误乐域 12

  • 内部样式表
    • 当单个页面需要设置样式时,就应该使用内部样式表。
    • 使用 <style></style>标签在文档<head></head>里面定义内部样式表
12345
<head> <style type="text/css" >  p{color:red;} </style></head>
  • 从外部引入到样式分为两种:(注意写在head标签里面)
  • 当样式需要应用于很多页面时,就需要用到外部样式表,首先需要创建一个css文件,然后引用到我们的页面中。

  • Link样式表式: <link
    rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>

  • Html式: <style
    type="text/css">@import url("css.css");></style>

  • 内联样式表(优先级高)

    • 写在标签里面的样式

    • 如:<p
      style="color:red;"></p>

  • 表示给p标签里面的文字颜色设置为红色

  • 区别:外链样式与导入样式

    • link标签是属于xhtml范畴,而@import则是css2.1中特有的。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

    • 加载的顺序的区别,link加载的css时,是一种并行(没有尝试是否是这样)加载CSS方式,而@impor则在整个页面加载完成后才加载。

    • 兼容性的区别,因@import``CSS2.1才特有的,所以对于不兼容CSS2.1的浏览器来说,无效。

    • 在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别,此时@import就无能为力了。


  • 样式的优先级补充
    • 相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高):
      • 内联样式表(标签内部) > 嵌入样式表(当前文件中)外部样式表(外部文件中)
  • 权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式

  • 层叠优先级是:

    • 浏览器缺省外部样式表 < 内部样式表 < 内联样式
  • 其中样式表又有:类选择器 < 类派生选择器<ID选择器 < ID派生选择器

  • 派生选择器以前叫上下文选择器,所以完整的层叠优先级是:

    • 浏览器缺省 <外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器外部样式表ID选择器外部样式表ID派生选择器内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式…共12个优先级
  • 另外,如果同一个元素在没有其他样式的作用影响下,其Class定义了多个并以空格分开,其优先级顺序为:

    • 一个元素同时应用多个class,后定义的优先(即近者优先),加上!important者最优先!

第十一章 背景属性


  • 背景属性:

    • 背景的添加 :

    • 背景颜色的添加:

      • background:red;
      • backgronnd-color:red;
    • 背景图片的添加:

      • background:url(“images/1.jpg”);
      • backgronnd-image:url(“images/1.jpg”);
    • 背景的平铺

    • 什么是平铺?平铺就是图片是否重复出现
      • 不平铺:background-repeat:no-repeat;
      • 水平方向平铺:background-repeat:repeat-x;
      • 垂直方向平铺:background-repeat:repeat-y;
      • 完全平铺:默认为完全平铺
    • 背景图片的定位
      • 背景图片的定位就是可以设置显示背景图片的位置,通过属性background-position来实现
      • background-position的取值可为英文单词或者数值和百分值。
      • background-positon的英文单词取值
      • top
        left
      • top
        center
      • top
        right
      • center
        left
      • center
        center
      • center
        right
      • bottom
        left
      • bottom
        center
      • ottom
        right
    • background-positon的数值取值
      • background-position:x
        y;
    • positon的百分值取值
      • background-position:x%
        y%;
    • 背景图片的大小

      • 背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。
    • background-size的数值取值

      • background-size:x
        y;
    • background-size的数值取值

      • background-size:x%
        y%;
    • 背景图片的滚动

      • 背景图片是否随着内容的滚动而滚动由background-attachment设置

      • background-attachment:fixed; 固定,不随内容的滚动而滚动

      • background-attachment:scroll; 滚动,随内容的滚动而滚动


第五章 三种列表的讲解


  • 三种列表的知识讲解:
    • <ul>无序列表
      • 无序列表是一个没有顺序项目的列表,此列表项默认粗体圆点进行标识
12345
<ul>   <li></li>   <li></li>   <li></li></ul>
    • 有序列表也是一列项目,只是列表项目使用的是数字进行标记。
      有序列表始于 <ol> 标签。每个列表项始于 <li>标签。
12345
<ol>   <li>内容一</li>   <li>内容二</li>   <li>内容三</li></ol>
  • 列表符号

    • 无序列表-列表符号:

      • type="circle" 空心圆 type=“disc” 实心圆
        默认值 type="square" 方块符
    • 有序列表-列表符号

      • type="A" A B C D
      • type="a" a b c d
      • type="1" 1 2 3 4 默认值type=”I” I II III type=”i” i ii iii
    • 列表嵌套

    • 无序列表-嵌套

123456789
<ul> <li>柚子  <ul>   <li>沙田柚</li>   <li>蜜柚</li>  </ul> </li> <li>荔枝</li> <li>苹果</li></ul>
  • 有序列表-嵌套
123456789
<ol> <li>茶  <ul>   <li>红茶</li>   <li>绿茶</li>  </ul> </li> <li>果汁</li> <li>牛奶</li></ol>
  • 定义列表
    • 定义列表不仅仅是一列项目,而是项目及其注释的组合。定义列表以 <dl> 标签开始。每个定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd> 开始。
123456
<dl>       <dt>pc网页制作</dt>       <dd>学习DIV+CSS JS JQ 项目实战</dd>       <dt>手机网页制作</dt>       <dd>手机网页制作实战</dd></dl>
  • dd是对dt的解释

    • <
      dl>< /dl>
      用来创建一个普通的列表,
    • <
      dt>< /dt>
      用来创建列表中的上层项目,
    • <
      dd>< /dd>
      用来创建列表中最下层项目,
    • <
      dt>< /dt>
      <
      dd>< /dd>
      都必须放在<
      dl>< /dl>
      标志对之间。
12345678910
<dl>    <dt>中国城市</dt>    <dd>北京 </dd>    <dd>上海 </dd>    <dd>广州 </dd>    <dt>美国城市</dt>    <dd>华盛顿 </dd>    <dd>芝加哥 </dd>    <dd>纽约 </dd></dl>
  • dl是definition
    list
    的缩写
  • dtdefinition
    title
    的缩写
  • dd是definition
    description
    的缩写

  • list-style属性具有三个属性分量:
  • list-style-position :设置列表项图标的位置,位于文本内或者文本外
  • list-style-type: 设置列表项图标的类型
  • list-style-image:使用图像设置列表项图标

发表评论

电子邮件地址不会被公开。 必填项已用*标注