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

主要内容

  • CSS概述
  • CSS和HTML结合的三种方式： 行内样式表 、 内嵌样式表 、 外部样式表
  • CSS四种基本选择器： 标签选择器 、 类选择器 、 ID选择器 、 通用选择器
  • CSS三种扩展选择器： 组合选择器 、 后代选择器 、 伪类选择器
  • CSS样式优先级

CSS 概述

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式， 定义网页的显示效果 。简单一句话：CSS将网页 内容和显示样式进行分离 ，提高了显示功能。

接下来我们要讲一下为什么要使用CSS。

HTML的缺陷：

  1. 不能够适应多种设备
  2. 要求浏览器必须智能化足够庞大
  3. 数据和显示没有分开
  4. 功能不够强大

CSS 优点：

  1. 使数据和显示分开
  2. 降低网络流量
  3. 使整个网站视觉效果一致
  4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

CSS语法

语法格式：

选择器{属性名: 属性值 ;}

解释：

选择器代表页面上的某类元素，选择器后一定是大括号。

属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号）。

属性名和冒号之间最好不要有空格（经验）。

举例：

p{color: red;}

完整版代码举例：

<style type="text/css">
  p{
    font-weight: bold;
    font-style: italic;
    color: red;
  }</style><body>
  <p>洗白白</p>
  <p>你懂得</p>
  <p>我不会就这样轻易的狗带</p></body>

效果：

css代码的注释：

格式：

<style type="text/css">  /*
    具体的注释
  */  p{
    font-weight: bold;
    font-style: italic;
    color: red;
  }</style>

注意：只有 /* */ 这种注释，没有 // 这种注释。而且注释要写在 <style> 标签里面才算生效哦。

接下来，我们要开始真正地讲css的知识咯。

CSS和HTML结合的方式

CSS和HTML结合的方式，其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的， 但通常写在 <style> 标签里 。只要是 <style> 标签里的代码，那就是css代码，浏览器就是这样来进行解析的。

CSS和HTML的结合方式有3种：

  • 行内样式 ：采用style属性。范围只针对此标签适用
  • 内嵌样式表 ：采用 <style> 标签完成。范围针对此页面
  • 引入外部样式表css文件 的方式。这种方式又分为两种：
    1、采用 <link> 标签。例如： <link rel = "stylesheet" type = "text/css" href = "a.css"></link>
    2、采用import，必须写在 <style> 标签中，并且必须是第一句。例如： @import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写

标签,但是可以写import语句。

下面来详细的讲一讲这三种方式。

1、CSS和HTML结合方式一：行内样式

采用style属性。范围只针对此标签适用。

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

举例：

<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>

效果：

2、CSS和HTML结合方式二：内嵌样式表

在head标签中加入 <style> 标签，对多个标签进行统一修改，范围针对此页面。

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

举例：

<style type="text/css">
  p{
    font-weight: bold;
    font-style: italic;
    color: red;
  }
</style><body>
  <p>洗白白</p>
  <p style="color:blue">你懂得</p></body>

3、CSS和HTML结合方式三：引入外部样式表css文件

引入样式表文件的方式又分为两种：

  • （1） 采用 <link> 标签 。例如： <link rel = "stylesheet" type = "text/css" href = "a.css"></link>

  • （2） 采用import ，必须写在 <style> 标签中，并且必须是第一句。例如： @import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写

标签，但是可以写import语句。

具体操作如下：

我们先在html页面的同级目录下新建一个 a.css 文件，那说明这里面的代码全是css代码，此时就没有必要再写 <style> 标签这几个字了。

a.css 的代码如下：

p{
  border: 1px solid red;
  font-size: 40px;
}

上方的css代码中，注意像素要带上px这个单位，不然不生效。

然后我们在html文件中通过 <link> 标签引入这个css文件就行了。效果如下：

CSS的四种基本选择器

CSS的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

  • 标签选择器：针对一类标签
  • 类选择器：针对你想要的所有标签使用
  • ID选择器：针对特定的一个标签使用
  • 通用选择器：针对所有的标签都适用

下面来分别讲一讲。

1、标签选择器：选择器的名字代表html页面上的标签

可以匹配针对一类标签。

举例：

p{
  font-size:14px;
}

上方选择器的意思是说：所有的 <p> 标签里的内容都将显示14号字体。

效果：

2、类选择器：规定用圆点 . 来定义

