2022年CSS自学笔记 .pdf

《2022年CSS自学笔记 .pdf》由会员分享，可在线阅读，更多相关《2022年CSS自学笔记 .pdf（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、黄刚创意工作室IT 技术部- 1 - CSS（cascading style sheets）层叠样式表，简单通俗得说它就是网页网站美丽的外衣，而且这个外衣可以去掉、改变。 它实际上就是一个文档，把网页的外观隔离出来你单独去设计修改。层叠样式表有几个特点：1.可以任意挪用调用，2.简单易学， 3.效果灵活丰富，要比 html 强大得多。CSS 可以说从根本上改变了网页设计，它让网页和网页的风格彻底隔离出来，从而可以系统改变也可以微调，而且这种设计功能强大。现在它逐渐成为网页设计的主流，因为有时网站的网页越来越多，一个个更改麻烦，另一个就是对网页的设计美感要求越来越高。所以要成为一个顶级的网页设计

2、师，首先得成为一个CSS 高手。从上面一个简单的html 文档可以看出一个层次型来，可以说成是上下级或父子关系，为什么要讲这个呢？因为html 语言是很简单的，核心就一个字tag，有了它就可以控制网页的一部分东西。Em 是强调标签， CSS 里有一个重要的属性叫inheritance，不给下级赋值，它会继承上级属性值。P 叫做选择符， 你要给什么施加规则，你是给一个元素施加规则还是一个类别施加规则。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 10 页 - - - -

3、- - - - - 黄刚创意工作室IT 技术部- 2 - 大括号里的冒号前的叫属性，就是要改变风格的哪个部分，分号之前的就是一个值，分号表示还可设置其他属性。大括号部分叫做声明块。要写 CSS 规则，首先在网页源代码的head区里加上style 标签，这个东西是固定的。规则就写在风格标签里面。为了保持一致在最后一个value 后面的分号最好不要省略掉，便于下次写新的属性值。当网页不是很多的时候或规则很少时，可以采用嵌入式层叠样式表，也就是在style 风格标签之间写入了一些规则。但如果网页非常多而且不同的网页要求不同的风格，前一种方式就不是很有效的了，采用链接式层叠样式表。采用链接式CSS 好

4、处是把网页和网页风格隔离出来了，你可以很容易去修改网页的风格，特别是网页非常多而且不同的网页要求不同的风格，手动去改是不现实的。可以为一个网 页 外 挂 多 个 层 叠 样 式 表 ， 方 法 是 复 制 产 生 多 个 标 签 , 。还有一种叫引入式，用得不多，但要知道有这么回事，import url(main.css) ； 。类别选择符（ class selectors）让你对一个给定的类别应用CSS。因为你要给网页施加规则首先得确定给谁施加。如下p.bold font-wieght:bold; bold是一个类别的起的名字，.是一个类别标志。也就是说只要这个元素是段落且属于bold 类别

5、的话，在html 里面都是粗体显示的，如 我的易生活动起来！。ID 选择符有点像类别选择符，只不过每一页只能用在一个元素上。如果给定以下CSS规则： p#bold font-weight:bold;。#bold 就是一个元素的ID，后面是很普通的CSS 规则。加上这个html 标签： 易生活网上订餐系统。可以同时为多个选择符运用同一套规则，如p,h1,h2 text-align:center; ，每个选择符之间只需要用逗号隔开即可；甚至你可以在群选择符之间掺杂ID类别符等等，例如p.navgation,h1#title font-weight:bold;。在 CSS 中你可以用颜色属性来指定任

6、意元素的元素，如p color:blue; 有 5 种定义颜色的方法：当然并不是所有颜色都可以用颜色关键字指定，常用关键字有aqua（浅绿），black，blue，fuchsia（紫红），gray，green，lime（酸橙色），maroon（栗色），navy，olive（橄榄色），purple，red，silver， teal，white and yellow 。16 位进制在编程时用得比较多。背景颜色属性也有同样 5 种颜色定义方法，它定义背景的颜色，只不过color 换成了 background-color 。用 CSS 做布局有几个属性之间的关系得明了：名师资料总结 - - -精品资料

7、欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 10 页 - - - - - - - - - 黄刚创意工作室IT 技术部- 3 - content 可以是任何元素；padding 是 border 和 content 之间的空间，它在英语里面本来就指枕头等里的填充物；margin 是一个元素border 之间的边框距离，它是一定存在的不管你看不看得见。在 CSS 中，可以使用关键字来指定边框宽度：border-width:thin/medium/thick;也可以用具体的数值来指定如：border-wi

8、dth:2px/2em 。注意的是设置为none时不但没有，还不占有空间，hidden 时占有空间但看不到。前两种都是斜体，而italic 更常见一些。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 10 页 - - - - - - - - - 黄刚创意工作室IT 技术部- 4 - 注意竖直方向上的margin 是会重合的， 比如说上面元素下面的margin 是 30px，下面元素上面的 margin 是 15px，它们之间的margin 是 30px。如果采用第五种方式

