CSS是Cascading Style Sheets(层叠样式表)的简写,用于修饰文档的语言,可以修饰HTML、XML、SVN。每个语言都有每个语法的规则:CSS声明、CSS声明块、CSS选择器、CSS规则。

  1、css声明简单来说就是一个键值对的形式,类似于  color: black;

  2、css声明块就是用大括号{}括起若干个css声明,类似于  {color: black; background-color: white;}

  3、css选择器就是某个或者一组标签的标识,类似于  p、div

  4、css规则就是前面三个的总结,类似于  p{color: black; background-color: white;}

  注意:css的注释是/* 这里是注释内容 */

我们虽然知道css的规则了,怎么将css规则用于修饰被修饰的文档。xml文件和svn文件博主也不知道也没有深度的了解,这里只讲述HTML文件怎么引入css文件。html文件引入css文件有三种方式:

  1、外部样式表

    外部样式表的引入方式有两种情况,link标签方式引入效率高,一般是用到哪个标签就导入哪个标签;@import方式和style方式效率不高,浏览器会全部读取样式表的样式。

      link标签引入(推荐):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式表的引入方式</title>
<link rel="stylesheet" href="./css/select1.css">
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>

      @import url()引入只能写在style标签里的第一行,否则导入不成功:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式表的引入方式</title>
<!-- <link rel="stylesheet" href="./css/select1.css"> -->
<style>
@import url("./css/select1.css")
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>

  2、内部样式表

    在html文件样式直接写在style标签中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式表的引入方式</title>
