CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.
HTML的缺陷:当需要修改某些样式时,需要修改所有的样式属性--CSS引入
CSS选择器
ID标记和Class标记的区别:
ID标记不允许同时采用在两个标记中的,因为ID不但适用于CSS代码还适用于JS代码,当js中通过id对html代码进行寻找时,如果一个ID同时出现在两个标记中,将导致js的语法混乱
CSS继承
选择器的嵌套
所谓嵌套就是如果一个标记中包含另外一个标记,那么被包含的这个标记首先会继承前面的这个标记
但是CSS继承也有局限性,在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继承也有其局限性。 首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的。举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性。
CSS滤镜的使用
概述
CSS滤镜并不是浏览器的插件,也不符合CSS标准,而是微软公司为增强浏览器功能而特意开发的并整合IE浏览器中的一类功能的集合。
CSS滤镜的标识符是filter,语法:filter:filtername(parameters)
透明度:filter:alpha(opacity=50)即透明度为50%
模糊:filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false)
pixelradius为模糊效果
透明色:filter:chroma(color=ff6800)即将图片中的某一种颜色直接去掉
翻转:filter:fliph---水平翻转,flipv--竖直翻转
遮罩:filter:mask(color=#8888ff)希望采用遮罩效果的颜色,紫色
波浪:filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4)
CSS与DIV定位
1,div与span标记
行内元素:span---一个容器
块级元素:div--一个容器
div与span的区别就是:span为行内元素,div为块级元素
块级元素是占满一行的,而行内元素的大小只与内容大小有关
2,盒子模型
博客链接:http://blog.csdn.net/hejingyuan6/article/details/8960189
3,元素的定位
Float:浮动
Position:相对定位,绝对定位
z-index:哪个排在上方。浏览器中默认的是后出现的代码出现在先出现的代码上方
4,给图片签名:直接将签名移动到图片上
CSS排版
1,将页面用div分块
2,设计各块的位置
固定宽度且居中的版式
方法一:将整个body设置成居中,然后将container设置成固定宽度
方法二:其中container的width为700px
CSS与其他语言的应用
CSS与JavaScript
JavaScript概述
JavaScript是一种基于对象的脚本语言,使用它可以开发Internet客户端的应用程序。JavaScript在HTML页面中以语句的方式出现,并执行相应的操作。
CSS与XML的综合应用
XML基础
与html类似,xml的各个标记也是以<tag>开始</tag>结束的。而xml语法上要求更为严格,如果有开始标记就必须有结束标记。对于空标记,xml要求标记必须用一个斜杠和一个右尖括号来表示,例如<img/>。html中的标记都是预定义好的,而xml我们可以自己定义标记
CSS与AJAX的综合应用
AJAX:局部刷新
总结:应用CSS可以更好的控制网页的布局,美化我们的界面。而且CSS实现了格式和结构的分离,使得我们修改页面的外观更加简单,方便。