Summary—【base】(CSS)

标签：

CSS知识点

1. CSS又被称为层叠样式表

2. CSS在html中的语法

　　a) 

<style>

　　　　选择器{键:值;}

　　　</style>

　　b) css中最后一个键值可以不写分号

3. CSS中对字体设置的常用属性

　　a) Font-size

　　　　i. Font-size是设置字体的大小的

　　　　ii. Font-size:12px;(单位px)

　　b) Font-style

　　　　i. Font-style是设置字体风格的

　　　　ii. 斜体font-style:italic; 正常 font-style:normal;

　　c) Font-weight

　　　　i. Font-weight是设置字体的粗细的

　　　　ii. 可以用数值来表示如 font-weight:400;（100~900）

　　　　iii. 可以用关键字来表示 font-weight:bold;( bold:加粗 bolder:更粗 lighter:细线)

　　d) Font-family

　　　　i. Font-family设置字体的样式的

　　　　ii. Font-family:”宋体”;如果字体样式是中文则要加上双引号,如果是英文可以省略

　　e) Font简写

　　　　i. 简写的顺序为font:font-style font-weight font-size font-family;（这是一定要写的）

4. CSS中对文本设置的常用属性

　　a) Text-align

　　　　i. Text-align是用来设置文本的水平位置的

　　　　ii. Text-align:center;(center居中,left靠左,right靠右)

　　b) Text-indent

　　　　i. Text-indent是用来设置默认的文本缩进的

　　　　ii. Text-indent:2em;(单位:em)

　　c) Text-decoration

　　　　i. Text-decoration是设置文本的样式的

　　　　ii. Text-decoration:none;(无样式:none,下划线:underline,上划线:overline,删除线:line-through)

5. 开发人员工具的使用

　　a) 打开:在浏览器中右键->审查元素

　　b) 功能

　　　　i. 查看network:用来查看浏览器请求服务器时发送的请求报文

　　　　ii. 查看elements左侧代码区用来查看某一元素所使用的标签,所占用的区域

　　　　iii. 在elements右侧区域可以查看某一元素所使用的CSS样式

7. CSS注释

　　a) Css注释以/*开始 以*/结束

　　b) Css中的注释不可以叠加使用

8. Css中的选择器

　　a) 选择器的命名规则

　　　　i. 只能使用数字,字母,下划线”_”和连接符”-”来组合进行命名

　　　　ii. 并且命名不可以以数字和_开头

　　b) 标签选择器(tag)

　　　　i. P{键:值;}

　　　　ii. 为页面上所有的这一种标签设置对应的属性

　　c) 类选择器(class)

　　　　i. .class{键:值;}

　　　　ii. 给页面上所有有这个类名的标签设置对应的属性

　　d) ID选择器(id)

　　　　i. #ID{键:值;}

　　　　ii. 给页面上所有的ID名的标签设置对应的属性

　　e) 通配符选择器(*)

　　　　i. *{键:值;}

　　　　ii. 给页面中的所有标签设置对应的属性(不推荐使用)

　　f) 后代选择器

　　　　i. #id .class{键:值;}

　　　　ii. 对所有此类ID下的所有此类class设置样式

　　g) 子代选择器

　　　　i. #id>.class{键:值;}

　　　　ii. 对所有此类ID下没有被标签包裹的此类class设置样式

　　h) 并集选择器

　　　　i. #id,.class{键:值;}

　　　　ii. 对所有此类ID和此类class下的标签设置样式

　　i) 交集选择器

　　　　i. #id.class{键:值;}

　　　　ii. 对所有既是此类ID又是此类class的标签设置样式

9. CSS的3种使用方式

　　a) 在style标签中进行设置

　　　　i.

<style>

.class{键:值;}

</style>

　　b) 在标签中设置style属性进行设置

　　　　i. <div style=”键:值;”></div>

　　c) 在外部设置CSS样式用link导入

1 <link rel="stylesheet" href="a.css"> 　　

10. 颜色的3中表达方式

　　a) 用关键字进行表达 Color:rad;

　　b) 用十六进制进行表达 Color:#FFF;

　　c) 用RGB()进行表达 Color:RGB(100,100,255);

11. CSS的三大特性

　　a) 继承性 – html中的标签会继承父级标签

　　　　i. a标签不会继承父元素的颜色

　　　　ii. h标签不会继承父元素的字体大小

　　　　iii. div的宽会继承父元素的宽,div的高不会继承父元素的高