<style>
p{
height: 80px;
width: 500px;
font-size: 20px;
text-align: center;
border: 2px solid black;
margin: 10px;
line-height: 80px;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>

  3、行内样式表

    直接写在当前的标签中,用style属性列举起来,类似于  <p style="color: black; background-color: white;"></p>

  这四种引入方式也是有顺序的(相对于共同属性而言)优先取行内样式表,如果style标签中有@import 和 style里样式,就什么样式都不会有,不允许同时导入;如果既有style标签引入有link标签引入,就取后来引入的即可。这里不做测试

CSS的选择器有很多种,可以分为如下几种,个别选择器会举例说明

  1、标签选择器

    标签选择器又叫元素选择器,换句话说,HTML文档的元素/标签就是最基本的选择器,使用元素名称直接选中元素即可。

      p{color:balck; background-color: white;}

  2、类选择器

    类选择以点"."开头,后面紧跟一个类名。类名不允许有空格,与元素/标签中class属性 的值保持一致。一个元素可以有多个class的值,每个值通过空格分割开。类名相同的元素属于一类元素。

      .classname{color:balck; background-color: white;}

  3、ID选择器

    ID选择器以"#"开头,后面紧跟一个ID名,在一个HTML文档中,元素/标签ID值能重复,HTML文档只能识别第一次出现的ID值,因此在选择文档中唯一元素的时候该选择器比较有用。

      #idname{color:balck; background-color: white;}

  4、普遍选择器

    使用"*”来表示普遍选择器,表示选择所有元素/标签,通常用在组合选择器中。

      *{color:balck; background-color: white;}

  5、后代选择器

    使用 “  ” 隔开两个选择器。例如 “ul li”表示选择ul的后代元素li,li可以为ul的直接子元素,也可以为ul的孙子元素。

  6、子代选择器

    使用 “>” 隔开两个选择器。例如 "ul>li"表示选择ul的直接子代元素li,ul的孙子元 素li无法被选择到

  7、相邻同胞选择器

    使用 “+” 隔开两个选择器。例如 ".one+*"表示选择class为"one"元素的下一个兄弟(相邻兄弟)元素,如果用其他选择器代表 * ,那么这个选择器的样式就只会找“.one”元素相邻元素且指定选择器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式表的引入方式</title>
<link rel="stylesheet" href="./css/select1.css">
<style>
p+span{
/*指定下一个相邻的选择器为span标签*/
color: red;
}
</style>
</head>
<body>
<!-- 不会选中div选择器 -->
<p>这是一个p标签</p>
<div>
<!-- 不会选中h5选择器 -->
<p>p1</p>
<h5>h511</h5>
<span>span1</span>
<span>span2</span>
<a href="">a1</a>
<a href="">a2</a>
<p>p2</p>
<!-- 会选中 -->
<span>span3</span>
</div>
</body>
</html>

  8、一般同胞选择器

    使用 “~” 隔开两个选择器。例如 ".one~*"表示选择class为"one"元素的所有兄弟元素,可以指定具体的选择器,就会选择当前元素的所有指定选择器的兄弟元素。

  9、多选择器

    多个选择器并列使用,使用“,”分割。

      .classname, #idname, p{color:balck; background-color: white;}

  10、组合选择器

    多个选择器组合使用。例如 "div.one" 表示class为one的div元素。

  11、属性选择器

    [attr] 选择具有attr属性的元素、无论该属性的值为什么

    [attr=val] 选择具有attr属性的、并且attr的值为val元素

    [attr~=val] 选择具有attr属性的、并且attr的值之一为val的元素

    [attr^=val] 选择具有attr属性的、并且attr的值以val开头的元素

    [attr$=val] 选择具有attr属性的、并且attr的值以val结尾的元素

    [attr*=val] 选择具有attr属性的、并且attr的值包含val的元素

  12、伪类选择器

    伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中

    表示子元素的(表示当前元素是作为孩子元素)

       :only-child     独生子元素

       :first-child  第一个孩子  这里是先指明第一个孩子,然后再指定选择器

       :last-child   最后一个孩子  这里是先指明最后一个孩子,然后再指定选择器

       :nth-child(n) 、: nth-last-child(n)  第几个孩子、倒数第几个孩子

        n可以为元素的序号,从1开始,也可以为特殊的字符,比如奇数“odd”,偶数“even”

      :first-of-type、:last-of-type 、

      :nth-of-type(n)、:nth-last-of-type(n)

        n可以为元素的序号,从1开始,也可以为特殊的字符,比如奇数“odd”,偶数“even”

    当前元素状态相关

      :hover、 :active、 :focus  鼠标悬停、鼠标点击、元素聚焦

      :enabled、 :disabled;:checked、 :default  元素可用、不可用、选中(适用于radio和checkbox的input标签)、默认值

      :invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range  元素无需验证、需要验证、必填、可选的、范围内、不在范围内

  13、伪元素选择器

    伪元素以"::"开头,用在选择器后,用于选择指定的元素。

      ::after       在当前元素之后添加内容

      ::before  在当前元素之前添加内容

      ::first-letter  当前元素的第一个字符

      ::first-line  当前元素的第一行

      ::selection  当前元素用户选中的字符

如果css样式表中的多个样式选中同一个元素时,呈现的效果是由于哪个样式决定的呢?其实CSS还有一个名字叫级联样式表,即解析的时候会根据级联决定HTML文档元素的呈现效果。css给每个选择器赋值一个特性值。

  1、如果在某个选择器里属性值后面添加了 !important表示这个选择器最重要

  2、通过4个特性值来量化一个选择器 (多个选择器合在一起,特性值也会叠加的)

    Thousands

      • 声明在元素的style属性中。特性值记为1000

    Hundreds

      • 包含在一个选择器中的所有ID选择器

    Tens

      • 包含在一个选择器中的所有类选择器,属性选择器,伪类选择器

    Ones

      • 包含在一个选择器中的所有元素选择器,伪元素选择器

  3、如果多个竞争选择器具有相同的重要性和特性值,代码顺序就发挥作用 了,后来规则优先前面规则。

  4、继承(Inheritance)

    CSS中有些规则将会默认被子元素继承,有些则不会。比如font系列属性,文本系列属性、列表系列属性,cursor

    CSS提供了三个特殊的值用来处理继承

      1) inherit 继承父元素的样式(常用)

      2) initial 不继承。应用浏览器的默认样式(不常用)

      3) unset 不设定,表现该规则本来特性,即如果该规则具有继承属性则继承, 否则不继承。(不常用)

