目标
掌握CSS的语法结构和在网页中的应用
掌握CSS的文本和字体样式
掌握CSS背景样式
一.了解css
定义:
CSS
层叠样式表(Cascading Style Sheet)
优势:
内容与表现分离
网页的表现统一,容易修改
丰富的样式,使页面布局更加灵活
减少网页的代码量,增加网页的浏览速度,节省网络带宽
运用独立于页面的CSS,有利于网页被搜索引擎收录
二.语法规则
例,
选择器 {
声明1;
声明2;
声明3;
……
}
h1 {
font-size:12px;
color:#F00;
}
1.选择器
标签选择器p{font-size:16px;color:red;}
类选择器.second{font-size:20px;color:#096;}
ID选择器#third{font-size:24px;color:black;}
2.优先级
三.在网页中引入css
1.引入方式
内联样式
内部样式表
外部样式表
2.优先级
行内样式>内部样式表>外部样式表
ID选择器>类选择器>标签选择器
四
.字体和文本样式
五.鼠标样式
六.制作京东新闻资讯页
七.背景
使用
背景颜色:background-color:#B70447;
背景图像
图像路径: background-image:url(img/buy.png);
重复方式: background-repeat:no-repeat;
背景定位: background-position:10px 15px;
简写:
background:url(img/buy.png) no-repeat #f9f9f9 10px 15px;
八.伪类
伪类语法:
标签名:伪类名{声明;}
a:hover {
color:#B46210;
text-decoration:underline;
}
总结:
选择器,引入方式,字体样式,文本样式,鼠标样式,背景,伪类