哈喽，大家好前面一篇给大家分享了网页设计中， HTML标签语言的内容分享，今天接着分享CSS，层叠样式表的知识内容。一、CSS简介：CSS是什么？CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。我们知道，HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。我们已经在HTML入门教程中的前端技术简介这一节详细讲解了这三者的区别，大家可以回去查看一下，下面有文字链接。Web网页设计，HTML语言最全知识点总结（超级详解）图文并茂HTML、CSS和JavaScript的关系如下：“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”二、CSS内容：1.css的引入方式在HTML中引入CSS共有3种方式：（1）外部样式表； （2）内部样式表； （3）内联样式表；下面我们详细为大家介绍这3种CSS引入方式。一、CSS的3种引用方式1、外部样式表外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。 当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。 外部样式表在单独文件中定义，并且在标签对中使用link标签来引用。 举例：【说明】：外部样式表都是在head标签内使用link标签来引用的。2、内部样式表内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在标签对是放在标签对内的。 举例：浏览器预览效果如下：用记事本输入的代码呈现的效果如下<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><!–这是内部样式表，CSS样式在style标签中定义–><style type="text/css">p{color:Red;}</style></head><body><p>智能化弱电工程</p><p>智能化弱电工程</p></body><html>【说明】：对于内部样式表，CSS样式在<style>标签内定义，而<style>标签必须放在<head>标签内。3.内联样式表内联样式表，也是把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在<style></style>标签对中定义，而是在标签的style属性中定义。【举例】：代码如下：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body><p style="color:Red; ">智能化弱点工程分享</p><p style="color:Red; ">智能化弱点工程分享</p><p style="color:Red; ">智能化弱点工程分享</p></body><html>编辑代码后呈现的效果如下：2.元素的id和classid和class是HTML元素中两个最基本的公共属性。一、元素的id属性id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值，CSS选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。【举例】：代码如下——————————————————<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><link href="css/css_reset.css" rel="stylesheet" type="text/css" /></head><body><div id="first">智能化弱点工程分享</div><p id="first">智能化弱点工程分享</p></body></html>————————————————【说明】：上面HTML代码是错误的，因为在同一个HTML页面中，不允许出现两个相同的id。不过要注意一下，在不同页面是可以出现相同id的元素。二、元素的class属性class，顾名思义，就是“类”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class具有相同的CSS样式。如果你要为两个元素或者两个以上元素定义相同的样式，建议使用class属性。【举例】：————————————————<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><link href="css/css_reset.css" rel="stylesheet" type="text/css" /></head><body><div class="first">智能化弱点工程分享</div><p class="first">智能化弱点工程分享</p></body></html>————————————————说明：这段HTML代码是正确的，因为在同一个HTML页面中，允许相同的元素或者不同的元素设置相同的class属性，以便我们可以统一对具有相同的class属性的元素定义相同的CSS样式。id和class就像你的身份证号和姓名，身份证号是全国唯一的，id号也就是唯一的，class（类名）就是姓名，两个人的姓名就有可能一样。此外，还需要注意一下：（1）一个标签可以同时定义多个class；（2）id也可以写成name，区别在于name是HTML中的标准，而id是XHTML中的标准，现在网页的标准都是使用id，所以大家尽量不要用name属性；3、CSS选择器我们先看一段代码：————————————————<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>什么叫CSS选择器？</title></head><body><div>智能化弱点工程分享</div><div>智能化弱点工程分享</div><div>智能化弱点工程分享</div></body></html>————————————————浏览器预览效果如下：如果我们只想要第二个div文本颜色为红色，怎么办呢？我们必须通过一种方式来“选中”第二个div（因为其他的div不能选中），然后把它的CSS属性颜色color改为红色，这样才行。像这种把某一个你想要的标签选中的方式就是所谓的“选择器”，也就是说选择器就是一种选择元素的方式。选择器，说白了就是用一种方式把你想要的那一个标签选中！把它选中了，你才能操作这个标签的CSS样式。这样够简单了吧。CSS有很多把你所需要的标签选中的方式，这些不同的方式就是不同的选择器。选择器的不同，在于它选择方式不同，但是他们的目的都是相同的，那就是把你需要的标签选中，然后让你定义该标签的CSS样式。当然，你也有可能会用某一种选择器代替另一种选择器，这仅仅是由于选择方式不一样罢了，目的还是一样的。CSS选择器的格式：代如下————————————————选择器{样式属性1:取值1;样式属性2:取值2;……}一、基本选择器1、元素选择器元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。【基本语法格式】：————————————————————<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><style type="text/css">div{color:red;}</style></head><body><div>智能化弱点工程分享</div><p>智能化弱点工程分享</p><span>智能化弱点工程分享</span><div>智能化弱点工程分享</div></body></html>在浏览器预览效果如下：————————————————【分析】：“div{color:red}”表示把页面所有的div元素选中，然后为所有的div元素设置颜色color为红色。在这里我们可以看出，元素选择器就是选择相同的元素，而不会选择其他元素，例如这段代码中的p元素和span元素就没有被选中，因此它们的内容就没有变成红色。2、id选择器我们可以为元素设置一个id，然后针对这个id的元素进行CSS样式操作。注意，在同一个页面中，不允许出现两个相同的id，这个就像没有哪两个人的身份证号是相同的道理一样。【基本语法格式】：【说明】：id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表明这是一个id选择器。【举例】：————————————————<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><style type="text/css">#lvye{color:red;}</style></head><body><div>智能化弱电分享</div><div id="lvye">智能化弱电分享</div><div>智能化弱电分享</div></body></html>————————————————【分析】：“#lvye{color:red;}”表示选中id为lvye的元素，然后为这个元素设置CSS属性“color:red;”。选择器为我们提供了一种选择方式。如果我们不使用选择器，就没办法把第二个div选中。3、class选择器class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作。【基本语法格式】：【说明】：class名前面必须要加上前缀“.”（英文点号），否则该选择器无法生效。类名前面加上“.”，表明这是一个class选择器。【举例1】：————————————————————<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><style type="text/css">.lv{color:red;}</style></head><body><div>智能化弱点分享</div><p class="lv">智能化弱点分享</p><span class="lv">智能化弱点分享</span><div>智能化弱点分享</div></body></html>————————————————【效果呈现如下】：【分析】：“.lv{color:red;}”表示选中class为lv的所有元素，然后为这些元素设置CSS属性“color:red;”。p元素和span元素是两个不同的元素，但是我们可以为这两个不同的元素设置相同的class，这样就可以同时为这两个不同的元素设置相同的CSS样式了。【举例2】：————————————————<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><style type="text/css">.lv{color:red;}</style></head><body><div class="lv">智能化学习</div><div class="lv">智能化学习</div><div>智能化学习</div></body></html>————————————————代码输入呈现效果如图：【分析】：虽然这个HTML页面有3个div元素，但是我们为前两个div元素设置相同的class，然后设置相同class的元素颜色为红色。因此，第3个div层内容不会变成红色，因为它不属于class="lv"，它没有被“选中”。4、子元素选择器子元素选择器，就是选中某个元素下的子元素，然后对该子元素设置CSS样式。【基本语法格式】：【说明】：父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。【举例】：————————————————说明：父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。举例：——————————————————————<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><style type="text/css">#father1 div{color:blue;}#father2 #p1{color:red;}</style></head><body><div id="father1"><div>弱电智能化</div><div>弱电智能化</div></div><div id="father2"><p id="p1">智能化学习</p><p id="p2">智能化学习</p><span>智能化学习</span></div></body></html>———————————————————————在浏览器预览效果如下：————————————————分析：“#father1 div{…}”表示选择“id为father1的元素”下的所有div元素；“#father2 #p1{…}”表示选择“id为father2的元素”下的子元素，其中子元素的id为#p1。因为“id为father2的元素”下的第2个p元素没有被选中，所以第2个p元素内容没有变成红色。5、相邻选择器相邻选择器，就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。语法：举例：————————————————<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><style type="text/css">#lv+div{color:red;}</style></head><body><div>学习智能化</div><div id="lv"><p>智能化学习</p></div><div>智能化学习</div><div>智能化</div></body></html>————————————————分析：“#lv+div{…}”表示选择“id为lv的元素”的相邻的下一个兄弟元素div，也就是第3个div元素。6、群组选择器群组选择器，就是同时对几个选择器进行相同的操作。常常，我们的CSS 样式中会有好几个地方需要使用到相同的设定时，一个一个分开写会是一件满累人的工作，重覆性太高且显得冗长，更不好管理….在CSS 语法的基本设定中，就可以把这几个相同设定的选择器合并在一起，原本可能是写了7~8 行相同的语法，合在一起后就只要短短的一小行，怎么看都让人心旷神怡啊~语法：说明：对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效。举例：————————————————<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><style type="text/css">h3,div,p,span{color:red;}</style></head><body><h3></h3><div>天天向上</div><p>好好学习，天天向上</p><span>好好学习，天天上学</span></body></html>————————————————分析：“h3,div,p,span{color:red;}”表示选中所有的h3元素、div元素、p元素和span元素，然后设置这些元素的字体颜色为red。————————————————————————————————<style type="text/css">h3,div,p,span{color:red;}</style>————————————————————————————————其实上面这段代码等价于以下代码：————————————————————————————<style type="text/css">h3{color:red;}div{color:red;}p{color:red;}span{color:red;}</style>——————————————————————————现在大家知道使用群组选择器的效率有多高了吧！4、文本样式总结表1 CSS文字属性一、字体类型font-family语法：font-family:字体名;说明：字体名指的是“微软雅黑”、“宋体”、“Times New Roman”等。举例：“font-family:微软雅黑;”二、字体大小font-size语法：font-size:像素值;说明：初学者尽量使用像素来作为单位，因此我们不会在初学者阶段介绍太多的其他单位，比如百分比、em等。举例：“font-size:15px;”三、字体颜色color语法：color:关键字/颜色值;说明：color共有2种取值，一种是关键字取值，例如“color:red;”；另外一种是十六进制颜色值，例如“color:#F1F1F1;”。对于十六进制颜色值，我们可以使用绿叶学习网的“在线调色板”选取你喜欢的颜色。举例：“color:blue;”四、字体粗细font-weight语法：font-weight:取值;说明：对于中文网页来说，font-weight属性一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）。举例：“font-weight:bold;”五、字体斜体font-style在CSS中，使用font-style属性来定义字体倾斜效果语法：font-style:取值;说明：font-style属性的取值如下表：————————————————举例：“font-style:italic;”六、CSS注释语法：/*注释的内容*/说明：“/*”表示注释的开始，“*/”表示注释的结束。1、border-width语法：border-width:像素值;说明：在CSS初学者阶段，我们都是建议采用像素做单位2、border-styleborder-style属性用于设置边框的外观，例如实线边框和虚线边框。语法：border-style:属性值;说明：虽然border-style属性值很多，但是大部分我们都用不上。一般情况下，我们用到solid和dashed这两个属性值就够了，别浪费时间去记忆其他属性值，不听老人言，吃亏在眼前呀！3、border-colorborder-color属性用来定义边框的颜色。语法：border-color:颜色值说明：对于颜色的取值，请使用前端神器“在线调色板”来选取。二、边框属性简洁写法设置一个元素的边框就要设置3个属性：border-width、border-style和border-color。如下：这种写法费时费力，导致代码量多。因此我们边框CSS样式有一个简洁的写法：border:1px solid gray;三、CSS边框局部样式1、上边框border-topborder-top-width:1px;border-top-style:solid;border-top-color:red;简洁写法：border-top:1px solid red;2、下边框border-bottomborder-bottom-width:1px;border-bottom-style:solid;border-bottom-color:orange;3、左边框-leftborder-left-width:1px;border-left-style:solid;border-left-color:blue;简洁写法：border-left:1px solid blue;4、右边框border-rightborder-right-width:1px;border-right-style:solid;border-right-color:red;简洁写法：border-right:1px solid red;下期我们接着继续分享之后的内容，敬请期待中。。。。。。
本文出自快速备案，转载时请注明出处及相应链接。
