CSS发展史
1996年12月 css第一版诞生。
1998年5月 css2正式发布
2004年 css2.1发布
Css3的发布……。不是一个时间而是一个时间段
css3模块介绍
- css1中定义网页的基本属性:
字体、颜色、补白、基本选择器 css2中在 css1基础上添加了高级功能
浮动和定位、高级选择器(子选择器、相邻选择器、通用选择器)css3遵循的是模块化开发。发布时间并不是一个时间点,而是一个时间段。
css简介
CSS的基本概念
CSS是层叠样式表(Cascading Style Sheet)
CSS的作用
用于控制网页的外观,修饰和美化html标签的,实现了结构和形式的分离。
使用CSS+DIV的优点
采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优
1:表现和内容相分离
2:提高页面浏览速度
3:易于维护和改版
样式表的定义方式
Css样式定义在样式表中
样式的定义方式
选择器{样式1:样式值1;样式2:样式值2;……}
样式表的分类
1、行内样式表
在html标记内,使用style属性定义css样式。
如:<p style=”color:#00ffdc;”></p>
2、内嵌式样式表将css添加到<head>与</head>
之间,并用
<style></style>标记声明的一种样式。
语法如下:
<style>
/*这里写css内容*/
</style>
3、外部定义css样式表,通过<link/>
链接标记链接到页面中的一种样式。
语法:
<link href="style.css" rel="stylesheet" type="text/css" />
4、在外部定义css样式表,通过导入方式链接到页面中的一种样式。
语法:
<style>
@import url();
</style>
样式表的优先级
就近原则
CSS选择器
1:基本选择器
Css选择器
全局选择器
设置所有标签使用同一样式,用*来表示
全局选择器语法:*{ }
标签选择器
标签选择器的语法:p{}
类选择器
类选择器:用来为一系列标签定义相同的样式
类选择器的语法: .classname{}
先定义
.blue{color:#00000ff;}
然后再引用
<h2 class=“blue” >一站式建店</h2>
ID选择器
ID选择器的语法:#idname{}
先定义
#green{color:#0000ff;}
再引用样式
<h2 id=“green” >一站式建店</h2>
用法和class类似,但要注意同一id名在同一个页面中只能出现一次
选择器的优先级及权重
行内>id>class>element>*
权重:
行内/1000
id/100,
class/10,
element/1,
*/0
基本样式
基础样式属性
Color:颜色;规定颜色值为颜色单词名称例如(red)或者十六进制值得颜色例如(#ff0000)或者为rgb值得颜色例如(rgb(255,0,0));
Width:宽度;设置元素的宽度值,值为数字;单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)
Height:高度;设置元素的高度值,值为数字;单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)
Background-color:背景颜色;规定颜色值为颜色单词名称例如(red)或者十六进制值得颜色例如(#ff0000)或者为rgb值得颜色例如(rgb(255,0,0));
Inherit:属性值,大部分属性都有该属性值意义为继承。
颜色值的表示法
单词表示法 Red green blue yellow pink orange…
十六进制表示法
#ff0000 #00ff00 #0000ff #000000 #ffffff
#f00 #0f0 #00f #000 #fff
Rgb表示法 (255,0,0)
Rgba表示法 (255,255,0,0.3)
note3
html:结构
css:修饰和美化HTML标签->表现
历史:96年css第一个版本。easy decorate change color size 补白、基本选择器
2000年网吧火
css3新特性:
css<cascading style sheet>层叠样式表
css作用:用于控制网页的外观, 修饰美化htmlb标签,实现了结构和形似的分离
css优点:【表现和内容想分离|提高页面浏览速度|易于维护和改版】
1:css的使用
css定义方法:
【1】css应写CSS样式表里
【2】css样式应该怎么写
语法: 选择器{ 样式1:样式值;样式2:样式值2;....}
【样式表】:/he
【1】:行内样式表 style=""
<h2 style="color:red"></h2>
【缺点】
只能给当前的标签定义样式,不能给所有相同标签设置
结构样式未分离
【优点】
级别最高
【2】:内部样式表(内嵌式样式表)
<style type="text/css"> H5中{type="text/css"}不用谢
样式
span{color:pink;}
</style>
【缺点】
结构与样式未分离
【优点】
可以定义同一样式
【3】:外部样式表
1:链接式样式表(常用 最多用)
<link href="css/index.css" type="text/css" rel="stylesheet"/>
【优点】
实现结构样式的分离
维护方便
2:导入时样式表(几乎不用)
<style type="text/css">
@import url(样式表的路径);
</style>
【样式表的优先级】:
行内演示表:就近原则(行内)最高 外部和内部与顺序有关
【选择器】:
基本选择器
《1》【全局选择器】:*{样式1:样式值;样式2:样式值2;...}
【*】标示页面所有标签
特点:页面当中所有标签都具有相同样式
《2》【标签选择器】:
p{样式1:样式值;样式2:样式值2;...}
/**/css注释
优缺点:
相同 标签具有统一样式
《3》 问题:相同标签有统一样式 | 不同的标签有统一样式
【类别选择器】
选定义后使用
定义:.classname{样式1:样式值;样式2:样式值2;...}
使用:<p class="classname"></p>
特点:
定义一次可以多次使用
《4》【id选择器】
先定义后使用
定义; #idname{样式1:样式值;样式2:样式值2;...}
使用:<p id="idname"></p>
特点:相同的ID名称,在一个页面中只能出现一次(id唯一)
问题:
一个标签可以引入多个类别选择器 怎样引入?
并列引入, 以最早引入的为主
class="a b" 一般引入两个 中间加入空格
一个标签可不可以同时引入类别选择器和ID选择器?
可以同时,单被覆盖,以ID选择器为主
四种选择器的优先级?
#>.>eliement>*
选择器的优先级:
行内样式表>id>.class>element(元素)>*
【权重】 1000 100 10 1 0
text-decoration:underline;
【颜色标示法】<rgb>
单词表示方法:
red green blue yellow pink purple white black orange gray
十六进制颜色表示方法:(0-9)(a-f) 0最小 f 最大
#ff0000红色 #00ff00绿色 #0000ff蓝色 #ffff00黄色
#000000黑色 #ffffff白色 #ddddddd灰色
#f00
RGB标示方法(0.255)
background-color:rgb(255,0,0); 红色
background-color:rgb(120,120,120); 灰色
rgba表示法(rgb 红绿蓝 a标示透明度0-1之间值 0.3|0.4 0==表示完全透明 1==不透明)
background-color:rgba(255,0,0,0.1); 红色
background-color:rgba(120,120,120,1); 灰色
opacity:0.5也可以设置透明度,但是影响文字
【宽|高的表示法】
witdth:500px(固定单位); width="50%"(流体); width:em/rem(相对单位)
em:相对于父类元素进行改变
rem:相对根元素进行改变;
基本样式:
color:
background-color:
widht|height
<h3 align="center">写在标签里面的东西叫:标签属性</h3> 标签属性="标签属性值"
h3{
color:red; css属性:css属性值
}
能用CSS属性设置的不要再用标签属性了
text-align:center;
层叠 :样式表 多个页面可以引用 一个css属性可以多个标签使用
引用多个class选择器时,用空格隔开
当class发生冲突时,以最后出现的class选择器样式为主
不同浏览器会在最外面设置空白边距,可以用margin:0 | padiing:0进行消除
*{
margin:0;
padding:0;
margin-top:0px;
margin-left:0px;
margin:10px 0px 0px 10px;(上右下左|顺时针)
}
/*灰色滤镜 自行设置可见效果*/
img{
filter:gray;
}
邮箱
<a href="mailto:地址"></a>