《CSS总结》由会员分享,可在线阅读,更多相关《CSS总结(25页珍藏版)》请在金锄头文库上搜索。
1、CSS样式总结,CSS样式基本语法CSS选择器CSS属性值在网页中应用CSSCSS盒模型,Selector property : value ; ,举例:,通配选择器,标记选择器,类选择器,id选择器,CSS选择器,css选择器, *color:green;font-size:14px;font-family:黑体,华文行楷,宋体; 我是标题1 我是标题2 我是段落 , h2color:red;font-size:24px; 我是标题1 我是标题1 我是标题2 我是标题2,.a14color:blue;font-family:隶书; .a15color:#000;font-size:50px;
2、font-style:italic; 我是标题1-OK 我是标题1 我是标题2-很OK 我是标题2 我是标题2-OK, #boxwidth:600px;border:2px solid #f00; 我是标题1-OK 我是标题1 我是标题2-很OK 我是标题2 我是标题2-OK 我是标题2 我是段落 我是段落,注意,a:link a:visited a:hover a:active,超链接默认样式,访问过的链接样式,鼠标经过链接时的样式,鼠标按下链接时的样式,与超链接相关的四个伪类:,举例:,atext-decoration:none;font-weight:bold; a:linkcolor:
3、#0000cc; a:visitedcolor:#660099; a:hovercolor:#ff0000; a:activecolor:#006600; , h1,.a16color:red;我是标题1 我是标题1 我是标题2 我是标题2-OK 我是标题2-OK,功能:为不同的元素或对象定义相同的样式。,举例:, strong emcolor:red;加粗 倾斜 加粗倾斜 加粗倾斜, strongemcolor:red;加粗 倾斜 加粗倾斜 加粗倾斜 加粗倾斜,color:rgb(100%,40%,35%); color:rgb(200,200,200); color:#ff0000; co
4、lor:#f00; color:red;,pcolor:#ff0000;,内联样式 内部样式 外部样式,内联样式,内部样式,外部样式,所谓盒子模型,就是把每个HTML元素看作一个装了东西的盒子,盒子里面的内容有属性“宽(width)”和“高(height)”;盒子里面的内容到盒子的边框之间的距离叫“内边距(padding)”;盒子本身有“边框(border)”;而盒子边框外和其他盒子之间的距离叫“外边距(margin)”。,元素的总宽度= 左外边距+左边框+左内边距+宽+右内边距+右边框+右外边距,元素的总高度= 上外边距+上边框+上内边距+高+下内边距+下边框+下外边距,结论,1.书写规则,Margin:20px; Margin:20px 40px; Margin:20px 40px 60px; Margin:20px 40px 60px 80px;,谢谢大家!,