　　b) 层叠性 – 类选择器与标签选择器同时作用于同一元素的同一属性,那么类选择器所设置的属性样式会层叠标签选择器的属性样式(最后会显示类选择器所设置的属性样式)

　　c) 优先级

　　　　i. 选择器优先级权重: 浏览器中的默认样式<继承样式<通配符选择器<标签选择器<ID选择器<标签中直接用style属性设置CSS样式<!important

　　　　ii. 相同的选择器,相同的属性最后设置的样式会覆盖前面所设置的样式

　　　　iii. 权重格式(！important的个数，ID选择器的个数，类选择器的个数，标签选择器的个数)从右到左对比标签,直到分出权重高低,如果权重相同则由CSS设置的顺序决定

12. CSS中背景的设置background

　　a) 设置背景的颜色background-color

　　　　i. Background-color:red;

　　b) 设置背景的图片background-image

　　　　i. Background-image:URL(image/1.jpg);

　　c) 设置背景图片的平铺方式background-repeat

　　　　i. Background-repeat:no-repeat; 设置为不平铺

　　　　ii. Background-repeat:repeat-x; 设置为水平平铺

　　　　iii. Background-repent:repeat-y; 设置为横向平铺

　　d) 设置图片在标签中的位置background-position

　　　　i. Background-position:top bottom; 设置图片的位置(top表示偏上,right表示偏左,bottom表示偏下,left表示偏左)

　　　　ii. Background-position:100px 100px; 设置图片的具体位置(x轴位置,Y轴位置)

　　e) 连写background

　　　　i. 连写顺序 - background:background-color background-image background-repeat background-position;

13. 块级元素与行内元素

　　a) 块级元素

　　　　i. 特点:无论是否设置宽高都独占一行

　　　　ii. 显示方式:display:block

　　　　iii. 例:DIV标签

　　b) 行内元素

　　　　i. 特点:宽和高由其中的内容决定,设置宽高不会起作用

　　　　ii. 显示方式:display:inline

　　　　iii. 例:span标签

　  c) 行内块级元素

　　　　i. 特点:不会独占一行,也可以设置宽和高

　　　　ii. 显示方式:display:inline-block;

　　d) 改变显示方式display

　　　　i. Display:block;(block:块级元素,inline:行内元素,inline-block:行内块级元素)

14. Css中对文本的相关样式

　　a) Text-align用于设置文本在水平方向上的排序方式

　　　　i. Text-align:center设置文本水平居中显示

　　　　ii. Text-align:left 设置文本水平靠左显示

　　　　iii. Text-align:right 设置文本水平靠右显示

　　b) Text-decoration:用于设置文本的显示样式

　　　　i. Text-decoration:none;取消文本原先所有的样式

　　　　ii. Text-decoration:underline 为文本增加一条下划线

　　　　iii. Text-decoration:overline 为文本上方增加一条线

　　　　iv. Text-decoration:line-through 为文本增加一条删除线

　　c) Text-indent用于设置文本的缩进

　　　　i. Text-indent：2em

15. CSS的三种使用方式

　　a) 定义行内样式

　　　　i. <div style=”color:red;”>

　　b) 嵌入样式(内联样式)

　　　　i.

1 <style>
2 
3 Div{color:red;}
4 
5 </style>

　　c) 外部样式（外联样式）

<link rel="style/sheet" href="外部样式.css">

16. 行高line-height

　　a) 两行文本之间的基线之间的距离叫做行高

　　b) Line-height的作用是设置文本的行高(上下文本的间距),一般应用于使文本垂直居中于容器中

　　c) 单位

　　　　i. Px：像素单位

　　　　ii. %:基数以当前标签中的文本字体大小为主

　　　　iii. Em效果与%类似

　　　　iv. 没有单位

　　　　如果不涉及到继承那么和em、%一样,如果涉及到继承,则会直接继承line-height给子元素,而%和em会继承一个具体的数值给子元素

17. 伪类

　　a) 作用:伪类选择器是给对应的标签设置样式的,但是伪类需要某些特定的效果才会触发

　　b) 伪类的种类

　　　　i. Link 设置元素没有被访问过的样式

　　　　ii. Visited 设置元素被点击之后的样式

　　　　iii. Hover 设置鼠标悬停时元素的样式

　　　　iv. Active 设置鼠标激活时的样式

18. 盒子的组成

　　a) Padding:

　　　　i. 是盒子与内容之间的空隙,能够分别设置padding-top，padding-left, padding-right，padding-bottom,要注意的是行内元素不能设置padding

　　b) Border

　　　　i. 是设置盒子外边框的属性,分别能够设置border-width,border-style,border-color

