码迷,mamicode.com
首页 > Web开发 > 详细

写给自己的web总结——css篇(1)

时间:2017-12-28 23:21:57      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:支持   文件的   tle   dom   ant   初步了解   nod   sans   内容   

上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css。

  • 初步了解css

      css的全称为cascading style sheet—— 层叠样式表,通过编入代码来对html里的标签做出各种各样的修饰与改变。

  • 如何引入css
  1. 引入外部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 {} 这样的写法,记住中间是用逗号连接。

并列选择器

 

<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; 标准模式的盒模型

 

写给自己的web总结——css篇(1)

标签:支持   文件的   tle   dom   ant   初步了解   nod   sans   内容   

原文地址:https://www.cnblogs.com/yhystand/p/8137627.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!