CSS的初步学习

Web学习Day8——CSS

前端三要素
Html：木偶 css：化妆 javascript：动态展示
（1）什么是CSS
CSS(CascadingStyleSheets)层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。
层叠样式表，用来美化网页的，做到结构html和表现css分离

（2）CSS声明（CSSdeclarations）
css语言的核心功能就是为特定的属性设定特点的值，css引擎通过计算出声明的每个属性来显示元素。css的属性和值都是大小写敏感的。
1.属性名和属性值之间使用:隔开 多对属性之间使用;隔开最后一对属性可以不加分号

id="one"
			class='one'
			style='根据css语法设置'
			title='one'
			<div style="width:100px;height:100px;color:red;"></div>
			<style>
				选择器{
					width:100px;
					height:100px;
					color:red
					...}
			</style>
			<div></div>

	**2.速记写法**
		border:1px solid red;
			border-width:1px;
				border-top-width
				border-left-width
				border-right-width
				border-bottom-width

			border-style
				border-top-style
				border-bottom-style
				。。。。
			border-color

	盒子=内容区+内边距+边框+外边距
				padding  margin

	
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;

-->
padding:10px;//上下左右均为10px
padding:10px 20px;//上下10px 左右20px
padding:10px 20px 30px;//上10px 左右20px 下30px

padding:10px 20px 30px 40px;//上 右 下 左

margin：

	3.注释
		1.注释写法
			/*注释内容*/
		2.注释的作用
			解释说明
			更好的维护和管理
		3.注释不能嵌套使用

（3）CSS声明块（CSSdeclarationblocks）
将多个css声明写在一起，每个css声明通过“;”分隔开，最后一个css声明无需使用“;”分隔开。使用“{”“}”将多个css声明括起来，这样就构成了一个css声明块。

（4）CSS选择器和规则（CSSselectorsandrules）
在css声明块前添加一个选择器，用来指明将css声明应用在哪些元素上。

（5）CSS可读性（makeCSSreadable）
空白（Whitespace）空白意味着实际空格、制表符和新行，可以添加空白使样式表更加可读。
注释（Comments）/这里就是CSS的注释/
速记写法（Shorthand）类似于font，background，padding，border，margin这些都被称为速记属性。这些属性允许我们在一行中写多个属性值。速记属性可以节省时间，使代码整洁。
例如：padding:10px15px15px5px;
等价于padding-top:10px;padding-right:15px;padding-bottom:15px;padding-left:5px;

（6）CSS如何作用于HTML？
a.行间样式：直接在标签上书写样式
b.内部样式：在文件内部书写样式
c.外部样式：1.先创建一个css文件 2.用link标签引入
d.导入外部样式：1.先创建一个css文件；2.在style标签中用import导入这个样式文件

以上四种CSS引用方式的区别：
1.行间样式只作用当前标签 而内部标签作用于当前文件 外部样式可以被多个html文件引用
2.在实际项目开发中，最好使用或者最多使用的是外部样式，外部样式分为link引入和import引入两种方式，
3.这两种方式的区别是：1.link是XHMTL标签，除加载css外，还可以加载RSS等其他事务，而import属于css范畴，只能加载css。Link先加载css，html优先加载html。
4.引入css的优先级问题：行内>内联样式/外部引入（html的解析顺序
就近原理：哪一种设置方式更靠近元素，哪一种方式的优先级更高

（7）CSS工作原理
当一个浏览器在显示文档的时候，需要将文档内容和样式内容结合到一起，以此，在处理文档的时候包含两个阶段：
1.浏览器将HTML和CSS转换为DOM(DocumentObjectModel)，DOM在计算机内存中表示文档,使得文档和CSS结合。
2.浏览器显示DOM的内容

（8）css选择器
1.标签选择器
标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。

<style>p{height:100px;border:1pxsolidred;}</style>
<p>one</p><p>two</p><p>three</p>`

2.类选择器（Class selectors）
类选择以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。一个元素可以有多个class的值，每个值通过空格分割开。类名相同的元素属于一类元素。

<style>.first{font-weight:bold;}
.done{text-decoration:line-through;}</style>
<ul><liclass="firstdone">CreateanHTMLdocument</li>
<liclass="seconddone">CreateaCSSstylesheet</li>
<liclass="thirddone">Linkthemalltogether</li></ul>

3.ID选择器（IDselectors）
ID选择器以"#"开头，后面紧跟一个ID名，在一个文档中，ID值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。

<style>#polite{font-family:cursive;}
#rude{font-family:monospace;text-transform:uppercase;}</style>
<pid="polite">—"Goodmorning."</p>
<pid="rude">—"Goaway!"</p>

4.普遍选择器（Universalselector）
使用"*”来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。

<style>.left-nav>*{width:200px;background-color:#fafafa}</style>
<articleclass="left-nav">
<dl><dt>推荐</dt>
<ddclass="current"><iclass="icon-music"></i>发现音乐</dd></dl>
<dl><dt>我的音乐</dt><dd><iclass="icon-cloud-download"></i>下载</dd></dl></article>

5.层次选择器
(1)后代选择器（descendantselector）使用“”隔开两个选择器。例如“ulli”表示选择ul的后代元素li，li可以为ul的直接子元素，也可以为ul的孙子元素。
(2)子代选择器（childselector）n使用“>”隔开两个选择器。例如"ul>li"表示选择ul的直接子代元素li,ul的孙子元素li无法被选择到
(3)相邻同胞选择器（adjacentsiblingselector）使用“+”隔开两个选择器。例如".one+"表示选择class为"one"元素的下一个兄弟元素。
(4)一般同胞选择器（generalsiblingselector）n使用“_{”隔开两个选择器。例如".one}"表示选择class为"one"元素的所有兄弟元素。

6.多选择器（descendantselector）
多个选择器并列使用，使用“,”分割。例如"div,.one,#tt"表示选择div元素，class为one的元素以及id为tt的元素

7.组合选择器
多个选择器组合使用。例如"div.one"表示class为one的div元素。

8.属性选择器（Attributeselectors）
[attr]选择具有attr属性的元素、无论该属性的值为什么
[attr=val]选择具有attr属性的、并且attr的值为val元素
[attr~=val]选择具有attr属性的、并且attr的值之一为val的元素
[attr^=val]选择具有attr属性的、并且attr的值以val开头的元素
[attr$=val]选择具有attr属性的、并且attr的值以val结尾的元素
[attr*=val]选择具有attr属性的、并且attr的值包含val的元素

9.伪类选择器
伪类以":“开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中
表示子元素的 :only-child :first-child :last-child :nth-child(n)、:nth-last-child(n)
可以为元素的序号，也可以为特殊的字符，比如“odd”，“even :first-of-type、:last-of-type、 :nth-of-type(n)、:nth-last-of-type(n)
可以为元素的序号，也可以为特殊的字符，比如“odd”，“evenl
元素状态相关
:hover、:active、:focus :enabled、:disabled；:checked、:default :invalid、:valid、:required、:optional、:in-range、:out-of-range
10.伪元素选择器 伪元素以”::"开头，用在选择器后，用于选择指定的元素。
::after ::before ::first-letter ::first-line ::selection

选择器的优先级
！Important：不计入特性值中，只用了该属性了样式优先级最高
优先级根据特性值来计算，特性值越大优先级越高，特性值相同，就近原则
Style属性中：特性值1000
Id选择器：特性值100
类选择器/属性选择器/伪类选择器：特性值10
标签（元素）选择器/为原始选择器：特性值1