前端CSS必备类名及常用属性总结（让编程更简单）

CSS常用类和属性总结

CSS常用类总结

页面结构
div+css命名
导航
功能
样式文件命名

CSS常用属性总结

字体设置
文本属性
盒子设置
其它常用属性

CSS常用类总结

页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

div+css命名

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

功能

main 页面主体
tag 标签
msg #message 提示信息
tips 小技巧
vote 投票
friendlink 友情连接
title 标题
summary 摘要
loginbar 登录条
searchInput 搜索输入框
hot 热门热点
search 搜索
search_output 搜索输出和搜索结果相似
searchBar 搜索条
search_results 搜索结果
copyright 版权信息
branding 商标
logo 网站LOGO标志
siteinfo 网站信息
siteinfoLegal 法律声明
siteinfoCredits 信誉
joinus 加入我们
partner 合作伙伴
service 服务
regsiter 注册
rr/arrow 箭头
guild 指南
sitemap 网站地图
list 列表
item 列表里的每一项
homepage 首页
subpage 二级页面子页面
tool, #toolbar 工具条
drop 下拉
dorpmenu 下拉菜单
status 状态
scroll 滚动
.tab 标签页
.left .right .center 居左、中、右
.news 新闻
.download 下载
.banner 广告条(顶部广告条)
电子贸易相关
.products 产品
.products_prices 产品价格
.products_description 产品描述
.products_review 产品评论
.editor_review 编辑评论
.news_release 最新产品
.publisher 生产商
.screenshot 缩略图
.faqs 常见问题
.keyword 关键词
.blog 博客
.forum 论坛

样式文件命名

主要的 main.css
模块 module.css
基本共用 base.css
布局 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 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;}
```
通过像素来指定字体的大小
1px=1像素

扫描二维码关注公众号，回复： 11446313 查看本文章
font-family 定义文本使用某个字体
```
p{font-family:microsoft YaHei;}
```

可以设置多个字体，排名越靠前优先级越高
默认值由浏览器决定

font-weight 指定文字的粗细

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

font 是上面几个属性的复合属性
font:font-style font-weight font-size/line-height font-family
font-style font-weight 可以不写也可以交换位置
font-size/line-height font-family 必须写能交换位置
有继承性：给父元素设置了，子元素也可以继承到
经典应用：给body设置字体相关的属性。

文本属性

text-align 内容对齐方式，他是针对于元素的内容
属性值：left、center、right

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

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

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

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

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

text-indent 文本缩进
文本缩进属性是用来指定文本的第一行的缩进
也可以隐藏一个盒子中的文本
如
```
p{text-indent:2em}    /*  首行缩进2个文字的大小  */
p{text-indent:-9999em;}    /*  用来隐藏文本   */
```
1em和当前字体大小相等。如在谷歌浏览器中默认字体是16px，
那么，1em的默认大小是16px。
word-wrap 设置当前行超过指定容器的边界时是否换行
首先要知道一种情况：如果容器中的单词过长，超出了容器本身的宽度会造成长单词溢出
word-wrap:break-word;可设置过长的文本自动换行。
line-height 设置对象的行高（不允许使用负值）
normal 默认，设置合理的行间距
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距

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

盒子设置

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像素不然显示不下  */

margin 外边距
单边设置：
margin-top/right/bottom/left:value;
value可取值为像素、%、auto、负值
外边框简写：
margin:value(四个方向相同);
margin:value(上下) value(左右)；
margin:value(上) value(左右) value(下);
margin:value(上) value(右) value(下) value(左)
padding 内边距

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

padding:value(四个方向相同);
padding:value(上下) value(左右);
padding:value(上) value(左右) value(下);
padding:value(上) value(右) value(value(左);

width: 宽 height：高

其它常用属性

display:block;

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

display:inline;

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

display:inline-block;

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

元素的显示和隐藏

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

相对定位

position:relative;

绝对定位

position:absolute;

浮动

float:left;
float:right;
元素转换
display:block; 把行内元素转换为块级元素
display:inline-block; 把行内元素转换为行内块元素
清除浮动
overflow:hidden;
去除a标签下划线
text-decoration:none;