CSS基础(1)[基础选择器和基础样式]_css基础选择器样式-优快云博客

本文深入讲解CSS的概念，包括其作用、语法结构、使用方法及前缀等，帮助读者理解如何运用CSS控制网页外观，实现内容与样式的分离。
css的概念

知识点1.什么是css样式
			        HTML	 超文本标记语言	从语义的角度描述页面结构。
			        CSS	层叠式样式表		从审美的角度负责页面样式。
			        JS	JavaScript		从交互的角度描述页面行为。
	全称：Cascading  Style  Sheet（层叠样式表）的缩写
	作用：用于控制网页外观。（修饰和美化html）
	为什么要使用CSS
					1>使网页代码更少，网页下载更快
					2>实现了内容与样式的分离，使网站维护更快捷
					3>使网页与浏览器的兼容性更好




知识点2.Css语法结构
	CSS长什么样子
	怎么设置CSS样式
				    CSS的思想就是首先指定对什么“对象”进行设置，设置属性css，最后给出该设置的“值”。因此，概括来说，
				    CSS就是由三个基本部分组成的——“对象”、“属性”和“值”。
				    h1             颜色：红色     倾斜：斜体 
				    <h1><font color=”red”><i>标题M</i></font></h1>
				    “对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。
				    选择器 { 属性：属性值；}
		对象：选择器
		属性：样式属性
		值：样式值
	案例
				    body{  属性1:属性值1； 属性2:属性值2； }
				    	<h1  align=”center”></h1>（html中的属性是死的，即固定）
				    注：属性包含在{}中
				    	  属性和属性值之间用”:”进行分割  
				        	当有多个属性时，用”;”进行分割   空格





知识点3.Css使用方法
	内部样式
		行内样式
				    在html标记内，使用style属性定义css样式。
				    如：	<p style=“属性:属性值;”>内容</p>
				    	设置不同的css样式，各个样式之间互不影响，分别显示自己的样式效果。
		内嵌样式
					将css添加到<head>与</head>之间，并用<style></style>标记声明的一种样式。
			语法：
				<style  type="text/css">
					/*这里写css内容*/
					P{ 属性1：属性值1；属性2：属性值2}
					P{ 属性1：属性值1；属性2：属性值2}
	</style>
	外部样式
		链接样式
				    在外部定义css样式表，通过<link/>链接标记链接到页面中的一种样式。
				    	语法：（外部样式文件）n:m
				    <link  rel="stylesheet"    type="text/css"  href="CSS文件地址" />
				    	   1) link: 链接样式表
				    	   2) href：指定了css样式表所在位置
				    	   3) rel：指定链接到样式表，其值为stylesheet,不可省略
				    	   4) type：表示样式表类型为css样式表

		导入样式
						在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似于内嵌样式表效果。
			语法：	<head>
						<style type="text/css">
							@import url(css文件地址);
						</style>
					</head>
		导入样式和链接样式的优缺点比较
						导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
				使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。




知识点4.Css前缀
	Trident内核：主要代表为IE浏览器
		前缀为-ms
	Gecko内核：主要代表为Firefox
		前缀为-moz
	Presto内核：主要代表为Opera
		前缀为-o
	Webkit内核：产要代表为Chrome和Safari
		前缀为-webkit
	Blink       现在opera和谷歌  (由Google和Opera 开发的浏览器排版引擎)
			    使用过CSS3属性的同学都知道，CSS3属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。这是为什么呢？
			    浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法还存在波动时，它们提供针对浏览器的前缀。
			    1.属性尚未提出，这个属性所有浏览器不可用； 
			    2.属性被提出，但未列入标准，浏览器厂商通过私有前缀来支持该属性； 
			    3.属性被列入标准，可以使用前缀或不使用前缀来实现属性特性 
			    4.属性不需要再使用前缀，所有浏览器都稳定支持。
			    
			    
			    实验阶段的写法有三句，分别解释一下：-webkit-表示 Chrome 浏览器的私有属性前 缀、-moz-表示 Firefox 私有属性前缀，如果是处于实验阶段的旧版本浏览器，那么不支 持 border-radius，从而通过厂商前缀的方式来支持。如果是新版浏览器，已经是处于标 准阶段，那么又有两种说法：
			    1.如果新版浏览器废弃了前缀，那么前缀写法就不支持了， 仅支持标准写法；
			    2.如果新版浏览器没有废弃前缀，那么两种写法都可以，但要注意顺序， 且属性值要保持一致。
			    如果同时出现四个前缀+一个标准写法，四个前缀是当实验阶段时让四种引擎的浏览器 厂商支持自己的私有属性，一个标准写法表示当这个属性列入标准后，使用新版浏览器运行 时直接执行这个标准属性。


知识点5.Css单位
	em：相对于当前对象内文本的字体尺寸。
	ex：相对于字符“x”的高度。通常为字体高度的一半。
	cm：厘米（Centimeters）。绝对长度单位。
	mm：毫米（Millimeters）。绝对长度单位。
	q:1/4毫米（quarter-millimeters）。绝对长度单位。1in=101.6q
	in：英寸（Inches）。绝对长度单位。1in = 2.54cm
	pt：点（Points）。绝对长度单位。1in =72pt 
	pc：派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。	1in =6pc 
	px：像素（Pixels）1in = 96px（字体分辨率）