上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css。
- 初步了解css
css的全称为cascading style sheet—— 层叠样式表,通过编入代码来对html里的标签做出各种各样的修饰与改变。
- 如何引入css
- 引入外部css文件
这是我们最常用的方式,通过在head中引入一个link标签引入
例:<link rel="stylesheet" type="text/css" href="1234.css">
2. 在head里写一个style标签,把css写入该标签中
例:
<style>
*{ margin:0; padding:0; }
.miao{
height: 100px;
width: 80px;
background-color: black;
}
</style>
3. 在标签内部直接写在style属性里(个人不喜,但有时候确实好用)
例:<span class="q" style="width:1014px;height:138px;">
在多数情况下,我们推荐第一种方式,因为这样做的话由link引入的css不会阻塞html的
加载(属于异步加载,html和css会同时加载,不会出现在未加载玩css的情况下无法加载html)
4.import方式引入(已经弃用)
在head标签里面写一个style标签,在第一行写上@import url();url里面写上css文件的地址。
这种引入方式存在缺点导致它现在被废弃使用:
1.必须写在第一行,若有多个则一起写在最前面。
2.程序读到import的时候,会忽略掉import,等到html里面的所有内容包括图片在内的所有资源全都加载完之后才加载import的css文件(同步加载,先加载html)
- import与link的区别
1.@import 机制不同于link,link是加载页面前css加载完毕,@import 是先读取文件再加载
2.@import是css2.0里的 ie5以下不支持
3.用js控制dom时改变样式,只能用link,@import不是dom能控制的
4.最后一个很有意思,@import url有最大次数的限制,IE6最多引入31次,firefox并没有发现
@import的优点: 多个样式表导入一个样式表中,页面只需要引入一个即可
- 关于css的优先级
1.位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2.第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
3.第三级的优先属性由<link/>标签所引入的样式表定义。
4.第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
5.第五级优先的样式有用户设定。
6.最低级的优先权由浏览器默认。
link标签引入和style标签修改样式二者之间并没有什么优先级,谁写在前面谁就先执行.。有时候会因为网速问题,link写在上面,但是link还没有加载进来,所以先运行了后面的style,这种问题是网速导致的,并不是二者本身拥有优先级的问题。需要注意的是写在后面的css会覆盖掉写在前面的css,这里再三强调,为了不引起冲突,且让用户具有良好的体验性,我还是推荐引入外部css文件
- 关于css的选择器
1.class选择器
我们最常使用的选择器,目的是元素添加一个类名。(一个元素可以有多个类名,一个类名也可以同时赋给多个元素,这并不互相冲突。)
例:我们先给一个标签附上一个类名
如<div class="p">
然后在css中对其进行控制(这里引图片是怕看不清前面的那个点)
2. id选择器
跟class用法几乎一致,需要注意的是id选择器只能一对一使用,一个标签只能有一个id,一个id只能配给一个标签
例:我们先给一个标签附上一个id
如<div id="p">
然后在css中对其进行控制(注意这里用的是#)
我们一般不用用id来做标记,因为一旦使用,后台的php会提取出来id,然后换成他们的标记,因此可能会导致我们的选择器选择不出来我们想要的标签。
3属性选择器
下面的例子为带有title 属性的所有元素设置样式:
在css中必须要考虑权重问题:
- 属性选择器的权重问题: !important 无穷 // 行间样式 1000 // id 100 // class|属性|伪类 10 // 标签|伪元素 1 // 通配符 0
- 权重的进制是256
- 权重越大,优先级越高
- 权重相同,则遵循后面覆盖前面的原则
- 在计算机语言中,无穷+1>无穷
4.通配符选择器
常用作布局,由于其权重为0,任何一个属性都能将其覆盖
5.标签选择器
看懂了上面的就没啥说的,直接上图
6.父子选择器
找父选择器下的子选择器,沿用上述多个选择器的标准
可以不同的选择器一并使用(这里就只是截取了class=“last3”中的a标签,对其余的a标签无影响)
也可以多个同类选择器一并使用(main下的zhedang)
这里有一点需要注意,浏览器检索时是先找子选择器再找父选择器,因为便于检索,用我的话解释是一个爸爸可以有多个亲儿子,而一个儿子只能有一个亲爸爸,通过爸爸找儿子难,而通过儿子找爸爸是相对容易的。
7.直接子元素选择器
div>p
div直接子元素里面p,按我的理解就是只要儿子不要孙子
<div>
<p></p>
</div>
8.分组选择器
<p></p>
<a></a>
<div></div>
想同时给三种标签都加上相同的样式,就用p, a, div {} 这样的写法,记住中间是用逗号连接。
9 并列选择器
<p class=”demo”></p>
<div class=”demo”></div>
如果出现这种情况怎想要选择出类名是demo的div,我们可以使用div.select {} 来选择出来(标签名在前)。
当然,这种情况理应在写代码时避免
- 关于css的样式
样式=属性名加属性值,样式很多,这里不加详解,大家感兴趣可以去w3c查查看,只提几个要点
文字的颜色是color,而非font-color
系统默认字体:font-family:“arial”;
设置颜色的方法:1.输入英文单词(black)
2.输入三位颜色代码(#ff00cc)
3.rgb模式(rgb(255, 255, 255))
px和em都是相对长度,但前者长度相对固定(可以按绝对理解),后者则是真正的相对长度。
盒模型样式顺序:上,右,下,左(4个);上,左右,下(3个);上下,左右(2个),上下左右(1个);
这里要重点说盒模型
先引一张图片
css它有:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性
类比盒子,内容就是盒子里装的东西;而内边距(PADDING)就是怕盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料;边框(BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出,记住这里的盒子本身不包括MARGIN。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。关于弹性盒子在之后的css3篇我会详细总结,这里就先理解一下。
在计算盒模型大小时要注意:
盒模型本身不包括margin
w3c的标准盒模型,width不包含padding和border,指的只有content。
IE6混杂模式的盒模型,width包含padding和border,它设定了整个盒子的大小。
css3中就有一个属性可以设置我们使用哪一种盒模型—— box-sizing: border-box IE6混杂模式的盒模型; content-box; 标准模式的盒模型