9、只给出一个值，则代表所有其他值也是这个。你甚至可以改变整个网页的margin，如 body margin ：0px； 。使用规则比较简单，一次性指定比较简单采用第5 种的排列顺序赋值，除了这种直接赋值方式还有就是采用百分比的形式，若只填一个值则代表所有其他值也是这个。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 10 页 - - - - - - - - - 黄刚创意工作室IT 技术部- 5 - 为了获得一张图片的绝对路径方法是单击图片右键选择属性，然后就可以看到路径ht

10、tp了。如果没有重复属性的话，CSS 默认的是重复。这个背景附着属性是用来控制当鼠标滑动网页的时候，背景图片是否跟着滑动。有三个名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 10 页 - - - - - - - - - 黄刚创意工作室IT 技术部- 6 - 值第一个也是经常用到的。位置可以以具体数值或百分比给出，还有就是关键字定位。指定多个字体的目的是为了让浏览器解析时如果没有第一种采取后面的进行替换操作。名师资料总结 - - -精品资料欢迎下载 - - - - - -

11、 - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 10 页 - - - - - - - - - 黄刚创意工作室IT 技术部- 7 - Bolder 比 bold 程度更深，而lighter 比 normal 要浅。pt（point）指点数， px（pixel ）指像素。相对于你要施加规则的元素的大小，当然medium两边还有几个值。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 10 页 - - - - - - -

12、 - - 黄刚创意工作室IT 技术部- 8 - Normal 是指没有加风格，而small-caps 是指大写，但以前是大写的，加上风格以后会更大一些，如上面的例子。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 10 页 - - - - - - - - - 黄刚创意工作室IT 技术部- 9 - 链接主要有好几种状态，比如访问过的链接，没有访问的链接，鼠标悬停上去会有什么变化等。每一种状态都可以加好多种规则，你自己去设计如a:hover background-color:

13、green; 。a img border ：0这样做的原因是a 元素里的图片或子图片一般来说是有边框值的，设计的时候我们可以去掉不要。从现在开始讲CSS 的冲突问题，这是比较难的地方。因为很多人在写CSS 的时候会遇到类似的问题就是代码验证没有错误，语法没有错误， 但是效果不是你所预料的，大部分都是由于冲突造成的。解决冲突没有统一的办法，解释冲突我们从两个方面来。第一就是CSS 规则的排序问题；第二个就是CSS 具体性的比较。从CSS 的特性来讲就是它遵循一个原则叫哪个规则更具体就更可能采用哪个。冲突的时候它会选择离元素最近的规则来决定风格，不管是嵌入式和链接式的。当出现我们不想要的效果时我们

14、可以用关键字！important 来诊断是否是出现了冲突，当然最后最后 源 文 件 里 别 有 ， 因 为 不 同 的CSS或 浏 览 器 版 本 对 它 的 解 释 是 不 同 的 。 p background-color:pink;color:black和 body p color:yellow就管它们的排序问题，color 始终采用 yellow ，因为这时它有两个元素body 和 p 更为具体。下面看元素和类别哪个更厉害，权重更大些。 同样从具体性来看类别的优先级更高，遵循它的规则。如p.one color:red; 。元素和id 之间的关系是id 更大权重。 id 和类别之间id的

15、权 重 更 大 些 ， 更 具 体 。 嵌 入 到 标 签 里 面 的style规 则 权 重 更 大 ， 更 为 具 体 如style=” color:blue; ” 。接下来介绍一个CSS 开发的非常好的一个工具，它是Firefox 浏览器的一个扩展，在google 上搜索firefox addon 打开 https:/addons.mozilla.org/zh-CN/firefox/。然后在里面搜索web developer，然后安装到Firefox 浏览器。这个增加的工具条可以帮助我们在做CSS 开发的时候更有效的解决问题，更快的找到问题。一个网页从浏览器上看到的样子和用打印机打印出来

16、的外观很有可能就是不一样的。但是通过 CSS 可以对不同的媒体应用不同的规则。CSS 大概支持10 种媒体， 现在说两种主流的一个是打印机一个是电脑屏幕显示。可以在一个区块外面加大括号然后开头写上mediumscreen或 medium print 。 还 有 一 种 比 较 常 用 的 如 和。CSS 其实并不难， 你要做好首先得知道它的原理，到底是怎么回事，然后你要全面去了解或记忆一些属性，可以用在什么地方，可以赋些什么值。当你去做的时候有的问题是你想不到的，反反复复怎么都解决不了这也只有做的时候才会解决。讲一个学CSS 比较官方的名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 10 页 - - - - - - - - - 黄刚创意工作室IT 技术部- 10 - 地方叫 W3C。因特网的标准就是它们这个组织或一群人指定的，应该说是最权威的了。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 10 页 - - - - - - - - -