CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS语法

'''
selector {
                  property: value;
                  property: value;
             ...  property: value
                    }
'''

示例：

  1. h1 {color:red; font-size:14px;}

CSS注释

  1. /* 注释内容  */

CSS的四种引入样式

1.行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

  1. <p style="color: red">Hello world.</p>

2.嵌入式

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

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         p{
  6.             background-color: #2b99ff;
  7.         }
  8.     </style>
  9. </head>

3.链接式

将一个.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.  
  3.     @import"mystyle.css"; 此处要注意.css文件的路径
  4.  
  5. </style>　

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

选择器

基本选择器

1.标签选择器

  1. p {color: "red";}

2.ID选择器

  1. #i1 {background-color: red;}        # 用"#"号开头

3.class选择器

  1. .c1 { font-size: 14px;}         # 所有class="c1"的标签    "." 开头,用于大批量添加样式
  2.  
  3. p.c1 { color: red;}             # 所有class="c1"的 指定(此例子P)标签

注意：
　　样式类名不要用数字开头（有的浏览器不认）。
　　标签中的class属性如果有多个，要用空格分隔。

4.通配选择器

  1. * {  color: white;}         # (通常用于设置页面默认样式)

层级选择器

  1. 1.  E  F   后代元素选择器，匹配所有属于E元素后代(子子孙孙)的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝
  2. -------------------------------------------------------------------------------------------------------------------------------------
  3. 2.  E > F   子元素选择器，匹配所有E元素的子元素F            :div > p { color:#f00; }
  4. -------------------------------------------------------------------------------------------------------------------------------------
  5. 3.  E + F   毗邻元素选择器，匹配紧随E元素之后的同级元素F  :div + p { color:#f00; }
  6. -------------------------------------------------------------------------------------------------------------------------------------
  7. 4.  E ~ F   普通兄弟选择器,后面所有的（以波纹号分隔）                 :.div1 ~ p{font-size: 30px; }
  8. -------------------------------------------------------------------------------------------------------------------------------------
  9. 5.  E , F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔,减少重复代码 :div,p { color:#f00; }
  10. -------------------------------------------------------------------------------------------------------------------------------------

属性选择器

  1. E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
  2.                     比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
  3. -------------------------------------------------------------------------------------------------------------------------------------
  4. E[att = val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
  5. -------------------------------------------------------------------------------------------------------------------------------------
  6. E[att ~= val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 
  7.                         td[class~=”name”] { color:#f00; }   #完全匹配一整个单词
  8. -------------------------------------------------------------------------------------------------------------------------------------
  9. E[att |= val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 
  10.                         td[class~=”name”] { color:#f00; }   #完全匹配一整个单词 or 单词后面有"-"连字符(name-xyz)
  11. -------------------------------------------------------------------------------------------------------------------------------------
  12. E[attr ^= val]    匹配属性值以指定值开头的每个元素 
  13.                         div[class^="test"]{background:#ffff00;}
  14. -------------------------------------------------------------------------------------------------------------------------------------
  15. E[attr $= val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
  16. -------------------------------------------------------------------------------------------------------------------------------------
  17. E[attr *= val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}
  18. -------------------------------------------------------------------------------------------------------------------------------------

伪类选择器

伪类选择器 : 伪类指的是标签的不同状态

anchor伪类：专用于控制链接的显示效果

a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

  1. a:link {color: #FF0000} /* 未访问的链接 */        
  2.  
  3. a:visited {color: #00FF00} /* 已访问的链接 */
  4.  
  5. a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
  6.  
  7. a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }  # 鼠标点击链接一瞬间的时候的颜色等

去下划线: text-decoration: none

focus伪类

:focus选择器用于选择具有焦点的元素。
提示: :focus选择器接受键盘事件或其他用户输入的元素。

  1. input:focus
  2. {
  3.     background-color:yellow;        # 输入框颜色变成黄色
  4. }

before after 伪类

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

点我了解更多

# 最常用的地方是 父级塌陷现象!

选择器优先级

CSS继承

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

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

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

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

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

比如：

  1. div{  border:1px solid #222}
  2. <div>
  3.     hello
  4.     <p>xyp</p>
  5. </div>

css选择器优先级

1. 继承优先级最低 (我如果没有设置自己的样式,默认用祖先的样式)

2. 权重:
　　1.不讲道理的!important
　　2.内联样式(写在标签里的style属性) 1000
　　3.ID选择器 100
　　4.class类选择器 10
　　5.标签选择器 1
　　6.继承的 (0)没有权重计算,可以认为权重是0

3.重名的样式,后加载的覆盖先加载的
　　例如:
　　　　a {color: red;}
　　　　a {color: blue;}
　　第2个css样式会把第1个覆盖掉,变成blue

权重比较规则:
　　1、文内的样式优先级为1000，所以始终高于外部定义。   
　　2、有!important声明的规则高于一切。 
　　3、如果!important声明冲突，则比较优先权。 
　　4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 
　　5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

important：

  1. span { color: ren!important; }

知道有这个就行了,除非万不得已,不建议使用,特定情况可以使用

CSS介绍&选择器&选择器优先级的更多相关文章

  1. CSS选择器、优先级与匹配原理

    为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...

  2. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  3. CSS选择器及其优先级

    一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

  4. CSS选择器、优先级与匹配原理（转）

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  5. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  6. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  7. 转载：详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  8. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  9. 前端之CSS介绍--选择器

    一.CSS简介 介绍 css我们称呼层叠样式表(英文全称:Cascading Style Sheets).它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等 ...

随机推荐

  1. canvas基础绘制-绚丽倒计时

    效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. 生成hprof文件，用MAT进行分析

    生成hprof文件可以在DDMS选中进程点击窗口左上角的"dump hprof file"按钮来直接生成,也可以通过在程序加代码中来生成 代码2: void generateHpr ...

  3. Mysql无法启动服务解决办法

    只需要输入:mysqld  --initialize 进行初始化,即可启动

  4. 解决python pip安装提示"not a supported wheel on this platform"

    python下载.whl安装文件后使用pip安装有时候会提示报错"xxxxx not a supported wheel on this platform",应该是下载的库文件版本 ...

  5. Java Web项目，Android和微信小程序的初始页面配置

    Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...

  6. leetcode_1039. Minimum Score Triangulation of Polygon_动态规划

    https://leetcode.com/problems/minimum-score-triangulation-of-polygon/ 题意:给定一个凸的N边形(N<=50),每个顶点有一个 ...

  7. DELETE - 删除一个表中的行

    SYNOPSIS DELETE FROM [ ONLY ] table [ WHERE condition ] DESCRIPTION 描述 DELETE 从指明的表里删除满足 WHERE 子句的行. ...

  8. JAVA用freemarker生成复杂Excel。（freemarker）

    在生成Excel的时候,大多时候都是使用poi,jxl等进行的,但是对于复杂的Excel来说,这个工作量是非常的大的,而且,对于我这么懒的人来说,这是相当痛苦的一件事情,所以,我不得不找找有没有简单一 ...

  9. windows环境下Robot Framework的安装步骤

    Robot Framework是由python编写的开源的用来做功能性测试的自动化测试框架.本文介绍Robot Framework在windows环境下的安装步骤. 安装python从python官网 ...

  10. JDBC-Web项目导入mysql驱动包路径-Eclipse & Myeclipse

    初学JAVA,很多都不懂,开始听老师说导入数据库驱动包的时候是: 右键项目 -> Properties -> Java Build Path -> 右侧选项卡选择Libraries ...