前端内容就分三部分html、css、javascript（js），对一个网页来说html相当于是一个裸体的人，css相当于给这个人穿上了衣服，javascript相当于给这个人赋予动作行为，今天我们要接触的就是css，样式层叠表。

本篇导航：

一、CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。声明包括属性和值。

  1. h1{
  2.   color:red;
  3. }

二、css的四种引入方式 

1、行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。（优先级最高）

  1. <h1 style="color:red">行内式<h1>

2、嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

  1. <style>
  2.         h1{
  3.             color: red;
  4.         }
  5. </style>

3、链接式

单独将css写到一个后缀为.css的文件里，然后将.css文件引入到HTML文件中

  1. <link href="mystyle.css" rel="stylesheet" type="text/css"/>

4、导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中（不推荐使用）

  1. <style type="text/css">
  2.           @import"mystyle.css"; 此处要注意.css文件的路径
  3. </style>　

注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

三、css选择器

1、基本选择器

  1. /*1 标签选择器*/
  2. div{
  3.     color: red;
  4. }
  5. /*2 id选择器*/
  6. #p2{
  7.     color: red;
  8. }
  9. /*3 class选择器*/
  10. .c1{
  11.     color: red;
  12. }
  13. /*4 通配符选择器 * */
  14. * {
  15.     color: red;
  16. }

2、组合选择器

  1. /*1 后代选择器  匹配所有属于.c2后代的p*/
  2. .c2 p{
  3.     color: red;
  4. }
  5. /*2 子代选择器  匹配所有.c2的子p*/
  6. .c2>p{
  7.     color: red;
  8. }
  9. /*3 毗邻选择器  匹配所有紧随.c2之后的同级p*/
  10. .c2+p{
  11.     color: red;
  12. }
  13. /*4 兄弟选择器  匹配所有.c2的同级p*/
  14. .c2~p{
  15.     color: red;
  16. }
  17. /*多元素选择器  同时匹配所有*/
  18. .c2 .c3,.c2~.c3{
  19.     color: red;
  20.     background-color: green;
  21.     font-size: 15px;
  22. }

注意，关于标签嵌套：

一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。

3、属性选择器

  1. /*匹配所有具有id属性的p元素，不考虑它的值。（注意：p在此处可以省略。比如“[id]”。以下同。）   */
  2. p[id] {
  3.     color:#f00;
  4. }
  5. /*匹配所有class属性等于“error”的div元素   */
  6. div[class=”error”] {
  7.     color:#f00;
  8. }
  9. /*匹配所有class属性具有多个空格分隔的值、其中一个值等于“name”的E元素*/
  10. td[class~=”name”] {
  11.     color:#f00;
  12. }
  13. /*匹配属性值以指定值开头的每个元素                    */
  14. div[class^="test"]{
  15.     background:#ffff00;
  16. }
  17. /*匹配属性值以指定值结尾的每个元素    */
  18. div[class$="test"]{
  19.     background:#ffff00;
  20. }
  21. 匹配属性值中包含指定值的每个元素
  22. div[class*="test"]{
  23.     background:#ffff00;
  24. }

4、伪类选择器

1）伪类

用于控制链接的显示效果

  1. a:link（没有接触过的链接）,用于定义了链接的常规状态。
  2. a:hover（鼠标放在链接上的状态）,用于产生视觉效果。（最常用）
  3. a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
  4. a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

2）伪类选择器

  1.  /*格式: 标签:伪类名称{ css代码; }*/
  2.  /* 未访问的链接 */
  3. a:link {
  4.     color: #FF0000;
  5. }
  6.  /* 已访问的链接 */
  7. a:visited {
  8.     color: #00FF00;
  9. }
  10.  /* 鼠标移动到链接上 */
  11. a:hover {
  12.     color: #FF00FF
  13. }
  14.  /* 选定的链接 */
  15. a:active {
  16.     color: #0000FF;
  17. }

