p{color:blue;font-size:40px;}CSSCSS（英文全称：CascadingStyleSheets）层叠样式表是用来表达HTML（标准通用标记语言的一种应用）或XML（标准通用标记语言）的子集）和其他文档式计算机语言。CSS的最新版本是CSS3，它是一种能够真正将网页表现与内容分离的样式设计语言。与传统HTML的性能相比，CSS可以在像素级精确控制网页中对象的位置和排版，支持几乎所有的字体大小和样式，具有编辑网页对象和模型样式的能力，可以进行初步的处理。交互设计是目前性能最好的基于文本显示的设计语言。CSS可以根据不同用户的理解能力来简化或优化文字，对不同人群有很强的可读性。CSS是用来美化网页的，没有网页CSS是没有用的，所以CSS需要依赖HTML以显示其功能。CSS基本用法CSS基本语法CSS样式由选择器和一个或多个用分号分隔的样式声明组成。每个声明的样式都包含一个CSS属性和属性值。[外链图片传输失败，源站可能有防盗链机制，建议保存图片直接上传(img-FmNcbENy-1605579325994)(/QQ截图20200205160701.png)]selectorname{attribute:属性值；......}div{background-color:red;}注意：css语句要以分号;结尾，并用{}括起来。建议一行写一个属性。如果值是几个单词，需要在值后面加上引号，例如font-family:"agencyfb";comment多行注释：/*这里的内容是注释*/CSS的使用1.内联样式内联样式定义了具体html元素的style属性中的样式。内联写的CSS耦合度高，只适用于当前元素。它在设置元素的样式时更常用。这是一段文本
在当前元素上使用style属性声明。style是一个内联样式属性；color为颜色属性；red是颜色属性值；font-size为字体大小属性；50px是一个字体大小属性值代码区，通常的做法是在标签中嵌套
p{color:blue;font-size:40px;}.3.导入外部样式文件在实际开发中，经常会用到引入外部样式文件，可以让HTML页面更加清晰，达到更好的复用效果。style.cssp{color:green;font-size:30px;}test.htmlrel:rel属性指定当前文档和关系链接文档之间。样式表：文档的外部样式表。很多时候，大量的HTML页面使用相同的CSS。然后就可以将这些CSS样式保存在一个单独的.css文件中，然后通过elements导入。注意：当有多个样式时，记住前置规则，越精确越好。CSS选择器在CSS中，选择器是一种用于选择需要设置样式的元素的模式。CSS选择器有很多，掌握常用的即可；基本选择器通用选择器选择所有**{......}*{颜色：橙色;}元素选择器选择指定标签元素名称{......}p{颜色：红色;font-size:20px;}ID选择器选择指定id属性值的元素set##id??attributevalue{......}#p1{font-weight:bold;}Class选择器选择指定id属性值的元素classattributevalueset..classattributevalue{......}.hidden{display:none;}组选择器当几个元素有相同的style属性时，可以一起调用一个声明，分离选择器1，选择器2,...{......}h2,#pre1{颜色：橙色；font-style:italic;}CSSstylepriority等级根据选择器的准确度/权重来决定。常用权重如下。权重越大，优先级越高元素选择器：1类选择器：10Id选择器：100内联样式：1000组合选择器CSS组合选择器说明了两个选择器之间的直接关系。CSS组合选择器包括各种简单选择器的组合。CSS中有四种组合：后代选择器（以空格分隔）、子元素选择器（以大于号分隔）、相邻兄弟选择器（以加号分隔）、普通兄弟选择器（由波浪线分隔）。后代选择器（派生选择器）用于选择指定标签元素下的后代元素，以空格分隔Selector1Selector2{......}.foodli{border:1pxsolidred;}Food
水果Vegetables子元素选择器用于全选指定label元素的第一代子元素，用大于号分隔selector1+selector2{......}#d+div{border:1pxsolidred;}html代码同上NeighboringSiblingSelector选择紧跟在具有相同父元素的另一个元素之后的元素。用加号分隔选择器1+选择器2{......}#d+div{border:1pxsolidred;}相邻的兄弟选择器1 普通兄弟选择器紧接着选择所有元素元素，并且都有相同的父元素，由波浪号选择器1~选择器2{......}li~li{background-color:yellow;}
