css类名

CSS常用类总结

页面结构

1. 容器: container
2. 页头：header
3. 内容：content/container
4. 页面主体：main
5. 页尾：footer
6. 导航：nav
7. 侧栏：sidebar
8. 栏目：column
9. 页面外围控制整体布局宽度：wrapper
10. 左右中：left right center

 

div+css命名

1. wrapper 页面外围控制整体布局宽度
2. container或#content 容器,用于最外层
3. layout 布局
4. head, #header 页头部分
5. foot, #footer 页脚部分

 

导航

1. nav 导航
2. subnav 子导航
3. topnav 头部导航
4. sidebar 侧边导航
5. leftsidebar 左边导航
6. menu 菜单
7. submenu 子菜单
8. sideBar 侧边栏
9. sidebar_left, #sidebar_right 左边栏或右边栏

 

功能

1. main 页面主体
2. tag 标签
3. msg #message 提示信息
4. tips 小技巧
5. vote 投票
6. friendlink 友情连接
7. title 标题
8. summary 摘要
9. loginbar 登录条
10. searchInput 搜索输入框
11. hot 热门热点
12. search 搜索
13. search_output 搜索输出和搜索结果相似
14. searchBar 搜索条
15. search_results 搜索结果
16. copyright 版权信息
17. branding 商标
18. logo 网站LOGO标志
19. siteinfo 网站信息
20. siteinfoLegal 法律声明
21. siteinfoCredits 信誉
22. joinus 加入我们
23. partner 合作伙伴
24. service 服务
25. regsiter 注册
26. rr/arrow 箭头
27. guild 指南
28. sitemap 网站地图
29. list 列表
30. item 列表里的每一项
31. homepage 首页
32. subpage 二级页面子页面
33. tool, #toolbar 工具条
34. drop 下拉
35. dorpmenu 下拉菜单
36. status 状态
37. scroll 滚动
38. tab 标签页
39. left .right .center 居左、中、右
40. news 新闻
41. download 下载
42. banner 广告条(顶部广告条)

电子贸易相关

1. .products 产品
2. .products_prices 产品价格
3. .products_description 产品描述
4. .products_review 产品评论
5. .editor_review 编辑评论
6. .news_release 最新产品
7. .publisher 生产商
8. .screenshot 缩略图
9. .faqs 常见问题
10. .keyword 关键词
11. .blog 博客
12. .forum 论坛

 

样式文件命名

1. 主要的 main.css
2. 模块 module.css
3. 基本共用 base.css
4. 布局 layout.css
5. 主题 themes.css
6. 专栏 columns.css
7. 文字 font.css
8. 表单 forms.css
9. 补丁 mend.css
10. 打印 print.css

 

CSS常用属性总结

字体设置

color 定义文本的颜色

如：

div{color:red;}
div{color:#ffffff}
div{color:rgb(255.255.255);}

 

font-style 设置文本是否倾斜

normal（正常字体） 默认值

italic 斜体

如

p{font-style:italic;}     /*  倾斜 */

 

font-size 设置文本字体的大小

p{font-size:12px;}

 

通过像素来指定字体的大小

1. 1px=1像素
2. font-family 定义文本使用某个字体

p{font-family:microsoft YaHei;}

 

可以设置多个字体，排名越靠前优先级越高

默认值由浏览器决定

 

font-weight 指定文字的粗细

p{ font-weight:normal;}   /*  默认值  */
p{ font-weight:bold;}   /*  粗体  */

 

.font 是上面 几个属性的复合属性

1. font:font-style font-weight font-size/line-height font-family
2. font-style font-weight 可以不写 也可以交换位置
3. font-size/line-height font-family 必须写 能交换位置
4. 有继承性：给父元素设置了，子元素也可以继承到
5. 经典应用：给body设置字体相关的属性。

文本属性

1.text-align 内容对齐方式，他是针对于元素的内容

属性值：left、center、right

     p{text-align:left;}    /*  左对齐   */
     p{text-align:center;}    /*  居中   */
     p{text-align:right;}    /*  右对齐   */

 

p标签是块级元素，left、center、right会作用于整行

 

2.text-decoration 设置文字是否有修饰线，默认值是none

p{text-decoration:underline;}   /*   指定文字的修饰线是下划线  */
p{text-decoration:overline;}   /*   指定文字的修饰线是上划线  */
p{text-decoration:through;}   /*   指定文字的修饰线是贯穿线，类似于删除标签的效果  */

 

常用text-decoration:none;来去除a标签的下划线

 

3.text-indent 文本缩进

文本缩进属性是用来指定文本的第一行的缩进

也可以隐藏一个盒子中的文本

如

p{text-indent:2em}    /*  首行缩进2个文字的大小  */
p{text-indent:-9999em;}    /*  用来隐藏文本   */

 

1em和当前字体大小相等。如在谷歌浏览器中默认字体是16px，
那么，1em的默认大小是16px。

 

4.word-wrap 设置当前行超过指定容器的边界时是否换行

首先要知道一种情况：如果容器中的单词过长，超出了容器本身的宽度会造成长单词溢出

word-wrap:break-word;可设置过长的文本自动换行。

 

5.line-height 设置对象的行高（不允许使用负值）

normal 默认，设置合理的行间距

number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距

 

如果子标签是南标签，行高可以撑起子标签的高度
如果子标签是女标签，行高不能撑起子标签的高度

盒子设置

1.border 边框

border属性设置一个元素的边框，它有三个要素：宽、样 式、 颜色，统称边框三要素。
三要素书写的时候一般如下顺序
border：宽度 样式 颜色;

如

       div{border:1px solid red;}     /*   1像素红色的实线边框  */
       div{border:1px dotted red;}     /*   1像素红色的点状边框  */
       div{border:1px dashed red;}     /*   1像素红色的虚线边框  */
       div{border:3px double red;}     /*   红色的双线边框最小3像素不然显示不下  */

 

2.margin 外边距

单边设置：

1. margin-top/right/bottom/left:value;
2. value可取值为像素、%、auto、负值

外边框简写：

1. margin:value(四个方向相同);
2. margin:value(上下) value(左右)；
3. margin:value(上) value(左右) value(下);
4. margin:value(上) value(右) value(下) value(左)

 

3.padding 内边距

内容区域和边框之间的空间，会扩大元素边框所占用的区域

1. padding:value(四个方向相同);
2. padding:value(上下) value(左右);
3. padding:value(上) value(左右) value(下);
4. padding:value(上) value(右) value(value(左);

width: 宽 height：高

其它常用属性

display:block;

把某个元素的显示模式修改为块级元素，在img标签设置这个属性可以去除图片默认的3px间隙

 

display:inline;

把某个元素的显示模式修改为行内元素

 

display:inline-block;

把某个元素的显示模式修改为行内块模式

 

元素的显示和隐藏

1. display:none; 没有显示模式，既看不见也不占据位置
2. visibility:hidden; 隐藏，虽然看不见，但是占据位置
3. visibility:visible; 可见（visibility的默认值）

 

相对定位

position:relative;

 

绝对定位

position:absolute;

 

浮动

1. float:left;
2. float:right;
3. 元素转换
4. display:block; 把行内元素转换为块级元素
5. display:inline-block; 把行内元素转换为行内块元素
6. 清除浮动
7. overflow:hidden;
8. 去除a标签下划线
9. text-decoration:none;

搜索

复制