企业官网建设流程全解析

1.组成：结构+表现+行为

CSS编写位置

1.行内样式(键/名值对，不推荐大量使用)

CSS复合选择器1

1.交集选择器【且关系】（选中同时符合多个条件的元素）：
p.beauty{color:blue;}表示选中类名为beauty的p元素
.rich.beauty{color:green;}表示选中类名包含rich和beauty的元素
【有标签名，标签名必须写在前面】
2.并集选择器【或关系】（选中多个选择器对于的元素）：

CSS与HTML之间的关系

1.父元素：直接包含某个元素的元素，就是该元素的父元素
2.子元素：被父元素直接包含的元素
3.祖先元素：父亲的父亲…,一直往外找，都是祖先
4.后代元素：儿子的儿子…一直往里找，都是后代
5.兄弟元素：具有相同父亲的元素，互为兄弟元素

CSS复合选择器2

1.后代选择器
ul li{}表示ul中的li
“空格”表示“中的”
2.子代选择器
div > a表示div的儿子a

3.兄弟选择器
相邻兄弟选择器：div+p表示与div后紧紧相邻的p（向下看）

通用兄弟选择器：div~p表示选中div后所有的兄弟p元素


4.属性选择器
第一种写法：【属性】{}表示选中具有属性的元素

第二种写法：【属性=“ ”】{}表示选中具有属性且属性值为特定的元素

第三种写法【属性^=“a”】表示选中所有属性值以a开头的元素

第四种写法：【属性$=" u"】表示选中所有属性值以u结尾的元素

第五种写法：【属性*=‘‘u’’】表示选中所有属性值包含u的元素

伪类选择器

1.什么是伪类？
回答：很想类，但不是类（class），是元素特殊状态的一种描述
2.a:link表示没有访问过的a元素
a:visited表示访问过的a元素
【这两个只适用超链接a元素】
*a:hover{color:skyblue}*表示选中的是鼠标悬浮状态（鼠标放上不点击 ）的a元素
a:active{}表示选中的是鼠标激活状态（点击且不松手）的a元素
【这两个适用所有元素
ex span:hover/active{}】
【这几个顺序不要变】
3.动态伪类
input:focus{}表示获取焦点的元素
focus只有表单类元素（可输入：input,select）才能使用
4.结构伪类1
弟一种：*div>p:first-child{}*表示选中的是div的第一个儿子p元素

第二种：


第三种：div>p:first-child


注：是标签滚动条

第四种：div p:first-child表示div的后代p的第一个元素


第五种：
p:first-child表示选中的p元素，并且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子
5.结构伪类2
*第一种：**div>p:last-child{}*表示选中的是div的最后一个儿子p元素（同结构伪类1）
***第二种：***div>p:nth-child(n填数字)表示是选中的是div的第n个儿子p元素

第三种div>p:nth-child(-n+5)表示选中前五个
从n=0开始算起
【必须是an+b的形式】
第四种div>p:first-of-type表示选中div的p元素中的第一个
第五种div>p:last-of-type表示选中div的p元素中的最后一个
第六种div>p:nth-of-type(n)表示选中div的p元素中的第n个
6.结构伪类3（不常用）
第一种div>p:nth-last-type(n)表示选中div中倒数第n个（所有兄弟）
第二种div>p:nth-last-of-type(n)表示选中div的p元素中的倒数第n个（所有同类型的兄弟）
第三种span:only-child表示选中的是没有兄弟的span元素

第四种span:only-of-type表示选中的是没有同类型兄弟的span元素


第五种
：root表示选中的是html的根元素


第六种div:empty表示选中的是没有内容的div元素

作业

代码

效果图