内部样式表

<a href="#"站位
id 定义元素标签的唯一标识
内部样式表
 <style type="txst/css">
      p{
            color: xxx ；#(表示自己所需颜色）
            font-size :20px  分号结束符
        }
<style>
<link rel="stylesheet" type="text/css" href="css/style.css">

css注释

/*
 */   css
   ctrl +/  注释的快捷键
  ctrl+shift+/ 表示多行注释
  ctrl +d   复制一行

块元素 独占一行 主要做页面布局 常用块元素 div p h1~h6 ul li......... 块包含内联 a 除外 他
可以包含所有的元素
a 标签可以包含任意块 它本身除外
p元素 不包含别的块 包含span 只能放内联里
内联元素 （行内元素） 常见 span a img iframe 之战自身大小的元素 span标签显示一次排序 span给选中一个标签设样式的

所有的元素都可以加 （id）
background-color背景颜色width

元素选择器：
语法：标签名（）
 id选择器 
语法 ：#   在p前面加#号
通关元素的id值来选择元素
 类选择器：
.class属性值{}  在p前面加点（.）
可以通过class的属性值来选择元素
.hello
选择器分组（并既选择）：
选择器1，..........选择器n{}
统配选择器：
选择页面中的所有元素 *{}
复合选择器(交集选择器)
选中多个选择器

作业

第一关 plate ， （plate元素）
第二关 bento ， （bento元素）
第三关 #fancy ， （id为fancy的元素）
第四关 plate apple ， （plate祖先元素下的apple后代元素）
第五关 #fancy pickle ， （id为#fancy的祖先元素下的pickle后代元素）
不第六关 .small ， （组为small的元素）
第七关 orange.small ， （组为small的orange元素）
第八关 bento>orange.small ， （bento父元素下的组为small的orange子元素）
第九关 plate,bento,div ， （plate,bento兄弟元素在div元素中）
第十关 * ， （代表所有元素）
第十一关 plate> ， （plate父元素的所有ziyuansu）
第十二关 plate + apple ， （兄弟元素选择器，plate元素的后一个元素）
第十三关 bento~pickle ， （兄弟元素选择器,bento元素后的多个pickle元素)
第十四关 plate>apple ， (plate父元素下的apple子元素)
第十五关 plate orange:first-child ， (子元素选择器，plate元素下的第一个orange元素)
第十六关 plate :only-child， （所有plate元素下的元素）
第十七关 #fancy :last-child,pickle:last-child ，（id为fancy的元素的最后一个和pickle元素的最后一个）
第十八关 div plate:nth-child(3)，（div元素中的第三个plate元素）
第十九关 div bento :nth-last-child(4) ，（div元素中倒数第四个bento元素）
第二十关 apple:first-of-type （第一个apple元素）
第二十一关 plate:nth-of-type(even) ，（所有偶数个的plate元素）
第二十二关 plate:nth-of-type(3),plate:nth-of-type(5) ，（plate元素下的第3个和第5个元素）
第二十三关 plate apple.small:only-of-type ，（plate元素下满足apple.small元素的唯一一个元素）
第二十四关 orange.small:last-of-type,apple.small:last-of-type ，（是orange.samll和apple.small元素的最后一个元素）
第二十五关 bento:empty ， （bento元素里没有包括额外元素）
第二十六关 apple:not(.small) ，（apple里没有组是.small的元素)