HTML/CSS 第四章

[h1]学习目标[/h1]

三种样式表的书写位置和优缺点
标签的三种显示模式和转换
复合选择器
背景属性
css的三大特性

[h1]样式表的书写位置[/h1]

样式表可以有三种书写方式，分别分为

内嵌式样式表
外链式样式表
行内式样式表

[h2]内嵌式样式表[/h2]

内嵌式样式表是在html里面嵌套一个style标签，将css语句都写在style标签里面

css语句

复制代码

[h2]外链式样式表[/h2]

单独创建一个后缀名为.css的文件，在html文件里面通过link标签引入css文件

[/code][h2]行内式样式表[/h2][quote]将样式直接写在标签本身上，以属性的形式存在
[/quote][code]

复制代码

[h2]三种样式表总结[/h2]样式表优点缺点使用情况控制范围行内式样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）内嵌式样式表部分结构和样式相分离没有彻底分离较多控制一个页面（中）外链式样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）[h1]标签的三种显示模式[/h1][h2]块级元素[/h2]

可设置宽和高
独占一行
默认宽度是父级标签的宽度
块级元素一般用于包裹其他块级或者行内元素
p这种段落标签不要嵌套块级元素

代表标签：div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article,sectiondisplay:block;

复制代码

[h2]行内元素[/h2]

设置宽高无效
行内标签允许其他的行内标签排一排
尽量不要用行内元素包裹块级元素 a链接除外

代表标签：a,span,b,u,s,i,strong,ins,del,emdisplay:inline

复制代码

[h2]行内块元素[/h2]

行内块标签其实本质上是一种特殊的行内标签（text-align和line-height都可以控制行内块元素）
允许其他的行内元素排一排
可以设置宽高

代表标签：input,imgdisplay:inline-block

复制代码

注：一般实际工作来说标签不需要进行转换，因为大多数情况下都可以选择对应的标签来实现需求行内块较为特殊！！
[h1]复合选择器[/h1]

交集选择器

既又原则例如：p.box {} 既是p标签又有box类名

复制代码

并集选择器

将多个选择器合并在一起例如： div,p,h1 {}

复制代码

后代选择器

空格前面的元素和后面的元素必须是嵌套关系例如：.father .houdai {}

复制代码

子代选择器

> 前面的元素和后面的元素必须是父子关系例如：.father > .son {}

复制代码

[h2]测试题[/h2]

公司首页公司简介公司产品联系我们公司邮箱公司电话左侧侧导航栏登录

复制代码

在不修改以上代码的前提下，完成以下任务：

链接登录的颜色为红色,同时主导航栏里面的所有的链接改为蓝色 (简单)
主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等)
主导航栏里面的一级菜单链接文字颜色为绿色。（难)

[h1]背景[/h1][h2]背景颜色[/h2]

background-color: red;颜色可以设置成十六进制或者 rgb 或者 rgba

复制代码

[h2]背景图片[/h2]

background-image: url(图片路径);

复制代码

[h2]背景平铺[/h2]

background-repeat: 背景平铺;1.repeat 平铺默认的2.no-repeat 不平铺3.repeat-x 水平平铺4.repeat-y 垂直平铺

复制代码

[h2]背景是否滚动[/h2]

background-attachment: 背景是否滚动;1.scroll 默认值图片跟随盒子一起滚动2.fixed 图片不跟随盒子一起滚动

复制代码

[h2]背景位置[/h2]

background-position: 背景位置;1.方位名词 right top left center bottom 书写的顺序不论2.像素如果是像素那么默认在以“当前盒子”的左上角为0 0原点构建一个坐标系第一值是X轴的位置第二个值是Y轴的位置交互的点就是图片开始显示的起始位置多说一嘴： 1、程序里面的坐标系X轴水平向右 Y轴垂直向下 2、注意顺序3.百分比百分比参照的自身盒子的宽高：最终的位置是当前盒子自身的宽高的百分比 - 图片自身的宽高的百分比4.还可以混写混写是需要考虑顺序

复制代码

[h2]背景的简写[/h2]