目录一、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注释的方法*/选择器表示样式的名称选择器为H1H1在HTML中为一级标题标记因此重新定义了标题标记的样式网页中所有H1标记的样式发生了变化属性是要设置的元素的格式如字体字号颜色等四种引入方式行内法html标签 style属性1:属性值1;属性2:属性值2;...内嵌式style typetext/css/style链接式link relstylesheet typetext/css hrefstyle.css /导入式style typetype/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-equivContent-Type contenttext/html; charsetutf-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 idnewtitle!----新闻标题---- h1美国拟对多个国家和地区加征关税以及相关国家的应对措施/h1 /div /body /html五、列表与表格列表属性表格属性奇偶选择器练习!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 lia href#首页/a/li lia href#产品/a/li lia href#服务/a/li lia href#关于我们/a/li lia href#联系我们/a/li /ul /body /html六、设置图片样式小结