前端内容就分三部分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的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

51、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. 【CSS初识】

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

  8. 第四章css初识

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

  9. CSS初识盒子

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

随机推荐

  1. Zuul(SpringCloud学习笔记一)

    路由是微服务架构中必须(integral )的一部分,比如,"/" 可能映射到你的WEB程序上,"/api/users "可能映射到你的用户服务上," ...

  2. Centos6.9安装vsftpd并配置多用户的方法

    本文介绍了Centos6.9安装vsftpd并配置多用户的方法,分享给大家,具体如下: 一.安装vsftpd ? 1 2 3 4 5 6 7 8 #安装vsftpd yum -y install vs ...

  3. SpringMVC 上传下载 异常处理

    SpringMVC 上传下载 异常处理 上一章节对SpringMVC的表单验证进行了详细的介绍,本章节介绍SpringMVC文件的上传和下载(重点),国际化以及异常处理问题.这也是SpringMVC系 ...

  4. 实战Excel Add-in的三种玩法

    作者:陈希章 发表于 2017年11月26日 前言 这个系列文章应该有一阵子没有更新了,原因是一如既往的多,但是根本所在是我对于某些章节其实还没有完全想好怎么写,尤其是对于Office Add-in这 ...

  5. android 加载图片圆角等功能的处理

    以Glide为例: Glide.with(getContext()).load(item.getSoftLogo()).transform(this.glideRoundTransform).into ...

  6. 为什么大家觉得自学HTML5难？

    互联网发展到今天,越来越多的技术岗位人才出现了稀缺的状态,就拿当前的HTML5来讲,基本成为了每家互联网公司不可缺少的人才.如果抓住这个机会,把HTML5搞好,那么前途不可限量,而且这门行业是越老越吃 ...

  7. JDK8新特性一览

    转载自:http://blog.csdn.net/qiubabin/article/details/70256683 官方新特性说明地址 Jdk8新特性.png 下面对几个常用的特性做下重点说明. 一 ...

  8. MySQL .msi 安装失败改用.zip安装步骤

    一开始官网下载.msi安装包,安装到配置server时无法启动,长时间卡在这里,无法继续下去.上网看了一下解决办法,发现用.zip安装包进行安装比较简单可靠. 一.利用.msi安装包安装失败后的处理 ...

  9. c语言贪吃蛇详解-2.画出蛇

    c语言贪吃蛇详解-2.画出蛇 前几天的实验室培训课后作业我布置了贪吃蛇,今天有时间就来写一下题解.我将分几步来教大家写一个贪吃蛇小游戏.由于大家c语言未学完,这个教程只涉及数组和函数等知识点. 蛇的身 ...

  10. openstack pike 创建vxlan网络

    #openstack pike 创建vxlan网络 openstack pike 集群高可用  安装部署 汇总 http://www.cnblogs.com/elvi/p/7613861.html # ...