常用的CSS命名规则:
创新互联成都企业网站建设服务，提供网站制作、成都网站设计网站开发,网站定制,建网站,网站搭建,网站设计,响应式网站设计,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:028-86922220
头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar
栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center
登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot
新闻：news 下载：download 子导航：subnav 菜单：menu
子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer
版权：copyright 滚动：scroll 内容：content 标签页：tab
文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title
加入：joinus 指南：guild 服务：service 注册：regsiter
状态：status 投票：vote 合作伙伴：partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container 页头：header 内容：content/container
页面主体：main 页尾：footer 导航：nav
侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav 主导航：mainbav 子导航：subnav
顶导航：topnav 边导航：sidebar 左导航：leftsidebar
右导航：rightsidebar 菜单：menu 子菜单：submenu
标题: title 摘要: summary
(3)功能
标志：logo 广告：banner 登陆：login 登录条：loginbar
注册：regsiter 搜索：search 功能区：shop
标题：title 加入：joinus 状态：status 按钮：btn
滚动：scroll 标签页：tab 文章列表：list 提示信息：msg
当前的: current 小技巧：tips 图标: icon 注释：note
指南：guild 服务：service 热点：hot 新闻：news
下载：download 投票：vote 合作伙伴：partner
友情链接：link 版权：copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用’font+字体大小’作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用’类别+功能’的方式命名,如
.barnews { }
.barproduct { }
css样式分三种，内部样式，内联样式和外部样式。外部样式，顾名思义，也就是通过link /引入的css样式文件，而内部样式呢，主要是放在style/style中的样式，而内联样式，就是直接嵌入标签的，充当标签的一个属性，使用style='这里写样式' 来实现。
他们的优先级是内联样式的优先级最高，其次判断内部和外部样式的优先级得看它们在html中出现的位置，一般来说，越靠后的优先级也就越高。
css是英文Cascading Style Sheets的缩写。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
它包含3种类型，内部样式，行内样式和外部样式表三种
作用的效果是按顺序从下到上，相同样式下面的会覆盖原有样式，除特殊情况外，一般都是行内样式内部样式外部样式。
以div为例
行内样式写法：
在style里面写样式
div style="height:30px; background:#f00;"/div
内部样式：
在head标签内加入style标签，在标签内写样式：
style
div{height:30px; background:#f00;}
/style
外部样式是建立一个新文件后缀名为.css
举个例子：
建立style.css文件放在项目根目录下：
在里面写入
div{height:30px; background:#f00;}
然后保存，在html的head标签内调用样式
link rel="stylesheet" type="text/css" href="style.css" /
有三种方法可以在站点网页上使用样式表（CSS）：
外联式Linking（也叫外部样式）：将网页链接到外部样式表。
嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
其中，优先级：内联式 嵌入式 外联式
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
head
link rel="stylesheet" type="text/css" href="mystyle.css"
/head
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 style 标签定义内部样式表。
head
style type="text/css"
body {background-color: red}
p {margin-left: 20px}/style
/head
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
p style="color: red; margin-left: 20px"
This is a paragraph
/p
没太理解楼主的意思，楼主这段代码是javascript脚本，并不是css样式啊。
css样式只能被动对固有的标签属性进行设置，js才可以动态的改变一些的值。
不知道楼主是不是说要点一下“点击替换”，然后就弹出来“这里需要替换”这个div呢？
如果是的话，就在“点击替换”的a标签上加段js代码就行了，
给a标签加个id，比如“id=myA”，
script type="text/javascript"
$("#myA").click(function () {
$("#tips").css("display", "block");
});
/script
然后就可以了，PS：$是引入了jquery库所可以使用的符号，等同于document.getelementbyID("控件ID名")
用float属性试试，为两段文字加上标签，一个float left 一个float right，能左多远，右多远取决于上层容器大小。
还有，好像css里不推荐用font标签，可以把font改成span加style＝“color:blue”，这样更好些。
按照良好的CSS书写规范来写CSS代码，这样会提高代码的阅读体验。下面具体说几点。
CSS书写顺序
位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)
使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
去掉小数点前的“0”
连字符CSS选择器命名规范
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器，为什么呢？
输入的时候少按一个shift键；
浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）
能良好区分JavaScript变量命名（JS变量命名是用“_”）