前端开发CSS3——使用方式和选择器的更多相关文章

  1. web前端开发:css3实现loading

    web前端开发:css3实现loading 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE ...

  2. 1+x 证书 Web 前端开发 CSS3 专项练习

    官方QQ群 1+x 证书 Web 前端开发 CSS3 专项练习 http://blog.zh66.club/index.php/archives/196/

  3. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

  4. 1+x证书Web前端开发CSS3详细教程

    web 前端开发之 CSS3 新特性 http://blog.zh66.club/index.php/archives/189/ web 前端开发之 html5 新特性 http://blog.zh6 ...

  5. 前端开发HTML&css入门——CSS&选择器练习

    CSS 层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表,通过样式表可以对网页进行装饰.所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低 ...

  6. 前端开发中常用的CSS选择器解析(一)

    你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的介绍css中最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略cs ...

  7. 前端开发CSS3——文本样式和盒子及样式

    博主废话少说,直接介绍css常用的属性和属性值:属性和值只需过一遍,页面的结构还是需要布局,布局的只是后期会更新的. 提供一些图标的网站:font-awesome:     http://fontaw ...

  8. 1+x 证书 web 前端开发初级对应课程分析

    响应国家号召 1+X 证书 Web 前端开发考试样题 官方QQ群 1+x 证书 web 前端开发初级对应课程分析 http://blog.zh66.club/index.php/archives/19 ...

  9. 响应国家号召 1+X 证书 Web 前端开发考试模拟题

    1+x证书Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ 1+x证书Web前端开发初级实操考试样题2019 http ...

随机推荐

  1. 5个 JS 解构有趣的用途

    摘要: 玩转ES6解构赋值. 原文:5个 JS 解构有趣的用途 译者:前端小智 1. 交换变量 通常交换两个变量的方法需要一个额外的临时变量,来看看例子: let a = 1; let b = 2; ...

  2. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  3. pycharm 字符编码错误处理

    如果在MySQL创建表空间时指定了他的字符集为utf8 但是插入数据后 在pycharm查看却出现字符乱码 怎么解决呢 ? 首先进入cmd 页面 输入 chcp 65001  (意思是指定cmd所有字 ...

  4. mssql sqlserver 数据类型sql_variant简介说明

    转自: http://www.maomao365.com/?p=9712  摘要: 下文讲述sqlserver中sql_variant数据类型定义.赋值.应用的相关说明,如下所示: 实验环境:sql ...

  5. SRDC - ORA-1555: Query Duration 0: Checklist of Evidence to Supply (Doc ID 1682704.1)

    SRDC - ORA-1555: Query Duration 0: Checklist of Evidence to Supply (Doc ID 1682704.1) Action Plan 1. ...

  6. centos 下创建本地镜像源,结合 nginx

    1. 创建同步文件 参考清华的Centos源,配置同步文件.https://mirrors.tuna.tsinghua.edu.cn/help/centos/ [root@localhost cent ...

  7. Lnmp架构部署动态网站环境.2019-7-3-1.2

    Nginx安装 一.安装准备 Pcre(Perl Compatible Regular Expressions,兼容正则表达式)安装pcre库是为了使Nginx支持HTTP Rewrite模块. 安装 ...

  8. CodeForces - 1228D (暴力+思维+乱搞)

    题意 https://vjudge.net/problem/CodeForces-1228D 有一个n个顶点m条边的无向图,在一对顶点中最多有一条边. 设v1,v2是两个不相交的非空子集,当满足以下条 ...

  9. zz高精地图和定位在自动驾驶的应用

    本次分享聚焦于高精地图在自动驾驶中的应用,主要分为以下两部分: 1. 高精地图 High Definition Map 拓扑地图 Topological Map / Road Graph 3D栅格地图 ...

  10. ZooKeeper 入门看这篇就够了

    什么是 ZooKeeper? ZooKeeper 是一个分布式的,开放源码的分布式应用程序协同服务.ZooKeeper 的设计目标是将那些复杂且容易出错的分布式一致性服务封装起来,构成一个高效可靠的原 ...