CSS命名规范
一.文件命名规范
全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;
二.常用类/ID命名规范
页 眉:header
内 容:content
容 器:container
页 脚:footer
版 权:copyright
导 航:menu
主导航:mainMenu
子导航:subMenu
标 志:logo
标 语:banner
标 题:title
侧边栏:sidebar
图 标:Icon
注 释:note
搜 索:search
按 钮:btn
登 录:login
链 接:link
信息框:manage
……
常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn
CSS书写规范及方法
一. 常规书写规范及方法
1. 选择DOCTYPE:
XHTML 1.0 提供了三种DTD声明可供选择:
过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下 ......
function $import(path,type,title,idname){
var s,i;
if(type=="js"){
var ss=document.getElementsByTagName("script");
for(i=0;i<ss.length;i++){
if(ss[i].src && ss[i].src.indexOf(path)!=-1)return ss[i];
}
......
function $import(path,type,title,idname){
var s,i;
if(type=="js"){
var ss=document.getElementsByTagName("script");
for(i=0;i<ss.length;i++){
if(ss[i].src && ss[i].src.indexOf(path)!=-1)return ss[i];
}
......
magento个别页面添加css和js文件,可以将其放在个别页面的xml中,或者放在CMS的layout update中,其代码和文件存放位置如下
<reference name="head">
<action method="addCss"><stylesheet>css/mystyles.css</stylesheet></action>
//添加css mystyles.css 文件在 /skin/frontend/主题包文件夹/主题文件夹/css
<action method="addItem"><type>skin_js</type><name>js/myjs.js</name></action>
//添加js myjs.js 文件在 /skin/frontend/主题包文件夹/主题文件夹/js
<action method="removeItem"><type>js</type><name>prototype/prototype.js</name></action>
//删除js 此prototype.js文件在magento根目录的 js文件夹
</reference>
出处:http://www.hellokeykey.com/magento-add-css-js/
......
这个系列可能新手读起来比较慢,但我尽量用易懂的方式讲解,因为我曾经是初学者,我知道大家想知道什么。一张网面其实页面内容是比较重要的,图像是属于锦上添花,当然网页的排版也很重要。在CSS揭秘学习的第一站,首先要学习一下文字和文本,让大家对css有个初步的认识。
首先文字是指一种具体的字体,美术上也有这种区分,比如正楷。。什么啊等等。它们都有自已的外观。还是一个概念是文字集合是一些具有公性的文字的集合。例如:serif(衬线) sans-serif(非衬线) 和monospace(等宽). ......
盒子标签和属性对照
CSS语法(不区分大小写) JavaScript语法(区分大小写)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left ......
效果图:
源码: 保存为html文件, 在IE6及以上版本IE浏览器可以运行....
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Light滤镜</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
border: 1px solid gray;
}
#light {
-ms-filter: "progid:DXImageTransform.Microsoft.Light()";
filter: progid:DXImageTransform.Microsoft.Light() ......