CSS初识1

CSS：cascading style sheet 层叠样式表

1.CSS的引入方式

    （1）、行间样式

也叫内联样式。

除了在body外部出现的标记（例如，head和title），style属性可以与任何其他HTML标记关联。

	
	

		
好好学习，天天向上
	

    （2）、 页面级CSS 

    在head标签里面编写CSS 的代码

    （3）、外部CSS文件

    补充：link必须放在head元素中;一个文档中可以关联多个样式表，浏览器加载这两个样式表，合并它们的规则，并应用于文档。

（4）、规则结构

每个规则都有两个基本部分：选择器（selector）和声明块（declaration block）。声明块有一个或者多个声明组成，每个声明则是一个属性 - 值对（property-value）

h1 {color : red ; background:yellow;}

（5）、选择器

    选择器种类：！improtant，id选择器，class选择器（属性选择器），行间样式选择器，标签选择器，通配符选择器，

    选择器之间的权重比较：！improtant>行间样式>id选择器>class|属性选择器|伪类选择器  >  标签|伪元素  >  通配符

    

•     id选择器

    一个HTML文件中有且只用一次id选择器。ID选择器不予许结合使用，不允许有以空格分隔的词列表。

    HTML文件：

CSS样式：

#only{

	width: 100px;
	height: 100px;
	background-color:red;
}

• class 选择器

    html:

css

.yilei{
	width: 200px;
	height:300px;
	background-color: red;
}

• 标签选择器

    

CSS :

div{

	width: 200px;
	height:300px;
	background-color: #f40;
}

• 通配符选择器

*{
	margin: 0;
	padding: 0;
}

• 行间样式选择器

    参见行间样式引入CSS

   （5-1）属性选择器

根据元素的属性及属性值来选择元素。共有四种属性选择器P45

• 简单属性选择

        

/*所有h1选择class属性（不限值)的样式*/
h1 [class] {color: red;}

/*对所有带有alt 属性的图片应用到某种模式*/
img [alt] { border: 3px solid red ; }

还可以根据多个属性进行选择，只需要将属性选择器链接在一起就可以。例如：

a [href] [title]{ font-weight: bold; }/*将同时有href  title 属性的超链接的文本设置样式*/

• 根据具体属性值选择

h1 [class="1"] {color: red;}

这种格式要求必须与属性值完全匹配

	 

	 	早上好！
	 

需要完全匹配，一个空格都不能少

div[class="health  help"]{
	width: 140px;
	background-color:red;
	height:150px;
}

• 根据部分属性值选择

/*想选择class属性中包含有help的元素，用一个波浪号~=来实现。*/
div[class~="help"]{
	width: 150px;
	background-color:red;
	height:150px;
}

更多内容P48

• 特定属性选择类型

/*其中每个图片的文件名都形如figure-1.gif 和 figure-3.jpg */
img[src|="figure"]{
	border: 1px solid gray;
}

（5-2）伪类选择器

伪类选择器

:link	指示作为超链接并指向一个为访问地址的所有锚。
:visited	作为已经访问地址超链接的所有锚。
:focus	当前拥有输入焦点的元素，也就是说，可以接受键盘输入，或者能以某种方式激活的元素。
:hover	鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上,   :hover 就会指示这个超链接
:active	被用户输入激活的元素。例如,鼠标指针停留在一个超链接上,如果用户点击鼠标,就会激活这个超链接：active 将指示这个超链接。

伪类的顺序很重要

	 

	 	
		百度
	 

a:focus{
	color: #03c;
}
a:hover{
	color: #000;
}
a:active {
	background-color: red;
}

（6）、选择器的权重

选择器权重值

选择器名称	权重值
!improtant	Infinity
行间样式选择器	1000
id选择器	100
class选择器 || 属性选择器  ||  伪类选择器	10
标签选择器  ||  伪元素选择器	1
通配符选择器	0

权重之间的进制：255 进制

权重选择器的计算：把选择器标签权重相加。

相同权重，后来先到。

2.选择器权重的应用

（1）、父子选择器（包含选择器或上下文选择器）

从右向左 用空格分隔的选择器，空格是一种结合符。

html:

	

		
			23456
		
	

css：

div strong em{
	background-color: red;
}

选择器权重值：1+1+1

（1-1）选择子元素

用大于号：>   选择一个元素的子元素。

	
	 

	 	早上好！
	 
	 

	 	
	 	你好！
	 	
	 

div>strong {
	color: red;
}

（2）、并列选择器

    用多个限值条件，确定一个元素，且不用空格。注意：标签选择器放到前面，示例：

	
	
1
	
2
	
3

div.demo{
	width: 200px;
	height:300px;
	background-color: red;
}

（3）、分组选择器

标签用逗号分隔开，简化代码

	
1
	2
	
3

div,p,em{
	background-color: red;
}

（4）、多类选择器--类选择器的扩展

    一个class值中有可能包括一个词列表，各个词之间用空格分隔。如果希望这样一个特定元素同时标记为紧急（urgent）和警告（warning）就可以写作：

	 

	 	早上好！
	 

.help.health{
	width: 100px;
	background-color:red;
	height:150px;
}

两个词的顺序无关紧要，写成 warning urgent 也是可以。通过两个类选择器连接在一起，仅可以选择同时包括这些类名的元素（类名的顺序不限）。

（5）、! improtant

 

div{
	width: 100px !important;
	background-color:red !important;
	height:100px !important;
   }

    

3.CSS代码块

（1）.CSS格式

div{
/*属性名+冒号+属性值+分号分隔*/
	width: 200px;
	height:300px;
	background-color: #f40;
}

学会通过字典来查阅属性，并赋值练习。

（2）.颜色的格式

• 直接名称： red
• 颜色代码：#f40--

       三原色：r  g  b 两位代码代表一个颜色，16进制，00-ff    

        每两位重复，可以写一位#f40   (#ff4400)

• 颜色函数：rgb(255,255,255)

（3）、标签属性

    复合属性，单属性

这些内容都是需要再强化的。

备用知识：sublimetext3 的分屏  Alert+Shift +2

CSS 中的注释不能嵌套--外部注释会在内部注释结束处结束。/**/