优点：灵活。

举例：

.one{
  width:800px;
}

效果：

3、ID选择器：规定用 # 来定义

针对特定的一个标签来使用，只能使用一次。ID选择器以”#”来定义。举例：

#mytitle{
  border:3px dashed green;
}

效果：

上面这三种选择器的区别：

  • 标签选择器针对的是页面上的一类标签。
  • 类选择器可以供多种标签使用。
  • ID选择器是值供特定的标签(一个)，ID是此标签在此页面上的唯一标识。

4、通用选择器： 用 * 定义，将匹配任何标签

通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。举例：

*{
  margin-left:0px;
  margin-top:0px;
}

效果：

CSS的三种扩展选择器

扩展选择器：

  • 组合选择器：采用逗号隔开
  • 关联选择器(后代选择器)：采用空格隔开
  • 伪类选择器

下面详细讲一下这三种扩展选择器。

1、组合选择器：定义的时候用逗号隔开

三种基本选择器都可以放进来。

举例：

p,h1,.one,#mytitle{
  color:red;
}

效果：

2、关联选择器（后代选择器）: 定义的时候用空格隔开

对于 E F 这种格式，表示限定所有属于E元素后代的F元素有这个样式。

看定义可能有点难理解，我们来看例子吧。

举例：

h3 b i{
  color:red ;
}

上方代码的意思是说：定义了 <h4> 标签中的 <b> 标签中的 <i> 标签的样式。

注：h3和b和i标签不一定是连续紧挨着的，只要保持一个后代的关联即可。

效果：

或者还有下面这种写法：

上面的这种写法， <h3> 标签和 <i> 标签并不是紧挨着的，但他们保持着一种后代关系。

还有下面这种写法：（含类选择器、id选择器都是可以的）

3、伪类选择器

对于 <a> 标签，其对应几种不同的状态：

  • link ：超链接点击之前
  • visited ：超链接点击之后
  • focus ：是某个标签获得焦点的时候（比如某个输入框获得焦点）
  • hover ：鼠标放到某个标签上的时候
  • active ：点击某个标签没有松鼠标时

CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：

  • 静态伪类： 只能用于超链接
  • 动态伪类：针对所有标签都适用

下面来分别讲一下这两种伪类选择器。

（1）静态伪类：

用于以下两个状态：

  • link ：超链接点击之前
  • visited ：超链接点击之后

注意：上面这两个状态只能使用于超链接。

举例：

  <style type="text/css">/*
  伪类选择器：静态伪类*/
  /*
  让超链接点击之前是红色
  */
  a:link{
    color:red;
  }
  /*
  让超链接点击之后是绿色
   */
  a:visited{
    color:green;
  }</style>

效果：

上图中，超链接点击之前是红色，点击之后是绿色。

问：既然 a{} 定义了超链的属性，和 a:link{} 都定义了超链点击之前的属性，那这两个有啥区别呢？

答：

a{} 和 a:link{} 的区别：

  • a{} 定义的样式针对所有的超链接(包括括锚点)
  • a:link{} 定义的样式针对所有写了href属性的超链接(不包括锚点)

（2）动态伪类 :

用于以下几种状态：

  • focus ：是某个标签获得焦点的时候（比如某个输入框获得焦点）
  • hover ：鼠标放到某个标签上的时候
  • active ：点击某个标签没有松鼠标时

注意：上面这三种状态针适用于所有的标签。

举例：

  <style type="text/css">/*
  伪类选择器：动态伪类*/
  /*
  让文本框获取焦点时：
  边框：#FF6F3D这种橙色
  文字：绿色
  背景色：#6a6a6a这种灰色
  */
  input:focus{
    border:3px solid #FF6F3D;
    color:white;
    background-color:#6a6a6a;
  }
  /*
  鼠标放在标签上时显示蓝色
   */
  label:hover{
    color:blue;
  }
  /*
  点击标签鼠标没有松开时显示红色
   */
  label:active{
    color:red;
  }</style>

效果：

利用这个 hover 属性，我们同样对表格做一个样式的设置：

