css知识点总结

一．什么是css？

CSS（Cascading Style Sheets）层叠样式表，专注于页面的表现层。

二．CSS引入方式

1.行内样式

在开始标签上加style=”样式属性名1:样式属性值1;样式属性名2:样式属性值2;...” 属性

1. 内嵌式

把所有的css样式都写在标签内，放在head标签内

1. 外链式

把所有的css样式均放在一个css单独的文件里（后缀名xx.css）,在html里通过来引入外部的css

优先级：

行内最大，其次 谁离标签近，谁的优先级高（最晚优先级最高）

• 选择器

1. 通配符选择器   选择所有的元素    0.5

 *{}

1. 标签选择器        1

  标签名{}    例如：p{}

1. 类选择器          10

 .类值{}       例如：.content{}

拓展：  选择器.类值{}    div.box{}  类叫box的div元素

1. id选择器          100

 #id值{}      例如：#con{}

1. 包含选择器（后代选择器）     权重相加

选择器a  选择器b{}       选择器a里的所有选择器b    选择器b只要被选择器a包着

.box div{}   类box里的所有div元素

扩展：选择器直接子元素

选择器a>选择器b{}   选择器a里的所有直接选择器b     父子关系

.box>span{}    类box里的所有直接子元素span

1. 分组选择器

选择器1,选择器2,....{}

选择器权重：

行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

四．字体样式

1. font-family   字体系列

例如：font-famiy:”宋体”,”微软雅黑”,...

1. font-size      字体大小

1. font-style      字体风格

值：1）normal   默认  不倾斜

2）italic      斜体

3）oblique    倾斜

1. font-weight     字体粗细

值：1）bold      粗体

2）bolder     更粗体

3）lighter     细体

4）100-900    数值越大，字体越粗

1. line-height      行高

值：1）数值+单位

1. 数值       字体的倍数

缩写：

font : font-style值   font-weight值   font-size值/line-height值   font-family值

五．文本样式

1. text-decoration   文本修饰

值：1）none     无修饰

2）underline  下划线

3）line-through   中划线

4）overline     上划线

2. text-align        文本对齐方式

值：1）left      默认   左对齐

1. center      居中对齐
2. right       右对齐
3. justify      两端对齐

1. text-indent      文本缩进

值：数值+单位（px或em）  为正数时，缩进；为负数时，悬挂

1. text-transform    文本大小写转换

值：1）uppercase    全大写

1. lowercase    全小写
2. capitalize    首字母大写

1. text-overflow      文本溢出处理

值：1）ellipsis      文本溢出以省略号显示

1. .....

文本溢出以省略号显示

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;  强制不换行

1. letter-spacing     字母与字母之间的距离   汉字与汉字之间的距离
2. word-spacing     单词与单词之间的距离
3. overflow         内容溢出处理   overflow-x  overflow-y

值：1）visible      默认 溢出部分可见

1. hidden       溢出部分隐藏
2. scroll        溢出部分以滚动条形式显示
3. auto         溢出部分浏览器自动处理

六．盒子模型

1.border  边框

border-width  边框的宽度

border-color   边框的颜色

border-style   边框的样式

值：1）solid     实线

2）double    双实线

3）dotted     点状线

4）dashed    虚线

....

缩写:

border : border-width值   border-style值   border-color值;

border-top 上边框

border-bottom  下边框

border-left    左边框

border-right   右边框

1. padding    内边距  内补丁 内填充

padding-top    上内边距

padding-bottom   下内边距

padding-left    左内边距

padding-right   右内边距

缩写：

padding:值;               上下左右的内边距一样

padding:值1  值2;         值1代表上下内边距，值2代表左右内边距

padding:值1  值2  值3;    值1代表上内边距，值2代表左右内边距，值3代表下内边距

padding:值1  值2  值3  值4;      值1代表上内边距，值2代表右内边距，值3代表下内边距，值4代表左内边距，按照顺时针方向。

1. margin    外边距

margin-top    上外边距

margin-bottom  下外边距

margin-left      左外边距

margin-right     右外边距

