css知识点

时间 2019-11-19

标签 css 知识栏目 CSS 繁體版

原文原文链接

 01 cSS基础语法 

02	CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.

03	每条声明由一个属性和一个值组成.

04	每一个属性有一个值.属性和值被冒号分开.

05	例如:下面这行代码的做用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素.

06	在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值.

07	h1 {color:red; font-size:14px;}//看见后面有分号,若是是一个属性或者这个属性在尾部能够不加分号,除了这两种状况必须加否则页面是很错乱的

08	=======================

09

 页面居中问题 

10

 能够先设置 

11	body{margin:0 auto;}

12	有的浏览器即便设置这个也不会居中的那么就要加上这句DTD申明代码

13	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

14	===================

15	body和div背景设置问题

16	①、background-color//背景颜色属性

17	②、background-image:url('背景图片路径');//背景图片属性

18	body { background-color:blue;} p{ background-image:url('背景图片路径');}

19	③、若是须要在页面上对背景图像进行平铺,可使用 background-repeat 属性.

20

 背景定位 

21	能够利用 background-position 属性改变图像在背景中的位置.

22	下面的例子在 body 元素中将一个背景图像居中放置垂直平铺:

23

 body 

24

{

25	background-image: url(http://www.iiwnet.com/logo.gif);

26	background-repeat: repeat-y;//垂直方向平铺repeat-x水平方向的repeat两个方向都平铺 no-repeat都不平铺

27	background-position:center;//居中

28

}

29	body是标签名,background-color,background-image,background-repeat是属性,blue是属性值等

30	固然这些属性能够用一句话综合写起来看下面属性综合写法

31	=================

32

 多个标签组合 

33	h1,h2,h3 {color:red;}//是逗号分开的通常用在有的标签样式同样就能够写在一块儿这样就减小代码的使用,能重复调用

34	把标题<h1><h2><h3>的字体颜色都变为红色

35	=================

36

 属性综合写法 

37	div {font:italic normal bold 11pt arial;}// 这是字体相关属性的综合写法

38	div的字体风格(font-style)属性值是italic,字体变量(font-variant)属性值是normal,字体浓淡(font-weight)属性值是bold,字体大小(font-size)属性值是11pt,字体名称(font-family)属性值是Arial

39	p{border:1px solid #dddddd}//这是边距属性综合写法大小样式(solid为实线 dashed为虚线dotted为点线...还有本身总结)你看到没我这一句css代码结尾没分号;是能够的上面已经讲过了

40	================

41

 标签嵌套 

42	div h1 {color:blue;}

43	div里面的<h1>字体颜色为蓝色.

44	div是 h1的父亲 h1是div的儿子我在写css样式都是用这样的为何呢?

45	缘由是你想一想就知道了世界有不少人难道都是你父亲吗你用标签嵌套,即便这个父亲的儿子名字同样可是这个儿子仍是这个父亲的不会是另我的的,因此当你嵌套了就不怕在其余地方重复用这个标签名或类名(ID选择器是惟一的不能重复)

46	===============

47

 定义id 

48	#main {background:#ff0000;width:100%;}

49	<div id="main">hello</div>//那么直接调用#mian

50	这里是用#+id名是方式,也能够用标签名加+#+id名,如div#main,通常不这么用.

51	================

52

 定义class 

53	.red {color:red;}

54	<div class="red" >hello</div>

55	同id的写法差很少,把"#"改成"." ,若是一个标签同时定义了id跟class,id具备优先级.

56	*表示该标签下的全部元素样式

57	body * {padding:0px;}

58

 用得比较少 

59	================

60	好了没时间就总结这么多最好要记住

61

 样式优先级 

62	(1) 标签中的style > id > class

63	(2) 标签中的style > 页面中的style > 导入的样式@import

64	(3) 用link,如<link rel='stylesheet' type='text/css' href='' />,更写在页面上同等级的.

65	若是一样的样式定义了2次,后面出现的具备优先级

1. css（知识点）
2. css知识点
3. css 知识点
4. HTML&CSS知识点
5. CSS知识点-- Padding
6. html css知识点
7. CSS知识点（一）
8. CSS重点知识
9. css小知识点
10. Css知识点4
更多相关文章...
• 与传输层有关的基本知识 - TCP/IP教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• 适用于PHP初学者的学习线路和建议
• 使用阿里云OSS+CDN部署前端页面与加速静态资源