表格举例：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style type="text/css">  /*整个表格的样式*/table{
    width: 300px;
    height: 200px;
    border: 1px solid blue;
    /*border-collapse属性：对表格的线进行折叠*/
    border-collapse: collapse;}  /*鼠标悬停时，让当前行显示#868686这种灰色*/table tr:hover{background: #868686;}  /*每个单元格的样式*/table td{border:1px solid red;}</style></head><body><table><tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td></tr><tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td></tr><tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td></tr></table></body>
</html>

效果：

CSS样式表的冲突解决

1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）

2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器

3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

总结：就近原则。ID选择器优先级最大。

举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）

另外还有两个冲突的情况：

1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级： 定义 的样式表中，谁最近，就用谁。

2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。

例如：

注：本文将持续更新。

css样式表和选择器相关推荐

  1. HTML笔记——④css样式表、选择器、常用属性

    HTML笔记--④css样式表.选择器.常用属性 一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...

  2. CSS 样式表及选择器

    目录 三种样式表 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) css的样式特性 多重样式优先级 ...

  3. 【CSS】CSS样式表+复合选择器

    「1.内部样式表(内嵌样式表)」 也称为内嵌式,将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义. style标签一般位于head标签中,当然理论上他可以放在HTML文档 ...

  4. Day03_css选择器、css样式大全、引入css样式表、常用标签属性、形变和动画

    03.01_css选择器-属性选择器 针对中写明了某些属性的标签进行设置 选择器[属性名]{属性名称1:值1:属性名称2:值2:....}选择器[属性名="属性值"]{属性名称1: ...

  5. CSS——（CSS样式规则，CSS样式表单，选择器，常用的CSS属性）

    CSS(Cascading Style Sheets,层叠样式表单)是由W3C所提出,主要的用途是控制网页的外观,也就是定义网页的编排,显示,格式化及特殊效果,有部分功能与HTML重叠. 1.CSS样 ...

  6. 外链式样式表_引入CSS样式表（书写位置）

    CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片 ...

  7. CSS样式表的规划与组织

    如果你的工作过程中遇到以下问题,那么请你阅读此文章. 1:样式表文件里面的代码混乱,随着项目的进展,样式表里面的先有代码不敢做任何改变,因为连自己也不知道改了以后会给现有项目造成什么影响.更不敢删除. ...

  8. html中style布局放哪,CSS样式表与格式布局详解

    样式表 CSS(Cascading Style Sheets  层叠样式表),作用是美化HTML网页. 内联样式表: 例: 内联样式表 内嵌样式表:必须写在head标签里 例: p { 样式;} he ...

  9. 外链式样式表_WEB前端 CSS样式表

    CSS层叠样式表 字体样式属性 font-size:字号大小 页中普遍使用14px+. 尽量使用偶数的数字字号.ie6等老式浏览器支持奇数会有bug. font-family:字体 中文字体需要加引号 ...

最新文章

  1. ScrollView和ListView冲突解决
  2. QPushButton
  3. 开启tomcat的apr模式，并利用redis做tomcat7的session的共享。
  4. JS进行性能测试(计时)
  5. minecraft pythonapl_Substance PythonAPI入门案例
  6. 关于qq创始人----马化腾的一些琐事
  7. Java hashCode()方法和equals()方法
  8. hibernate 的三种状态 如何转化的。
  9. 文件上传功能如何测试
  10. 华为6p连接计算机设置在哪里设置密码,华为路由器和华为手机如何不用密码连接...
  11. Mysql数据库优化方案
  12. python 快速排名发包_SEO快速排名发包技术及原理
  13. 中国无线耳机行业市场供需与战略研究报告
  14. 信息检索与利用（第三版）第五章 信息法与综合性信息检索
  15. 谜底是计算机的谜语英语,英语谜语大全及答案
  16. iframe预览文件
  17. 基于云的产品上线部署qqfarm
  18. 关于叶子的思维导图_2020年1月8日叶子老师讲思维导图的制作方法
  19. 《Fundamentals Of Computer Graphics》虎书第三版翻译——第五章 线性代数
  20. Matlab实现遗传算法（附上完整仿真源码）

热门文章

  1. C++知识点38——拷贝赋值运算符、析构函数、=default、阻止拷贝和赋值
  2. 这个冬天，将是共享单车最艰难的时刻
  3. 选择HttpHandler还是HttpModule？
  4. Python（迭代、三元表达式、列表生成、生成器、迭代器）
  5. 安卓图表引擎AChartEngine(一) - 简介
  6. 通过tomcat实现多域名配置
  7. Socket经验记录
  8. 我的一次尴尬的维护经历
  9. java-mybatis环境搭建
  10. shell+vim——05