博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS基础-引入方法,选择器,继承
阅读量:5840 次
发布时间:2019-06-18

本文共 3314 字,大约阅读时间需要 11 分钟。

一.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 在元素之后添加内容。

 

转载地址:http://cvvcx.baihongyu.com/

你可能感兴趣的文章
linq 学习笔记之 Linq基本子句
查看>>
[Js]布局转换
查看>>
Java annotation 自定义注释@interface的用法
查看>>
Apache Spark 章节1
查看>>
Linux crontab定时执行任务
查看>>
mysql root密码重置
查看>>
33蛇形填数
查看>>
选择排序
查看>>
SQL Server 数据库的数据和日志空间信息
查看>>
前端基础之JavaScript
查看>>
自己动手做个智能小车(6)
查看>>
自己遇到的,曾未知道的知识点
查看>>
P1382 楼房 set用法小结
查看>>
分类器性能度量
查看>>
docker 基础
查看>>
写一个bat文件,删除文件名符合特定规则,且更改日期在某
查看>>
我的友情链接
查看>>
写Use Case的一种方式,从oracle的tutorial抄来的
查看>>
【C#】protected 变量类型
查看>>
Ubuntu解压
查看>>