缩写：

margin:       同padding

margin:0 auto;   块级元素居中显示

1. background   背景

1. background-color    背景颜色
2. background-image   背景图片

值：url(“图片的路径”)

1. background-repeat   背景图片是否平铺

值：a）repeat     默认   水平、垂直都平铺

b）no-repeat       水平、垂直都不平铺

c）repeat-x        水平平铺

d）repeat-y        垂直平铺

1. background-position    背景图片的位置

语法： x轴坐标  y轴坐标

值：a）表示位置的英文单词   例如：left center right top bottom

b）百分比

c）数字+单位

5）background-size        背景图片的大小

语法：背景图片的宽度   背景图片的高度

值：a）百分比    （盒子的百分比）

b）数字+单位

c）cover   背景图片等比例的扩展至足够大，以使它铺满整个区域，可能会引起图片裁剪。

d）contain  背景图片等比例地扩展至足够大，以使它的宽度或高度适应内容区域，可能会使区域留白。

1. background-origin     背景图片开始渲染的位置

值：a）padding-box     默认   从左上角内边距的位置开始渲染

b）content-box     从内容区域左上角开始渲染

c）border-box      从左上角边框区域开始渲染

1. background-attachment    背景图片是否固定

值：1）scroll     默认  图片随页面其余部分滚动而滚动

2）fixed     图片固定不动

缩写：

background : 背景颜色  背景图片   背景是否平铺  背景位置/背景大小 背景渲染位置  背景是否固定;

七．浮动

float   浮动

值：

1. none      默认  不浮动
2. left        左浮动
3. right       右浮动

清除浮动：

1. 给有浮动的子元素的父元素加height
2. 给有浮动的子元素的父元素加overflow:hidden
3. 给所有有浮动的元素最后增加一个空元素，给该空元素加样式clear:left / right / both

clear:left  清除左浮动

clear:right  清除右浮动

clear:both   清除左右浮动

clear:none   不清除浮动

4）给有浮动的子元素的父元素增加伪元素，在伪元素里增加样式

::after{

display:block;

content:””;

clear:both;

}

八．定位

position   定位

值：

1. static      默认  不定位
2. relative    相对定位    相对于自己原来正常文档流的位置定位
3. absolute    绝对定位

1. 有绝对定位元素的包含框无定位，该元素相对于浏览器定位
2. 有绝对定位元素的包含框有定位，该元素相对于离自己最近的有定位的包含框定位

1. fixed       固定定位    始终相对于浏览器定位

 

借助left、right、top、bottom这四个值改变元素位置

z-index  值：数字    z轴的排列顺序   z-index值越大越在最上层

其他：

伪类

:link   未访问的状态

:visited   访问后的状态

:hover    鼠标悬停时的状态

:active    鼠标激活时的状态

LoVe HAte 爱恨原则

元素的相互转换

其他元素转换为块级元素  display:block

其他元素转换为行内元素  display:inline  （内边距都能设置  外边距只能设置左右的外边距）

其他元素转换为行内块级元素  display:inline-block

任何元素隐藏  display:none

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color,text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

常用的css命名规则

头：header  top

内容：content/container / main

尾：footer  bottom

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left  right  center   content_left   content_right   nav-left  nav-right

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg  message

nav  navigation 

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

（2）字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }  .fz12px{ font-size:12px;}

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }  .fl{float:left;}  .fr{float:right;}

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }

.barproduct { }

注意事项::

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css / common.css / static.css

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

href与src的区别

href: （hyperText reference）超文本引用 指定网络资源的位置,目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。

src: source（缩写），为了引用资源，指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。

区别：

1 请求资源类型不同

（1）href 指向网络资源的位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。

（2） src 是将外部资源下载并解析到页面，比如 JavaScript 脚本，img 图片；

2 作用结果不同

（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

3 浏览器解析方式不同

（1）若在文档中添加 ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到 ，script 标签的加载和解析是同步的，当碰到src时会暂停其他资源的下载和处理，直到将该资源解析完毕，才会去处理其他资源。类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

总结：href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。