一、认识CSS样式

1、定义

CSS全称：层叠样式表(Cascading Style Sheets)

主要作用：定义HTML内容在浏览器内的显示样式，比如文字大小、颜色、字体加粗等

优点：通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色

2、CSS代码语法

CSS样式由选择符和声明组成，声明由属性和值组成。

选择符：又称选择器，指明网页中要应用样式规则的元素。

声明：在英文大括号"{}"中的就是声明，属性和值之间用英文冒号":"分隔。当有多条声明时，中间可以使用英文分号";"分隔。

如：p{font-size:12px;color:red;}

3、CSS注释代码

CSS注释语句：/*注释语句*/

Html注释语句：<!--注释语句-->

二、CSS插入形式

CSS样式可以写在哪些地方？从CSS样式代码插入的形式来看基本可以分为3种：内联式、嵌入式、外部式

1、内联式

定义：把CSS代码直接写在现有的HTML标签中。

注意：CSS样式代码要写在style=""双引号中，如果有多条CSS样式代码设置可以写在一起，中间用分号隔开。

例：

<p style="color:blue;font-size:12px">这里文字是蓝色</p>

2、嵌入式

定义：把CSS样式代码写在(必须写在)<style type="text/css"></style>标签之间，一般情况下<style></style>放在<head></head>之间。

例：

<style type="text/css">

span{

color:red;

}

</style>

3、外部式（外联式）

定义：把CSS代码写在一个单独的外部文件中，这个CSS样式文件以".css"为扩展名，在<head>内（不是<style>标签内）使用<link>标签将CSS样式文件链接到HTML文件内。

例：<link href="base.css" rel="stylesheet"  type="text/css" />

备注：

A:CSS样式文件名称以有意义的英文字母命名，如main.css

B:rel="stylesheet" type="text/css"是固定写法不可修改

C:<link>标签位置一般写在<head>标签之内

4、三种方法的优先级

优先级：内联式 > 嵌入式 > 外部式

注意：嵌入式 > 外部式前提，嵌入式CSS样式的位置一定在外部式的后面，即<link href="mian.css"...>代码在<style type="text/css">.....</style>代码的前面（一般都这么写），如果将它们顺序调换，则优先级也会改变。

总结：三种方法的优先级——就近原则（离被设置元素越近级别越高）

三、名词解释

1、什么是选择器？

答:在{}之前的部分就是"选择器"，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如代码中“<body>”就是选择器。

备注：每一条CSS样式声明（定义）由两部分组成，形式如下：

选择器{

　　样式;

}

2、什么是标签选择器？

答：标签选择器就是html代码中的标签。如：<html>、<body>、<h1>、<p>、<img>

3、类选择器和ID选择器

(1)类选择器

　　语法：

　　代码解释：

　　%英文圆点开头。

　　%其中类选器名称可以任意起名(不能起中文)

(2)ID选择器

　　与类选择器类似，区别为：

　　%为标签设置id="ID名称"，而不是class="类名称"。

