今天弄了一下午的CSS,结合以前理解,现在谈谈我对CSS的理解,如有不妥之处,请评论或发站内短消息,我们共勉,期待共同进步。
最近一直很流行DIV+CSS,我也就试着学了一下,CSS是标记性语言,配合HTML进行网页外观与内容实现分离。CSS是W3C组织制定并发布,由于W3C是民间组织,所以没有强制要求各浏览器一定要对CSS给以支持,故此,各浏览器对CSS的支持也五花八门。不过随着浏览器开发商对CSS认识的重视,现在对CSS的支持也接近完善(IE,Firefox等 )
1.最近几年流行:DIV + CSS + Ajax
2.CSS是标记性语言,配合HTML语言进行页面外观控制。真正实现外观与内容分离。
3.CSS是由W3C组织负责制订与发布,96年发布CSS1.0,由于W3C是民间组织,所以没有强制要求各浏览器对CSS的支持。
4.属性由CSS标准定义,属性值为样式属性的值。
5.设置属性与值时注意事项
1.属性必须置于{}之内
2.属性与值之间用:分隔
3.多个属性间用;分隔
4.在书写属性时,属性间可放置空格
5.如果一个属性有几个值,每个属性值之间用空格分隔开。
6.CSS语言对属性和值要求严格,如果CSS规范中没有或者不符合要求的,CSS语句不能正常显示。
6.网页中应用样式的方法
1.嵌入样式表:在标签中加入style属性
2.内联样式:位于head之间
<style type="text/css">
<!--
-->
</style>
3.链接|导入样式表:位于head之间
<link href="css file path" type="text/css" rel="stylesheet" />
<style type="text/css">
@import url(css file path)
</style>
导入样式表与链接样式表的功能基本相同,只是语法和运作方式上略有区别。采用import方式导入的样式表。在HTML文件初始化时,会被导入到HTML文件内,作为文件的一部分,类似内嵌式效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式导入。
7.CSS样式选择器:
1.HTML标签选择器,Eg:h1{}
2.ID选择器,Eg:#set{}
3.类作为样式选择器,Eg:.set{}
4.组合选择器,Eg:h1,h2,h3{},h1#set
5.派生选择器,Eg:h1.set{}与h1 .set{}之间的区别
6.超链接专用选择器:针对同一元素的不同状态设置,a标签的link、visited、hover、active四个状态。定义时顺序为LVHA
7.超链接特殊情况:a.news:link{}
8.通配符选择器:*
8.选择器优先级:
标签style属性 > ID > Class >Html标签
9.继承
样式表的继承是根据HTML树型关系,外层的HTML标签CSS会传递到内层标签中(除非该标签不具有该样式属性)
CSS继承原则决定HTML子标签会继承父标签的样式风格,并可以在父标签的基本上加以修改,产生新的样式,而子标签的样式风格不会影响父标签的样式。
10.就近原则:有两种情况
1.谁距标签最近,就用谁的效果;
p{color:red; font-weight:normal;}
p{font-size:18px; font-weight:bold; text-align:center;}
<p>粗体显示</p> //粗体显示,因为第二个p样式定义距标签p距离最近
2.谁定义的更具体,就优先使用谁
p{color:red; font-weight:normal;}
p.c{color:green;}
p#i{color:blue;}
<p class="c">字体绝色显示</p> //字体绿色显示
<p id="i" class="c">字体绝色显示</p> //字体蓝色显示,因为ID优先级>class
11.层次样式表的概念与HTML文档树的层次结构是一致的,沿着某个起始节点,经过一定路径,从而达到指定的位置。
12.CSS属性:
1.长度单位:
相对单位:是以某个对象为参考基本,相对于该参考的单位尺度。px,em,%
绝对单位:是以一个固定值来试题的单位尺度。in,cm,mm,pt,pc
2.颜色值:
颜色名称:a:link{color:gray;}
十六进制:background-color:#ff0000;
RGB分量:background-color:rgb(255,0,0);
一般情况下,网页的配置以不超过四种颜色为宜,过多的颜色反而会适得其反,可根据网站的功能确定一种主基色调
3.字体属性:对单一字体进行的设置
1.font-family:用于设置字体列表,多种字体间用空格分隔,浏览器由前向后依次选择字体。如果一个网站服务器中没有安装前一种字体,则显示下一个字体。
2.font-size:用来控制字体显示的大小,取值有相对和绝对两种方式,相对取值可以使用百分比或相对值。绝对取值使用绝对长度单位。
3.font-style:显示字形样式,有值:normal、italic、oblique
4.font-weight:字体粗细
5.font-variant:设置字体异形。有值:normal、small-caps
6.font属性:字体属性的一种简略写法
4.文本属性:对单一字体形成的字符串进行的设置
用于控制文本的段落格式,包括字符间距(letter-spacing)、文字间距(word-spacing)、行间距(line-height)、文本对齐(text-align,vertical-align)、文本修饰(text-decoration)、文本缩进(text-indent)、文本转换(text-transform)
1.letter-spacing:字符间距,值可正可负
2.word-spacing:单词|汉字间距,值可正可负
3.line-height:文本行高
4.text-decoration:文本修饰
5.text-align/vertical-align:文本对齐
6.text-transform:文本格式转换,有值:none,capitalize,uppercase,lowercase,与font-variant一样,并没有真正将字母进行大小写转换,只是文本显示形式上发生改变。
7.text-indent:首行缩进。
5.颜色和背景
1.color:设置字体颜色
2.background:元素背景设置
6.定位属性
用于控制元素在页面上的位置,实现页面元素之间的重叠。
1.position:设置元素在页面上的定位方式,有值:static(按HTML格式规则正常定位)、relative(元素将定位于前一个元素的末端位置)、absolute(元素将定位在框架或浏览器窗口本身左上角的绝对坐标位置)
relative与absolute都可用top/right/bottom/left进行定位,static即使定了也没效果。
2.top和left属性
3.z-index属性:解决元素的重叠问题
z-index值设为-1时,可以实现img标签背景效果。
4.width和height属性:控制元素的宽度和高度
5.overflow:元素内容溢出处理,有值:visible,hidden,scroll,auto
7.浮动属性与文档流
Css中的浮动可将文本围绕在元素的周围,浮动属性float和clear两种。
float:将元素的内容浮动到页面的左边或右边,有值:left/right/none
clear:指定一个元素是否允许有元素浮动在它的旁边,有值:none/left/right/both
图文混排效果:<img style="float:left" src="img file path"/>文本内容
8.list属性
1.list-style-image:将图像设置为列表项标记,有值:none/url
2.list-style-position:设置列表中列表项标记被放置的位置,有值:inside/outside
3.list-style-type:设置或检索对象的列表项所使用的预设标记。若list-style-image属性值为none或指定的url图片不能被显示时,此属性将发生作用。
4.list-style:列表项设置
9.cursor鼠标属性
用来设置鼠标的不同形状
10.边框属性
1.边界属性:margin:top right bottom left;
2.边框属性:
1.边框宽度:border-width
2.边框颜色:border-color
3.边框样式:border-style
4.border:边框设置
3.填充属性:padding
13.CSS盒模型
盒模型是Web页面一个非常重要的概念,网页文档中的所有元素都可以看成是一个盒子,每个盒子在页面中占据一定空间。