css的介绍

前面介绍了html，今天我将为大家介绍css。css也就是层叠样式表，通俗的来讲就是专门管理样式的。一般的布局模式都是css+div布局，大家可以随便找个网页来查看他的源代码，一般都会是civ布局。

首先我将为大家介绍css如何来引入html中。

第一种方法叫做内嵌，混合在HTML标记里使用，对每个元素单独定义样式

语法：<标签 > 标签内容

例：    

内嵌样式示例 

这种方法其实比较简单，但是不常用，可能我们在刚接触css时都会这么来使用，但是试想一下，如果我们以后做很多网页，而每个标签都一个一个的嵌套来定义它的样式，那我们所耗费的时间太多。而且这么做css被单分出来成为一种语言也就没有意义了。

第二种方法叫做内部样式，在HTML的头部标签与之间添加样式

例：

内部样式是我们平常开发所常用的一种方法，因为他不会像内嵌样式一样有许多冗杂的代码段，而且便于我们维护和修改。在我看来，要想成为一个好的前端工程师，我们应该从大局来考虑，不仅要页面做的美观，代码也应该整齐，简洁易懂。当然这都只是我个人理解，大家可以批评指正。

第三种方法叫做链入，链入外部样式 把样式表保存为一个样式表文件，然后在页面中使用标签链接到这个CSS文件。

例：

link标签的rel属性是说链入的是一个样式表，href的属性值是你样式表的路径。

第四种方法导入外部样式     在内部样式表的里导入一个外部样式表，导入时使用@import标签。

例：

导入外部样式和链入其实我感觉差不多，基本都是从外部来引用css，这两种方法我认为都差不多，在我开发微信小程序的时候，我用得都是内部样式。说到这，我要提一下，微信小程序和html差不多，但是微信小程序叫做wxml+wss+js，其实就是html+css+js的换一种说法，当我们前端三剑客学的差不多的时候，我认为可以自己独自开发个程序来试试。我是学完js然后又跟着视频学了下微信开发者工具的使用方法，然后才开发微信小程序的。如果各位想要微信开发者工具的安装包或者我的学习 视频可以私聊我，我会第一时间回复。

 接下来我为大家介绍下3种css的原则

首先是叠加原则，其实就是这四种方法如果控制的是同一个标签，并且控制的是不同的样式，那么他们可以同时生效。

第二个是就近原则，其实意思就是谁离得近，听谁的。

第三个是自然顺序原则，

 

 这三种原则其实都是字面意思很好理解。大家自己看看图就可以了。

 CSS的定义方法

1、语法：selector { property1:value1; property2:value2; …;                propertyN:valueN} 即：选择器{属性1：值1；属性2：值2；……}    

  2、书写规则 如果属性的值是多个单词组成的，必须在值上加上引号 属性和值之间用冒号分隔，多个属性之间用分号分隔 每个属性-值对尽量以空格开始

 基本选择器

1、标记选择器（标签选择器）

使用HTML的标签名称作为选择器

语法：标签名{ 属性：值;……}

例：body{ background-color:red；}          

特点：可以一次性控制多个目标元素的样式，但灵活性差

标签选择器其实就是把标签名作为了选择器，比如我定义了   div{color:#3FE5;  font-size:9pt;}那么body中所有的div标签都会被我这个控制。、

2、类选择器  

 结合html标签的class属性选择目标元素的选择器——“.”

语法：    .className{属性：属性值……}

例：        . tb-student { color:red; }

特点：可以将目标元素分类，分别应用CSS样式

类选择器 注意： “.”的两侧不能有空格

对没有相应class属性的标签没有影响

不同标签的class属性可以相同，

表示同一类 同一标签的class属性允许有多个空格分隔的值，将应用多个class样式，

如下面的段落p将同时应用.blue和.red的样式  

这里是class为red的字体的段落

类选择器的优先级高于标签选择器

说到这我来给大家举个例子来说明

使用类选择器制作奇偶行不同背景颜色的表格。

	


	

	
 css奇偶行不同背景颜色表格  
  
序号
姓名
 
昵称
 
发表帖子数量
 
访问网站次数统计
 
  
1
张三
lili
100
188
  
2
李四
baby
200
245
  
3
王小红
fly
 
134
 
333
  
4
李晓莉
莉莉
234
457
  
5
周明远
冬天
36
96
  
6
赵文
秋
566
25
 

 第三个ID选择器  

    结合html标签的id属性选择目标元素的选择器——“#”

语法：#IDName{属性：属性值;……}

例：        # tb-student { color:red; }

特点：可以准确地定位页面中唯一目标元素，应用CSS样式

ID选择器 id属性值是唯一的

与class不同 目标元素是唯一的，

一般用于网页中“独一无二元素”

#两侧不能有空格

优先级高于类选择器

在一个页面中多个id属性值相同的元素可以同时应用样式，但一般不应多个id值相同的元素存在

 ！Important 关键字  各个选择器的优先级：内嵌样式>ID选择器>类选择器>标签选择器）

使用！important关键字可以提升规则的优先级，优先级最高，高于内嵌样式 

交集选择器

    由两个选择器直接构成，结果是二者各自元素范围的交集，其中第一个选择器必须是标记选择器，第二个选择器必须是类选择器或ID选择器。

结合类选择器： 标签名.className{属性：属性值……}

结合ID选择器： 标签名#IDName{属性：属性值……}

并集选择器：对各个基本选择器选择的部分同时选中。

使用“逗号”——“，”将选择器分开，组合起来书写

语法：选择器1，选择器2，选择器3，……                { 属性1：值1；                  属性2：值2；                  ……}

特点：可以将多个选择器组合起来，一次性控制不同标签的相同属性

后代选择器    

 用空格表示元素之间的包含（嵌套）关系，实现精确的目标定位。外层标记在前，内层标记在后，中间用空格隔开，内层标记称为外层标记的后代。

语法：元素1□元素2 □元素3……{属性：属性值；…}

说明：元素1包含元素2，元素2包含元素3……（外层标记写在前面，内层标记写在后面）

注意：只要包含关系存在即可，不要求包含的嵌套层次,即只要标记嵌套在

标记之内就存在包含关系。

子对象选择器  

定义：用”>”表示对象之间的父子关系

语法：父亲对象>子对象{属性：属性值；… }

示例： 注意：子对象一定是父对象的第一级（层）包含的元素，对于嵌套层次为2层以上的子元素没有影响

子对象选择器与后代选择器的区别         

 

   这是一个超链接    

今天的分享到此结束，如果各位有什么问题，欢迎私聊，我会第一时间回复。