css

css：级联样式表

css定义：修饰网页（html在w3c中是结构化，css在w3c中就是表现化）修饰效果的种类：字体大小，颜色，高度，宽度等等

css应用：一般用于对网页的效果进行修饰美化的工作

css发展史1996发布css1.0 2010发布了css3.0沿用至今

css优势：内容和表现分离；网页的表现统一，容易修改；丰富的样式。，使得页面布局更加灵活；减少网页的代码量，增加网页的浏览速度，节省网络带宽；运用独立于页面的css

css语法：选择器{属性名：属性值；}选择器包含基本选择器和高级选择器，用来获取或者选择html元素{}代表语法体，用来存放css代码。属性名一般是css中的语法，属性值一般是属性的内容或者是范围例如：{background（背景）：red（红色）；color（内容）：blue（蓝色）。；基于w3c标准不建议省略，不胜率也不影响。

css标签：使css的代码在网页中生效；type=text/css代表告诉浏览器当前styel标签中的代码是css代码。           引入css的三种方式：行内样式：在html标签行中引入style属性，并对属性名设置属性值。或者多个属性名设置多个属性名例如：<p style=background:green;color:red;>   </p>

内部样式：在head标签中引入style标签，type=text/css代表告诉浏览器style标签中的是css代码。例如：<style>type=text/css >p{background:black;color:red;}</styel>                                                                                外部样式:利用link标签；rel=stylesheet代表使用的是外部样式表；type=text/css高速浏览器文件中的代码是css代码 href=css/common.css 代表当前html页面引入的是css路径下的common.css文件。例如：<link rel=stylesheet type=text/css href=css/common.css/>

样式优先级：行内>内部>外部 就近原则，谁离html近。谁生效的可能性越大

基本选择器：标签选择器，<style type=text/css>p{color:red;}</style>

类选择器：<style type=text/css>.flower{background:red;}</style>

<p class=flower>aaa</p>

结构伪类选择器：常用的结构伪类选择器的种类：

id选择器：在html中定义id属性在css中使用#id属性值<style type=text/css>#fly{background:red;></style><p id=fly>111</p>

高级选择器：层次选择器：后代选择器：选择div目录下的所有p元素（包含div目录下其他目录里的p元素）

<style>div p{background:red;}</style>         

子选择器：选择div目录只在div目录之下的p元素

<styple>div>p{background:red；}</style>     

相邻兄弟选择器：选择div之后的第一个p元素

<styple>div+p{background:red;}</style>

通用兄弟选择器：选择div之后的所有p元素

<styple>div~p{background:red;}</style>

结构伪类选择器：常用的结构伪类选择器的种类：first-child last-child

匹配某元素的父元素的第一个或者最后一个元素

利用特殊字符-模拟类选择器的作用实现第一个或是最后一个的元素标签

结构：p：first-child{color：；}p：last-child{color：；}

属性选择器

a[target]选择匹配具有target的元素：a[target]{border:1px solid blue;}    <a href=     target= />

a[target =-black]选择匹配具有属性target的a元素，并且属性值为-black：a[target =-black]{border:1px solid blue;}       <a href=     target=-black />{border:1px solid blue;}

a[class^=" abc "]选择匹配元素a，且a元素定义了定义了属性class。其属性值是以abc开头的字符。结构a[class^="abc"]{border:solid;}      <a href="  "target="     -self"class="abc">123456<a/>

a[class$="abc"]选择匹配元素a，且a元素定义了属性class其属性值是以abc结尾的任意字符

结构：a[class$="abc"]{border:solid;}    <a href="   "target="-self"class="abc"/>123456<a/>

a[class*="abc"]x选择匹配元素a，且a定义了属性class，其属性值包括了abc。选择所有class中包含abc的

a[class*="abc"]{border:solid;}<a href="   "target="-self"class="abc"/>123456<a/>