　　%ID选择符的前面是井号(#)，而不是英文圆点(.)。

(3)、类选择器和ID选择器的区别

　　相同点：可以应用于任何元素

　　不同点：

　　NO1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

　　NO2、可以使用类选择器词列表方法为一个元素同时设置多个样式。

3、子选择器

子选择器即大于符号(>)，用于选择指定标签元素的第一代子元素。

代码解释：

.food>li{color:blue;}这行代码会使class名为food下的子元素li变成蓝色。

4、包含(后代)选择器

包含选择器，即加入空格，用于选择指定标签元素下的后辈元素。

　　例：

　　.fruit li{

　　     border:1px solid blue;

　　}

　　后代选择器与子选择器的区别：

　　%子选择器仅是指它的直接后代（作用于子元素的第一代后代），通过" > "进行选择。

　　%后代选择器作用于所有子后代元素，通过空格进行选择。

　　%总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

5、通用选择器

使用一个( * )号指定，作用是匹配HTML中所有标签元素。

例：

* { color : red; } /*html中任意标签元素字体颜色全部设置为红色*/

6、伪类选择器

伪类选择器允许给html不存在的标签（标签的某种状态）设置样式，比如给html中一个标签元素的鼠标滑过的状态来设置字体颜色。

例：

a:hover{color:red;}

代码解释：

上述代码为a标签鼠标滑过的状态设置字体颜色变红，即当鼠标滑过字体颜色变为红色特效。

关于伪类选择器：

　　到目前为止，可以兼容所有浏览器的“伪类选择符”就是a标签上使用:hover（其实伪类选择符还有很多，尤其是css3中）

7、分组选择符

需要为html中多个标签元素设置同一个样式时，可以使用分组选择符( , )

例：

h1,span{color:red;}

相当于

h1{color:red;}

span{color:red;}

其它：

示例: CSS样式覆盖问题讨论

<style>

  body {

    background-color: black;

    font-family: Monospace;

    color: green;

  }

  .pink-text {

    color: pink;

  }

  .blue-text{

    color:blue;

  }

</style>

<h1 class="pink-text blue-text">Hello World!</h1>

运行结果：

注释：

我们的 "pink-text" class 覆盖了 body 元素的 CSS 声明！第二个“blue-text”class又覆盖了第一个 "pink-text" class

注：

# class 会覆盖 body 元素的 CSS。

#在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。

#在 HTML 中这些 class 如何排序是无所谓的。

#浏览器读取 CSS 的顺序是从上到下，这意味着，在发生冲突时，浏览器会使用最后的 CSS 声明。

#不过 无论在 style 元素 CSS 的哪个位置进行声明，id 声明都会覆盖 class 声明，id 属性总是具有更高的优先级，自行测试。

#其他覆盖 CSS 的方法。行内样式

eg: <h1 style="color: green">

#还有最后一种覆盖 CSS 的方法，这是所有方法中最强大的

很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。

所以当你需要确保某元素具有指定的 CSS 时，你可以使用  !important

eg:让上面的例子中h1元素100%确保是粉色的

  .pink-text {

   color: pink !important;

  }

CSS的插入和选择器介绍的更多相关文章

  1. CSS选择器介绍

    一.元素选择器 E{...} 二.属性选择器 E[attr]{...}:指定该CSS对具有attr的元素起作用: E[attr=value]{...}::指定该CSS对具有attr的值为value的元 ...

  2. CSS的引入与选择器

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

  3. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  4. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  5. CSS样式----css样式表和选择器（图文详解）

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

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

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

  7. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  8. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  9. css的伪类选择器的使用

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...

随机推荐

  1. WebView内存泄露的解决方案

    一.简介: 做Android开发的相信都对webview不会陌生,而且也对系统自带的webview本身存在的问题也是怨念很久了,一方面是本身对js的支持不是很好另外一方面就是经常被人诟病的内存泄露了, ...

  2. 取消IE、Office、Wmp首次开启提示

    一.取消IE首次开启提示 1.运行框输入gpedit.msc.打开组策略配置 2.本地计算机策略-计算机配置-管理模板-windows组件-Internet Explorer,查找右边“阻止执行首次运 ...

  3. Linux 进程后台运行的几种方式 screen

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/80580779 本文出自[赵彦军的博客] screen是Linux窗口管理器,用户可 ...

  4. git 入门教程之分支策略

    默认情况下合并分支常常直接使用 git merge 命令,是最方便快速的合并方法.其实这种情况下 git 采用的是 fast forward 模式,特点是删除分支后,会丢失分支信息,好像从来没存在该分 ...

  5. vim 基础命令大全

         VIM命令大全 光标控制命令 命令                   光标移动h                   向左移一个字符j                   向下移一行k  ...

  6. js获取当前页面url网址信息

    js如何准确获取当前页面url网址信息 在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结. 下面我们举例一个URL,然后获得它的各个 ...

  7. Linux 小知识翻译 - 「虚拟化技术 续」

    这次,继续聊聊「虚拟化技术」. 根据上回的介绍,虚拟化技术可以使「计算机的台数和运行的OS的个数的比例不再是1:1」.这回介绍一下如何使用这个技术. 使用方法之一,「一台计算机上运行多个OS」.从个人 ...

  8. May 24. 2018 Week 21st Thursday

    Man errs so long as he strives. 失误是进取的代价. It is not important that the man in the arena didn't win, ...

  9. Java-Socket实现文件的断点续传

    前段时间因为任务需要本人这个java渣渣开始研究如何用java实现简单的文件断点续传.所谓的文件断点续传,我的理解是文件在传输过程中因为某些原因程序停止运行文件终止传输,下一次重新传输文件的时候还能从 ...

  10. WPF自定义控件（四）の自定义控件

    在实际工作中,WPF提供的控件并不能完全满足不同的设计需求.这时,需要我们设计自定义控件. 这里LZ总结一些自己的思路,特性如下: Coupling UITemplate Behaviour Func ...