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

1、行内式。

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

例子：<div style="行内式</div>

2、嵌入式

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

例子：

<head>

<style type="text/css">

div{ }

</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{ }     /* 选中id为div1的HTML元素 */

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

2、class选择器

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

例子：

CSS:     .left{ font-size: 13px; line-height: 19px; orphans: 2; widows: 2;">      HTML     <div class="left">我是class="left"的div元素</div>

3、标签选择器

根据HTML标签选择元素

例子：

CSS:     div{ }

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 { }

HTML:

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

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

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

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

4.3  后代选择器

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

例子：

CSS:    .special p{ }

HTML:

<div class="special">

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

<div>

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

</div>

</div>

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

直接后代选择器

即：选择直接子后代

CSS:   .special>p{ }

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

CSS基础-引入方法，选择器，继承的更多相关文章

  1. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

  2. CSS的引入与选择器

    CSS的引入与选择器 CSS与HTML的关系 Cascading Style Sheet 即层叠样式表 在上一篇文中,已经介绍了一些非常常用的HTML标签,接下来将步入CSS的学习,如果将单纯HTML ...

  3. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  4. HTML&CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  5. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  6. CSS基础语法与选择器

    CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...

  7. css的引入方法2

    id   方法精确 #div1 { font-size:30px; } <!DOCTYPE html> <html> <head> <meta name=&q ...

  8. 前端学习——css基础知识，选择器与html模板、值得收藏的html标签

    一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...

  9. css的引入方法

    1.外部途径: 建立xx.css文件与html文件放在同一目录下 加入 <link rel="stylesheet" type="text/css" hr ...

随机推荐

  1. 在C中嵌入汇编

    早前公布了C和汇编混编的温度控制器程序,收到一些朋友的询问,他们无法在自己程序中使用我的18B20的汇编子程序或无法正常通过混编后的程序编译. 其实在KEIL中嵌入汇编的方法很简单.如图一,在C文件中 ...

  2. 【转】ubuntu下安装及设置FTP服务器！！

    原文网址:http://hujizhou.blog.51cto.com/514907/1290915 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律 ...

  3. 【转】vsftp 遇到错误 500 OOPS: vsftpd: refusing to run with writable root inside chroot()--不错

    原文网址:http://linux.it.net.cn/e/server/ftp/2015/0227/13554.html 当我们限定了用户不能跳出其主目录之后,使用该用户登录FTP时往往会遇到这个错 ...

  4. AngularJS 2调用.net core WebAPI的几个坑

    前几天,按照AngularJS2的英雄指南教程走了一遍,教程网址是http://origin.angular.live/docs/ts/latest/tutorial/. 在步骤完成后,又更进一步,在 ...

  5. 使用SqlCacheDependency依赖项让数据库变化后缓存失效

    SqlCacheDependency可以使缓存在数据库或者数据库某张表或者字段变化后让指定缓存失效.对于一些需要及时显示的信息比较有用. 需要.net2.0以后设sql server2005及以后版本 ...

  6. HDU 1813 Escape from Tetris (IDA*)

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1813 题意:给你一个n*n的迷宫,其中0代表有一个人在这个位置,1代表墙,现在要求一个路线,使所有的人通 ...

  7. Oracle11g的注册表清理

    每次卸载了oracle总是有一堆注册表没有清理,麻烦,特地在网上找了一个较为完整的,全文复制过来,存自己这里,如下: <<< Windows Registry Editor Vers ...

  8. box-shadow讲解1

    谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length>?| ...

  9. c#窗体的传值方法

    了解了窗体的显示相关知识,接着总结一下窗体的传值方法:  .通过构造函数  特点:传值是单向的(不可以互相传值),实现简单 实现代码如下: 在窗体Form2中         int value1;  ...

  10. noip2015 提高组day1、day2

    NOIP201505神奇的幻方   试题描述 幻方是一种很神奇的N∗N矩阵:它由数字 1,2,3,……,N∗N构成,且每行.每列及两条对角线上的数字之和都相同.    当N为奇数时,我们可以通过以下方 ...