3）示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <style>
  8.  
  9.        .top{
  10.            background-color: rebeccapurple;
  11.            width: 100px;
  12.            height: 100px;
  13.        }
  14.         .bottom{
  15.             background-color: green;
  16.             width: 100px;
  17.             height: 100px;
  18.         }
  19.  
  20.         .outer:hover .bottom{
  21.             background-color: yellow;
  22.         }
  23.  
  24.         注意:一定是outer:hover  控制outer里某一个标签,否则无效
  25.  
  26.         .top:hover .bottom{
  27.             background-color: yellow;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.  
  33. <div class="outer">
  34.     <div class="top">top</div>
  35.     <div class="bottom">bottom</div>
  36. </div>
  37.  
  38. </body>
  39. </html>

4）before after伪类 

  1.  :before    p:before       在每个<p>元素之前插入内容
  2.  :after     p:after        在每个<p>元素之后插入内容     
  3.  
  4. 例：
  5. p:before{
  6.     content:"hello";
  7.     color:red;
  8.     display: block;
  9. }

四、选择器的优先级　

1、css的继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

  1. body{
  2.     color:red;
  3. }       
  4.  
  5. <p>hello</p>

这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

  1. p{
  2.     color:green
  3. }

发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。　

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

  1. div{
  2.   border:1px solid #ff0000;
  3. }
  4.  
  5. <div>hello <p>css</p> </div>

2、css的优先级

CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1 内联样式表的权值最高 （1000）

2 统计选择符中的ID属性个数。（100）

3 统计选择符中的CLASS属性个数。（10）

4 统计选择符中的HTML标签名个数。（1）

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

注意:

1 文内的样式优先级为1,0,0,0，所以始终高于外部定义。

2 有!important声明的规则高于一切。

3 如果!important声明冲突，则比较优先权。

4 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

5 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

3、css初识的更多相关文章

  1. 前端之CSS初识

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  2. 0008 CSS初识（行内式、内部样式表、外部样式表）

    typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...

  3. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  4. 2020年12月-第02阶段-前端基础-CSS初识

    CSS层叠样式表 理解 css的目的作用 css的三种引入方式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用 ...

  5. 前端之常用标签和CSS初识

    外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...

  6. Normalize.css 初识

    一. 用来干嘛的 一个现代的.准备好了支持 HTML5 技术,并且要替代 CSS Reset 处理样式的理念. Normalize.css 使浏览器渲染所有元素更加一致,并且符合现代标准.它只是针对那 ...

  7. 51、css初识

    前端内容就分三部分html.css.javascript(js),对一个网页来说html相当于是一个裸体的人,css相当于给这个人穿上了衣服,javascript相当于给这个人赋予动作行为,今天我们要 ...

  8. 【CSS初识】

    一.CSS是什么? CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距.高度.宽度.背景图像.高级定位等方面. HTML用于结构化内容:CSS用于格式化结构化的内容. ...

  9. 第四章css初识

    1.CSS(层叠样式表) 2.CSS语法 选择器{ 属性名1:属性值1: 属性名2:属性值2: } 3.引用CSS的三种方式 第一种:行内样式 例:<a style="color:re ...

  10. CSS初识盒子

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Introduction to boundary integral equations in BEM

    Boundary element method (BEM) is an effective tool compared to finite element method (FEM) for resol ...

  2. vue $mount 和 el的区别

    两者在使用效果上没有任何区别,都是为了将实例化后的vue挂载到指定的dom元素中. 如果在实例化vue的时候指定el,则该vue将会渲染在此el对应的dom中,反之,若没有指定el,则vue实例会处于 ...

  3. elementui异步后台校验表单，修改重复校验

    elementui简单的form校验这里就不介绍了,这里主要记录下如何通过后台进行指定字段的异步后台校验. 1.导入axios <script src="https://unpkg.c ...

  4. python 精确计算与向上取整 decimal math.ceil

    1. 精确计算 python的float型不精确,需要导入decimal包,以下是不精确举例: 导入decimal包后: 2. 向上取整 一般的取整数(向下取整): 向上取整的方法:

  5. 动态规划状态压缩-poj1143

    题目链接:http://poj.org/problem?id=1143 题目描述: 代码实现: #include <iostream> #include <string.h> ...

  6. vdom,diff,key 算法的了解

    <ul id='list'> <li class='item'>Item1</li> <li class='item'>Item2 </li> ...

  7. linux定时任务相关

    定时任务所在文件夹 /etc/crontab 定时任务重启命令 service crond restart

  8. Google Hack搜索技巧

    想了解更多搜索技巧,点击下面网站了解http://exploit-db.com/google-dorks Google Hack的一些整理 这里是google关键字的用法,要设置它为中文,则是 htt ...

  9. Java设计模式从精通到入门四 工厂方法模式

    工厂方法模式 属于23中设计模式中创建型类型. 核心思想:工厂提供创建对象的接口,由子类决定实例化哪一个子类. 来源 ​ 设计模式之禅中的例子,女娲造人,通过八卦炉来进行造人,没有烧熟的为白人,烧太熟 ...

  10. git SourceTree 客户端 安装/使用教程

    使用过SourceTree 之后发现比乌龟好多了 风来了.fox 1.安装之前的必备 1.1 git 客户端 http://msysgit.github.io/ 安装就PASS了,总之是直接下一步.直 ...