欢迎您, 来到 宁时修博客.^_^

前端----CSS系列_01

2017/10/19 言则行 CSS 765
CSS系列---基础介绍

一、CSS简介   

        层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

        CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

        

二、CSS语法

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

'''
     selector {
          property: value;
          property: value;
          property: value
         
    }
         
'''

        举个例子:

    h1 {    
    	color:red; font-size:14px;
    }

        图示:

111.png


三、CSS的引入方式

    (1) 行内式

         行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

    <p style="background-color: grey">Hello world!</p>

 

    (2) 嵌入式

        嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        p {
          background-color: #2b99ff;
        }
      </style>
    </head>


    (3) 链接式

         将一个css文件引入到HTML文件中。

        link rel="stylesheet" href="index.css">


    (4) 导入式

         将一个独立的css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下:

        <style type="text/css">
         
            @import"index.css";   此处要注意css文件的路径
         
        </style> 

            

     注意:

        导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。


四、CSS选择器

    (1) 基本选择器

        ① 标签选择器

    p {
       background-color: #2b99ff;
    }


        ② 类选择器

    .c3 {
        background-color: green;
    }

        

        ③ ID选择器

    #d1 {
        color: red;
    }


        ④ 通配选择器

    * {
          margin: 20px;
          padding: 20px;
    }


    (2) 组合选择器

        ①多元素选择器

    div,span {
        color: #84a42b;
    }

        同时匹配所有div或span,多个元素之间用逗号分隔。


        ②后代元素选择器

        ul li {
            text-align: center;
        }

        匹配所有属于ul后代的li,两个元素之间用空格分隔。


        ③子元素选择器

        div > p {
            padding: 10px;
        }

        匹配所有div的子元素p,用大于号分隔。

    

        ④毗邻元素选择器

        #content + input {
            color: yellow;
        }

         匹配所有紧随id为content之后的同级元素标签input。

        

        ⑤兄弟元素选择器

        .c1 ~ p {
            color: #84a42b;
        }

        匹配所有类名有c1的同级元素标签p,用破折号分隔。



    (3) 属性选择器

E[att]          匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略。
                比如“[cheacked]”。以下同。)   p[title] { color:#f00; }
 
 
E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
 
 
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }
 
E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}
 
E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
 
E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}


    (4) 伪类

        ①anchor伪类:专用于控制链接的显示效果

a:link(没有接触过的链接),用于定义了链接的常规状态。

a:hover(鼠标放在链接上的状态),用于产生视觉效果。

a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。

a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。



伪类选择器 : 伪类指的是标签的不同状态:

   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }


        ②before after伪类 

:before    p:before       在每个<p>元素之前插入内容     
:after     p:after        在每个<p>元素之后插入内容     

例:p:before{content:"hello";color:red;display: block;}


五、选择器的优先级

    (1) CSS的继承

        继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了的颜色值也会应用到段落的文本中。

body {
  color:red;
}


<p>helloyuan</p>

        p标签里文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承的权重是非常低的,是比普通元素的权重还要低的0。

        如果给p标签设置一个CSS颜色样式,就会覆盖掉继承的颜色。

p {
    color: yellow;
}

        由此可见:任何显示申明的规则都可以覆盖其继承样式。 

        此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。

div {
	border:1px solid #222;
}

<div>
	hello
	<p>wolrd</p> 
</div>


    (2) CSS的优先级

        所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

        样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

    1 内联样式表的权值最高             style="" ---------1000    
    2 统计选择符中的ID属性个数。       #id  -----------100
    3 统计选择符中的CLASS属性个数。    .class ----------10
    4 统计选择符中的HTML标签名个数。   p  ------------1

        按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

        注意:

    1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。    
    2、有!important声明的规则高于一切。
    3、如果!important声明冲突,则比较优先权。
    4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
    5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
点赞

上一篇 :  单表单处理多数据

下一篇 :  前端----CSS系列_02

原文地址 :  https://www.mgchen.com/72.html

说说你的看法

所有评论: (1)