之前两次笔记我们简单的介绍了一下HTML，接下来我们学习一下css，就是我们之前所说，结构、表现、行为中的表现。我们发现之前做的html好像不是很美观吧。。。那什么是表现呢，简单来说，我们的图片大小、字体大小、背景颜色等所有外在的东西，全都叫做表现，由我们的css负责。
层叠样式表(Cascading Style Sheets) 接下来我们说下如何编写我们的CSS样式。 内敛样式（可以将css样式编写到元素的style属性当中）：< p style=“color: red;font-size: 40px;” > 锄禾日当午，汗滴禾下土。< /p >这样编写在p标签内部就是内敛样式，简单说来内联样式就是将我们的样式直接编写到我们的style属性当中，这种样式我们称之为内联样式，内联样式只对当前元素内容起作用。内敛样式不方便我们重复使用。 但是此时我们的css和html都写在一起了，这其中的color: red;font-size: 40px;就是css，我们说一个优秀的页面要求我们的结构、表现、行为分离！！！但是现在很明显不满足要求。所以内敛样式属于结构与表现的耦合，不方便后期维护，不推荐使用！！ 那说了这么多，不让我们用，我们到底要怎么写我们的CSS呢？让我们看看。 我们推荐使用的内部样式能在这一个页面中使用，但是如果我们想在其他页面使用应该怎么办呢？来看看第三种样式吧！！！ 除了以上两种方式，还可以将我们的CSS写到外面去。可以在文件夹中新建一个css文件，将我们之前内部样式表style中的内容放进去。然后我们只需要将style.css文件进入到我们的页面中。 那怎么引入呢？通过link标签！！！ link标签中的rel、type都是固定的照抄就完事，href写一个相对路径就可以了。这样就能将我们上面的style.css文件引入到我们的网页了。让我们来看一下效果。 没问题！！！将我们的css统一编写到外部样式表中，完全将我们的结构和表现分离。分离方式更彻底，可以是我们的样式表在不同页面中使用，最大限制的使我们的样式可以复用。而且不仅仅这样，将样式写在外部样式表中，通过link引入，可以利用浏览器的缓存，加快访问速度提高用户体验！！！ 解释一下，为什么可以达到这样的效果。假设我们目前有三个网站 A B C 这三个网站都引入了同一个css文件，那么第一次访问A网站的时候可能会慢一点，但我们打开B网站的时候，它的css文件已经在我们访问A文件的时候缓存好了，所以我们打开B网站、C网站的速度都会有所提高。就是这样提高了我们的用户体验！！！ 所以，在开发中，我们最推荐使用的就是外部样式表！！！ 首先我们发现，style标签中要使用我们css的语法。比如上面的注释/* … */已经和html的不一样了。 而我们css语法主要就是选择器和声明块。 通过选择器可以选择页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素中。 假设还是上面那段代码，**现在我们要为id为p1的元素，class为p2的元素，还有h1，同时设置背景颜色为黄色。**我们要怎么做呢？？？ 这样么？？？确实能达到效果，但不得不说有点缺心眼Σ(oﾟдﾟoﾉ)… 那就需要我们的选择器分组。 这样就能简介的完成我们的代码了。 注意上面小框中的代码，尽量不要这么使用。 对于id选择器来说，不建议使用复合选择器。一般是类选择器才用。 有后代就有祖先，有儿子就有父亲。 那么我们先来看一下这些元素之间的关系。 注意我们的子元素选择器不兼容IE6. 另外一些： :first-child:可以选中第一个子元素。 :last-child:可以选中最后一个子元素。 :nth-child（x）:可以选中第x（任意）个子元素。该选择器后面可以指定一个参数，指定选中第几个元素。even表示偶数位置的子元素，odd表示奇数位置的子元素。 :first-of-type、:last-of-type、:nth-of-type:与上面的非常类似，前面三种是在所有子元素中排列，而后面三种是在当前类型的子元素中排列。（child是大排行、type是小排行） 给链接定义样式: 1、正常链接: a:link 。 2、 访问过的链接：*a:vidited(只能定义字体颜色)。（浏览器是通过历史记录来判断是否访问过！！！由于涉及了用户隐私问题，visited只能设置字体颜色） 3、鼠标划过的链接：*a:hover。 4、 正在点击的连接：*a:active。 说属性选择器前我们先说一个title属性。 当我们把鼠标移至文字上的时候会出现title标签中的属性值就会显示（作为提示文字）。 当我们想要为span后的一个p元素设置一个背景颜色为黄色时要怎么写呢？？？span是p他哥，他俩就是兄弟，要用兄弟元素选择器。 当我们需要将所有p元素设置黄色背景，除了class为hello的时，需要使用否定伪类。 声明块紧跟在选择器后面，并且用{}括起来，声明块中其实就是一组一组的名值对结构。 例如:“color:red” 一组一组的名值对我们称之为声明。在一个声明块中可以写多个声明，多个声明之间使用;来隔开,声明的样式名和样式值之间使用:来连接。样式名1:样式值1; 样式名2:样式值2; … 说一下我们的块元素和内联元素。 需要注意的是： 其实严格来说h5已经解除了块元素和内联元素，它用了一个复杂的内容模型来解析，但目前我们没有必要去记忆啦。。。
文章目录
CSS简介
CSS样式编写
1、内联样式
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> </head> <body> <p style="color: red;font-size: 40px;">锄禾日当午，汗滴禾下土。</p> <p>谁知盘中餐，粒粒皆辛苦。</p> </body> </html>= 
2、内部样式
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> p{ color: red; font-size: 40px; } </style> </head> <body> <p>锄禾日当午，汗滴禾下土。</p> <p>谁知盘中餐，粒粒皆辛苦。</p> </body> </html> 
3、外部样式
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>锄禾日当午，汗滴禾下土。</p> <p>谁知盘中餐，粒粒皆辛苦。</p> <p>锄禾日当午，汗滴禾下土。</p> <p>谁知盘中餐，粒粒皆辛苦。</p> </body> </html> 
CSS语法
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> /* css的注释，作用和我们的html注释类似，只不过必须编写在style标签中，或者css文件中。 选择器：通过选择器可以选择页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素中。 声明块：声明块紧跟在选择器后面，并且用{}括起来，声明块中其实就是一组一组的名值对结构。 例如:"color:red;"一组一组的名值对我们称之为声明。在一个声明块中可以写多个声明，多个声明之间使 用;来隔开,声明的样式名和样式值之间使用:来连接。 */ p{ color: red; font-size: 40px; } </style> </head> <body> <p>今天天气真不错，PM2.5也就500！</p> </body> </html> 选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常用选择器</title> </head> <style type="text/css"> p{ color: red; } h1{ color: blue; } #p1{ font-size: 40px; } .p2{ color: purple; } .hello{ font-size: 50px; } </style> <body> <h1>悯农</h1> <p id="p1">锄禾日当午</p> <p class="p2 hello">锄禾日当午</p> <p class="p2">锄禾日当午</p> <p>锄禾日当午</p> </body> </html>
常用的选择器
元素选择器
id选择器
类选择器
#p1{ background-color: yellow; } .p2{ background-color: yellow; } h1{ background-color: yellow; }
#p1,.p2,h1{ } p#p1{ background-color: red; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div span{ color: greenyellow; } </style> </head> <body> <div id=""> <span>我是div标签中的span</span> <p><span>我是p标签中的span</span></p> </div> <span>我是body中的span元素</span> </body> </html> 
子元素选择器
伪类选择器
有4个伪类可以让你根据访问者与该链接的交互方式，将连接设置成4中不同的状态。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*为没访问过的连接设置为黄绿色。*/ a:link{ color: yellowgreen; } </style> </head> <body> <a href="http://www.baidu.com">访问过的链接</a> <br /> <a chref="http://www.baidu123456.com">未访问过的链接</a> </body> </html> 
... p:hover{ background-color: yellow; } ... <p>我是一个p标签</p> ... 
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 为p中的第一个字符设置特殊的样式 */ p:first-letter { color: red; font-size: 20px; } /*为p中的第一行设置背景颜色为黄色*/ p:first-line { background-color: yellow; } /* * before表示元素最前面的部分 * 一般before都需要结合一个属性content一起使用。 * 通过content可以向before或after添加一些内容。 */ p:before{ color: blue; content: "我会在最前面"; } p:after{ color: orange; content: "我会在最后面"; } </style> </head> <body> <p> 我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签 </p> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> </head> <body> <p title="我是title中的文字">我是一个段落</p> </body> </html> 
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> <style type="text/css"> [title="hello"]{ background-color: yellow; } </style> </head> <body> <p title="我是title中的文字">我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p title="hello">我是一个段落</p> </body> </html> 
... <span>我是一个span</span> <p>我是一个p</p> ... span+p{ background-color: yellow; }
... <p>我是一个p标签</p> <p>我是一个p标签</p> <p class="hello">我是一个p标签</p> <p>我是一个p标签</p> <p>我是一个p标签</p> ... p:not(.hello){ background-color: yellow; }
声明块
块和内联元素(html)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>块元素和内联元素</title> </head> <body> <div style="background-color: red; width:200px;"> 我是一个div </div> <div style="background-color: yellow; width:200px"> 我是一个div </div> <hr /> <span id=""> 我是一个span </span> <span id=""> 我是一个span </span> </body> </html>
<div> <span>块中包含内联</span> </div> <span> <div>内联中包含块</div> </span>
之前的笔记
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
