8.CSS3入门

CSS3入门

CSS样式规则

选择器{属性1:属性值1;属性2:属性值2;}/*没有英文引号*/

引入CSS样式表

行内式

<标记名 style="属性1:属性值1;属性2:属性值2;">内容/*行内式*/

内嵌式

	
/*内嵌式*/

链入式

	"CSS文件的路径" type="text/css" rel="stylesheet" />
/*链入式*/

例如：html文件代码为：

	"utf-8">
	
	"测试.css" type="text/css" rel="stylesheet" />


	
把很长的一段文本中溢出的内容隐藏，出现省略号

CSS3代码为：(注意文件名应该为"测试.css"，且和对应的html在同一目录)

p{
    width:200px;
    height:100px; 
    border:1px solid #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
(代码格式为：选择器{属性1:属性值1;属性2:属性值2;})

优先级：行内式>内嵌式>链入式>默认

（注意：CSS区分大小写，而且CSS注释方式于html有所不同）

CSS基础选择器

标记选择器

标记名{属性1:属性值1;属性2:属性值2;}/*标记选择器*/
例如：
p{font-size:12px;color:#666;font-family:"微软雅黑";}
/*能快速为页面中同类型的标记统一样式，不能差异化设计*/

类选择器

.类名{属性1:属性值1;属性2:属性值2;}
例如：
.red{color:red;} .font22{font-size:22px;}

"red font22">段落文本
/*可以为元素对象定义单独或者相同的样式*/

id选择器

#id名{属性1:属性值1;属性2:属性值2;}
例如：
#bold{font-weight：bond;}

"bold">段落文本
/*id选择器不像类选择器可以定义多个值*/

通配符选择器

*{属性1:属性值1;属性2:属性值2;}
例如；*{margin：0;padding：0;}
/*设置的样式对所有HTML标记都生效，一般不推荐使用*/

标签指定式选择器（不加空格）（只能标记选择器和class选择器(id选择器)之间）

由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，如h3.specizl或p#one
例如：


蓝色
"special">红色
"special">绿色
"special0">未变红色，为默认蓝色

后代选择器（加了空格）（任何两个选择器之间都可以）

其写法就是把外层写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代
例如：


"two">你好世界
"one">"two">你好世界
你好世界

(注意：命名不能以数字开头。最好使用后代选择器，可以解放关键字标记选择器，且不易混淆)

并集选择器

并集选择器可以同时定义多个属性相同的样式，与各个选择器单独定义样式完全相同，可以使css代码更加简洁，同一选择器可以被多次定义，起到叠加效果
例如：


你好世界
你好世界
"one">你好世界