专栏首页用户2442861的专栏CSS基础-引入方法,选择器,继承

CSS基础-引入方法,选择器,继承

一.CSS引入方法:行内式、嵌入式、导入式、链接式。

    1、行内式。

    即:在标签的style属性中设定CSS样式。

    例子:<div style="background-color:red">行内式</div>

    2、嵌入式

    即:将页面各种元素的设置集中写在<head></head>标签里。

    例子:

    <head>  

    <style type="text/css">

        div{ background-color:blue; }   

    </style>

    </head>

    3、导入式

     即:将一个外部CSS文件引入CSS文件或HTML文件,注意此方法既能在CSS文件里使用也能够在HTML的<head></head>标签之间使用。

    <head>

       <style type="text/css">

           @import "main.css";

       </style>

   </head>

    4、链接式

    即:将一个外部CSS文件引入HTML文件

    例子:

    <head>

        <link href="main.css" rel="stylesheet" tyle="text/css">

    </head>

二、选择器

     1、ID选择器

     根据HTML元素的id属性选择元素。

     例子:

     CSS:     #div1{ background-color:red; }     /* 选中id为div1的HTML元素 */

     HTML:   <div id="div1">我是ID为div1的div元素</div>    

     2、class选择器

     根据HTML的class属性选择元素。

      例子:

      CSS:     .left{ background-color:red }

      HTML     <div class="left">我是class="left"的div元素</div>

      3、标签选择器

      根据HTML标签选择元素

      例子:

      CSS:     div{ background-color:blue; }

      HTML:    <div>我是一个div元素</div>

      4、复合选择器

      4.1   交集选择器

      例子:

      CSS:    p.special{ color:red; }    /* 选中class="special"的p元素 */

      HTML:  

      <p>我是一个p</p>    /* 不会被选中 */

      <p class="special">我是一个class="special"的元素</p>    /* 选中该行 */

      4.2   并集选择器

      例子:

      CSS:   .special,div,p { background-color:red; }

      HTML:   

      <span class="special">我是一个class属性为span的元素</span>

      <div>我是一个div元素</div>

      <p>我是一个p元素</p>

      以上三行HTML代码都会被选中。

      4.3  后代选择器

      后代选择器:选中所有后代元素

      例子:

      CSS:    .special p{ background-color:red; }

      HTML:  

      <div class="special">

          <p>我是.special里的p元素</p>       /* 会被选中 */

          <div>

             <p>我是.special里的p元素</p>   /* 会被选中 */

         </div>

     </div>

     <p>我也是一个p</p>      /* 不会被选中 */

    直接后代选择器

    即:选择直接子后代

     CSS:   .special>p{ background-color:red; }

      <div class="special">

          <p>我是.special里的p元素</p>       /* 会被选中 */

          <div>

             <p>我是.special里的p元素</p>   /* 不会被选中,因为不是直接子元素,是孙子元素了 */

         </div>

     </div>

     <p>我也是一个p</p>      /* 不会被选中,非子元素 */

  五、属性选择器

      CSS:    a[title]{ font-size:30px; }    //选中含有title属性的a元素

<a title="a1" href="/">我是第一个a标签</a>   //会被选中,含有title属性 <a href="/">我是第二个a标签</a>                //不会被选中,没有title属性

     a[title="a1"]{ font-size:30px; }  //选中title属性=a1的元素

<a title="a1" href="/">我是第一个a标签</a>   //会被选中,含有title,并且title=a1

<a href="/">我是第二个a标签</a>                //不会被选中,没有title属性

<a title="a2" href="/">我是第一个a标签</a>   //不会被选中,title不=a1

      其他属性符号:a[title~='a1']   选中<a title="a1 important"></a>  选中title属性中包含a1的元素,注意a与其他值要有空格

                               a[title^='a1']   选中<a title="a1bcd"></a> 选中title属性以a1开头的元素

           a[title$='a1']    选中<a title="bcda1"></a>  选中title属性以a1结束的元素

           a[title*='a1']    选中<a title="xxa1xx">    选中title属性中包含a1的元素

           a[title|='a1']     选中<a title="a1-bcd"></a>或<a title="a1"></a> 选中title属性中包含"a1-"开头或等于"a1"的元素,常用于选择src="logo-1","logo-2"等属性。

六、相邻兄弟选择器"+"

CSS:   span + p

HTML:

    <div>

      <span>我是一个span</span>

      <p>我是一个p</p>          <!--会被选中-->

      <div>

        <p>我也是一个P</p>    <!--不会被选中。不是span的兄弟-->

      </div>

    </div>

     六、CSS的继承特性

     子元素会继承父元素中的样式

     CSS:    p{ color:red; text-decoration:underline; }

                b{ color:blue; }

     HTML:  <p>我是<b>p</b>元素</p>   显示结果为:我是p元素

     可以看到b继承了下划线样式,同时改变了颜色。(注:下划线仍然是红色)  这样就可以实现CSS样式的共用。

     六、CSS层叠特性

     各个选择器优先级排行:

     行内样式>ID选择器>class选择器>标签选择器

     当连个选择器优先级相同时,写在前面>写在后面。如:<p class="p1 p2">此时p1样式优先</p>

  七、伪类

a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */

p:first-child {font-weight: bold;}

:active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时,向元素添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first-child 向元素的第一个子元素添加样式。 :lang 向带有指定 lang 属性的元素添加样式。

八、伪元素

:first-letter 向文本的第一个字母添加特殊样式。 :first-line 向文本的首行添加特殊样式。 此伪类只能用于块级元素。 :before 在元素之前添加内容。 :after 在元素之后添加内容。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一致性hash算法 - consistent hashing

    consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在 ...

    bear_fish
  • CSS技巧(一):清除浮动

    http://www.cnblogs.com/ForEvErNoME/p/3383539.html

    bear_fish
  • overflow:hidden属性

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。

    bear_fish
  • JQuery选择器(中)

    HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

    HTML5学堂
  • java学习(jQuery选择器)

    euclid
  • jQuery选择器大全(48个代码片段+21幅图演示)1

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就...

    逸鹏
  • 互联网医疗健康产业联盟酝酿大动作 这八份礼物一定有你要的

    从2014年“春江水暖”,到2015年成为投资界“香饽饽”,到2016年“健康中国”成为国家战略,如今,互联网医疗健康产业正在逐步回归实质——借助互联网手段,实...

    企鹅号小编
  • 爬虫篇 | Python现学现用xpath爬取豆瓣音乐

    最近整理一个爬虫系列方面的文章,不管大家的基础如何,我从头开始整一个爬虫系列方面的文章,让大家循序渐进的学习爬虫,小白也没有学习障碍.

    叫我龙总
  • vueRouter-嵌套路由 原

    实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,

    tianyawhl
  • jquery 使用方法

    jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuer...

    公众号php_pachong

扫码关注云+社区

领取腾讯云代金券