WEB前端技术基础(第三章:css-网页美化的衣装-上)
目录
一、css概念及特点
概念
特点
二、CSS基本语法、引入及三种选择器
基本语法
四种引入方式
三种选择器
CSS选择器声明-扩展
三、文档结构、单位、颜色及文本与文字
文本部分
文档结构
单位
颜色
文本部分
布局
字体
简化font
四、背景与超链接
编辑
练习
五、列表与表格
列表属性
表格属性
奇偶选择器
练习
六、设置图片样式
小结
一、css概念及特点
概念
- 层叠样式表，通过css可以对网页的字体、颜色、背景等属性进行设置，同样可以结合div对网页进行布局。
- 使用css控制网页格式的方法有行内法、内嵌式、链接式和导入式法
- CSS3是最新的CSS标准，它拆分和增加了盒子模型、列表模块、语言模块、背景边框、文字特效和多栏布局等等，并且增加了动画属性和3D属性，可以让我们开发出有立体感的更加炫酷的Web网页
- CSS3在兼容上做了很大的功夫，已完全向后兼容
- 传统HTML的缺点
- HTML主要侧重于定义内容，比如<p>表示一个段落，<h1>表示标题，而并没有过多设计HTML的排版和界面效果
- 为了解决HTML排版和界面效果的局限性的问题
特点
CSS文件是文本文件，只要理解了HTML就可以掌握它
CSS的优势
1.表现和内容相分离
CSS通过定义HTML标记的样式，使得页面内容和显示效果相分离，简化了网页格式设计，使得对网页格式的修改更方便
2.加强了网页的表现力
CSS样式属性提供了比HTML更多的格式设计功能。例如，去掉网页超级链接的下划线、给文字添加阴影等
3.增强了网站风格的一致性
CSS样式定义到样式表文件中，在多个网页中同时应用样式表文件中的样式，确保了多个网页具有一致的格式
二、CSS基本语法、引入及三种选择器
基本语法
选择器{属性1:属性值1;属性2:属性值2;...
}/*这是css注释的方法*/选择器表示样式的名称
选择器为H1，H1在HTML中为一级标题标记，因此重新定义了标题标记的样式，网页中所有
<H1>标记的样式发生了变化
属性是要设置的元素的格式，如字体，字号，颜色等
四种引入方式
- 行内法
<html标签 style="属性1:属性值1;属性2:属性值2;...">- 内嵌式
<style type="text/css"></style>- 链接式
<link rel="stylesheet" type="text/css" href="style.css" />- 导入式
<style type="type/css"> @import url(外部样式url); </style>行内优先级最高，内嵌式和链接式常用
三种选择器
- HTML标记选择器
- class选择器
- ID选择器
CSS选择器声明-扩展
三、文档结构、单位、颜色及文本与文字
文本部分
文档结构
单位
颜色
文本部分
布局
字体
简化font
四、背景与超链接
a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后
练习
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>新闻页面</title> <!--内嵌样式表，定义层次选择器及ID选择器 1-定义ID选择器 #newstitle:设置背景图像为bg1.gif,在水平方向平铺 2-定义层次选择器#newstitle h1,设置其字体为加粗、16px、幼圆，并垂直居中对齐 --> <style>#newtitle{background: url(images/bg1.gif) repeat-x;}#newtitle h1{font: bold 16px "幼圆";text-align:center;} </style> </head><body><div id="newtitle"><!----新闻标题----><h1>美国拟对多个国家和地区加征关税，以及相关国家的应对措施</h1></div></body> </html>
五、列表与表格
列表属性
表格属性
奇偶选择器
练习
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平导航菜单</title><style>div{width: 400px;height: 60px;margin: 0 auto;}ul {width: 380px;height: 50px;list-style: none;background-color: antiquewhite;}li {float: left;padding: 15px;}a {text-decoration: none;color: blue;}a:hover {color: red;}</style> </head> <body><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li></ul> </body> </html>
六、设置图片样式
小结