　　　　ii. Border-width是设置盒子外边框的宽度,分别能够设置border-width-top, border-left, border-right, border-bottom

　　　　iii. Border-style是设置盒子外边框的样式可以设置dashed-虚线|dotted-点线|solid-实线,也能够分别设置

　　　　iv. Margin是设置盒子与盒子之间的空隙的可以设置margin-top margin-right margin-bottom margin-left

　　Margin的连写:margin:100px; 设置margin的上下左右

　　Margin：100px 100px;设置margin上下、左右

　　Margin：100px 100px 100px;设置margin上、左右、下

　　Margin：100px 100px 100px 100px设置margin上,下,左、右

19. Css中的浮动

　　a) 浮动的特性

　　　　i. 浮动是一种脱离了标准文档流的技术.浮动之后的元素在排序的时候会以上对齐,文字会给浮动的元素让位.

　　　　ii. 浮动后的元素会覆盖在标准流的元素之上

　　　　iii. 浮动的位置基准,以自己没有脱离标准流之前的位置,向上浮动

　　　　iv. 浮动之后元素的显示方式将会改变为inline-block

　　　　v. 浮动可以设置float:left和float:right,如果在同一位置浮动的元素有多个,那么左浮动的元素会寻找左浮动的元素,右浮动会寻找右浮动的元素

　　b) 取消浮动

　　　　i. 浮动的标签父元素下增加一个额外的标签来清除浮动,并增加一个样式,但清除完成后,父容器的高度还是0

　　　　Clear:both;//不推荐使用

　　　　ii. 浮动的标签父元素中增加一个样式

　　　　Overflow:hidden;//不推荐使用

　　　　iii. 使用伪元素//主流清除浮动的方法

1 .clearfix:after {
2 content:"";
3 height:0;
4 line-height:0;
5 display:block;
6 visibility:hidden;
7 clear:both;
8 }　//　该方法清除伪元素对IE不兼容所以应该加入一个样式zoom:1;

　　　　iv. 使用双伪元素:

1 .clearfix:after , .clearfix:before {
2 content:””;
3 display: table;
4 clear:both;
5 }

20. 定位

　　a) 静态定位: position:static;

　　　　一般不使用,所有标准文档流中的标签使用的都是静态定位

　　b) 相对定位: position:relative;;

　　　　相对于当前位置进行定位,不会破坏其他元素的位置,标签本身所占的位置不会消失

　　c) 绝对定位: position: absolute;

　　　　i. 相对于body位置进行定位,如果父元素设置了定位的话将相对于父元素进行定位

　　d) 固定定位position:fixed

　　　　i. 固定在浏览器的某一个位置,不会随着浏览器的位置变化而移动

　　e) Z-index层

　　　　i. 用来设置当前盒子所在的层次,层次越高,显示的优先级越高

21. Css中页面元素的显示和隐藏

　　a) Overflow:hidden将超出的部分隐藏起来,但是会占用页面的位置

　　b) Display:none 将元素直接隐藏,不会占据页面的位置

22. Overflow的使用

　　a) 属性为hidden:将超出容器的部分隐藏起来

　　b) 属性为scroll:将超出容器的部分放在滚动条之内

　　c) 属性为auto如果内容超出容器的部分放到滚动条内如果不超出容器,则不出现滚动条

23. 图片和文字的居中:

　　a) Vertical-align:middle

　　b) Display:inline-block

24. 精灵图

　　a) 多个图片叠加在一起成为精灵图,通常与background-position结合使用

　　b) 精灵图不宜过大

　　c) 一般精灵图大小要大于最宽的背景

　　d) 背景图片之间必须有空隙

　　e) 精灵底侧有一些空隙,方便以后添加

25. 滑动门

　　a) 第一个版本的滑动门是由3个标签和3个背景图片组成

　　b) 常用的滑动门是由2个标签和2个背景图片组成的,一般由精灵图组合制作滑动门

26. 圣杯布局

　　a) 由3个div组成的,两边的div固定不动,中间的div会随着页面的大小而变化

27. 页面编写的注意点

　　a) 通栏:占一整行的盒子

　　b) 版心:页面的安全范围,一般要大于最小分辨率

　　c) 开发整站的2种方式:

　　　　i. 从上往下依次把盒子写完

　　　　ii. 先把整站布局写好,然而再填充元素

常用的html标签和css样式

Html标签

CSS样式

伪类

2个常用伪元素

Summary—【base】(CSS)

标签：

原文地址：http://www.cnblogs.com/DF-fzh/p/5323555.html