欢迎光临
我的个人博客网站

前端基础——CSS(一)


CSS

  • css 层叠样式表(cascading style sheets),作用是静态的修饰网页,并且可以配合各种脚本语言动态的对网页各元素进行格式化

  • 发展过程

        版本:             时间:                    css1             1995年12月     css2             1997年初     css3             1999年开始制订 
  • 前端三层技术

  • html —-> 结构层 ——- 从语义的角度搭建网页结构
  • css —-> 样式层 ——- 从美观的角度描述页面样式
  • JavaScript—>行为层 ——- 从交互的角度描述页面行为
  • css实现了页面的结构和样式分离,拯救了混乱的HTML
  • css组成

       层叠层                            样式    (css中贯穿始终的加载特性)        (定义如何显示HTML元素)     层叠性                          文字文本     继承性                          背景                                     盒模型                                     浮动                                     定位                                     其他 

css 书写位置

  • 内联式 : 也称行内式,在HTML标签上的style属性中书写css样式

    <div style="width:100px;height:100px;background>

    内联式缺点:必须写在标签上,使标签结构繁重,增加代码量

  • 内嵌式 :
    缺点:结构和样式没有完全分离,代码依旧书写在HTML文件的<style>标签内部;css样式只能给一个HTML文件使用,若css代码太多,会造成头重脚轻。
  • 外联式 :在HTML的<head>标签内部使用<link>标签引入
  属性名     属性值            说明    rel    "stylesheet"    表示引入的外部文件与html之间的关系    href    css 文件路径    超文本引用    type    "text/css"     表示加载时代码按照纯文本形式的css代码加载 

外联式的优点:1.实现了HTML和css完全分离;2.多个HTML文件可以公用一个css文件,减少代码量,便于提取公共的css;3.实现一个css变化,多个页面同时变化;4.一个HTML文件可以引入多个css文件,可以实现同一个页面中的css代码分层

  • 导入式 :(不建议使用直接在html中使用)
    导入样式和链接样式比较相似,采用@import样式导入CSS样式表,在HTML初始化时,会被导入到HTML或者CSS文件中,成为文件的一部分,类似第二种内嵌样式。会在加载html文档后在加载样式所以有时会出现没有样式的情况(很短暂),然后就有样式了

    @import在html中使用,如下:

    <style type="text/css">

    @import url(style.css);

    </style>

CSS规则

css规则由两个主要部分构成:选择器,以及一条或多条声明

多条样式属性
p{ width : 400px; font-size : 14px;}
|       |           |
选   属         属
择   性         性
器   名         值

样式规则
1.内嵌式中所有代码必须写在<head>标签内的<style>标签内

2.给每个选择器添加的样式属性都必须写在一对大括号{}之内

3每条属性后面的分号必须写,若不写,会导致后面的代码加载错误

4.上传服务器时,常常使用紧凑格式的css样式格式,减少不必要的空白字符,压缩文件大小,便于传输

(有专门的网站可以进行css代码压缩/解压缩格式化)

CSS常用样式

颜色color:给文字设置颜色的

字体font-family:元素内文字的字体,字体属于font综合属性的一个单一属性。属性值可以有多个,值之间用逗号分隔。

浏览器中加载的字体是用户机器中自带的,如果电脑没有设置的字体则加载失败,需要查找下一个,所有往往在最后设置一个所有机器都具备的通用字体作为后路。

盒子模型实体化——三属性

  • width、height、background-color

CSS 高级选择器

  • 选择器:选择要添加样式的HTML标签的一种方法、模式
  • css2.1版本有7中选择器:

    基础选择器:标签选择器、id选择器、类选择器、通配符选择器

    高级选择器:后代选择器、交集选择器、并集选择器

  • 标签选择器:通过标签名选择标签元素。选中的是HTML文件中所有的同名标签。(不受嵌套关系影响,依旧能选中)
  • id选择器: 通过标签上的id属性去选择标签。

    如果希望多个标签设置相同的样式,使用id选择器的话,必须给这多个标签去不同的id名,分别选中设置。【书写:#id属性值】

  • 类选择器:通过标签上的class属性去选择标签。
    选择的是页面中所有class属性值相同的标签。【书写:.class属性值】
  • 通配符选择器:通过一个特殊符号选择页面内所有的标签,选择的是<html>标签在内的所有标签。【书写:* 】

    缺点:选择效率低,会让不需要的标签也加载一次样式,导致浏览器多做无用的工作。

  • 后代选择器:包含选择器,通过标签之间存的嵌套关系去选择元素,相当于基础选择器。【书写:空格表示后代,空格前面的选择器选中的标签是后面选择器选中的祖先级】
  代码示例:    <style>       .b1 ul li p{       color:red;       }    </style>    ......    <div class="b1">        <ul>         <li><p>b1 标签 里的 li标签 内的段落p </p></li>         <li><p>b1 标签 里的 li标签 内的段落p </p></li>         <li><p>b1 标签 里的 li标签 内的段落p </p></li>         <li><p>b1 标签 里的 li标签 内的段落p </p></li>         </ul>     </div> 
  • 交集选择器:通过一个标签上满足所有基础选择器稍微需求去选择标签。如果一个条件不满足都不能被选中,常见的是标签与类的交集。

    【书写:基础选择器进行连续书写,如果有标签选择器参与交集,必须书写在开头。
    还可以进行类名的连续交集。交集选择器可以作为其他高级选择器的组成部分。(IE6不支持类名连续交集写法)

     代码示例:      <style>         p.demo{             color:red;         }//颜色为红色         .d1 p.demo{             color:red;         }//这个覆盖了上面的直接为绿色     </style>     ....     <div class="d1">        <ul>           <li><p>b1 标签 里的 li标签 内的段落p </p></li>           <li><p class="demo p1">b1 标签 里的 li标签 内的段落p </p></li>           <li><p>b1 标签 里的 li标签 内的段落p </p></li>           <li><p>b1 标签 里的 li标签 内的段落p </p></li>           <li><p>b1 标签 里的 li标签 内的段落p </p></li>        </ul>     </div> 
  • 并集选择器:可以将前面的6种选择器中间用逗号进行分隔,最后一个不写逗号。选中的是所有的单独选择器选中的标签的并集集合。
   代码示例:     <style>        div,.demo{           color:red;         }      </style>      .....       <div class="d1">        <ul>           <li><p>b1 标签 里的 li标签 内的段落p </p></li>           <li><p class="demo p1">b1 标签 里的 li标签 内的段落p </p></li>           <li><p>b1 标签 里的 li标签 内的段落p </p></li>           <li><p>b1 标签 里的 li标签 内的段落p </p></li>           <li><p>b1 标签 里的 li标签 内的段落p </p></li>        </ul>     </div> 

如果多个标签具有公共样式,但是不能用一个选择器选中,可以使用并集写法,也可以用该方法,进行默认样式清除,替换通配符的功能。

   body,h2,div,ul,li,p {        margin:0;        pading:0;    } 
  • 行内式样式 与 内嵌式 或 外链式样式比较权重时,行内式权重最高。
  • 但是,与!important关键字相比权重要低的~

CSS 层叠式

  • 继承性:样式可以从祖先级继承而来
  • 层叠性:多个选择器在进行对比的过程中,最终只有一个属性会加载成功,它会层叠、覆盖掉其他的属性。
赞(0) 打赏
未经允许不得转载:张拓的天空 » 前端基础——CSS(一)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