CSS入门

css是 层叠式样式表
 
css的作用是什么呢？举个抽象的例子啊，HTML是人，CSS则是衣服...
 
css给html穿上衣服，有三种形式：
内嵌、内联、外联。
这三种形式，优先级为：内嵌(1)，内联(2)，外联(3)。有同学问，什么意思？外联的优先级最弱对吗，如果我给div穿上黑色的衣服，是用外联的形式穿上的，那么我再用内联的形式给它穿上灰色的衣服，最后在页面上呈现出的结果，则是灰色的衣服，这就是优先级。
有同学又问：代码是从上往下执行的，那内联写在上面，外联写在下面，会不会是黑色的衣服呢？回答是，还是灰色，优先级是会影响的。
 
这里就介绍一下这三种形式的写法：
内嵌：<div style="color:red;">给我穿上红色衣服</div>在div里写style样式，则直接是内嵌形式，属性值的意思：color颜色，red红色，运行代码，它的字体颜色会变成红色。
 
内联：在head标签里写style标签：
 
<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        p{

            color:grey;

        }

    </style>

</head>

<body>

<p>我是灰色衣服</p>

</body>
 
这就是内嵌形式，在head里写入style标签，然后在里面写出元素的名字，或者id、class，来指定这个元素，用花括号包起来，里面也是键值对。

外联：

使用link标签，写在head标签里面：<link rel="stylesheet" href="mycss.css"/>
它的意思是引用同级目录下的 "mycss.css"文件，注意，css层叠样式表要用css做后缀哦。
那么在外联里面css的写法和内联是一样的，不过不需要 style标签，直接写 元素、花括号、键值对 即可
写一个：
html里面的代码：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="mycss.css"/>

</head>

<body>

<span>我是外联，给我上黑色衣服</span>

</body>

</html>
 
css里面的代码：

span{

    color:#000;

}
 
因为head标签里面使用了 link标签找到了css样式表，所以在里面外面写css代码，就会给html做出表现，换句话说就是给它穿上衣服。


这里再说一下，以上我们使用的是 元素选择器来控制的css样式，那么我们说一下它最基础的三种选择器：


ID选择器，class(类)选择器，元素选择器。


优先级同上，ID最高，它们的写法：




ID选择器：


html:





<div id="div1"></div>




 


css:




#div1{

    color:lavender;

}






class选择器：




<div class="div1"></div>




css:




.div1{

    color:yellow;

}




元素选择器：


html:




<div></div>




css:




div{

    color:blue;

}




重点注意它们的写法。选择器只能用在外联、内联。内嵌直接style直接上衣服，大家注意，class是可以控制多个元素一起用，而id整个页面只能唯一，否则会报错。




老师的课程比较慢，因为考虑到一部分入门的同学，大家主动点学习。有问题可以评论，在老师理解范围内，都能解决哟




 


 
												


											
第五篇 CSS入门 明白 三种嵌套形式，三种常用控制器的更多相关文章
	

    
								
  1. iOS开发UI篇—iOS开发中三种简单的动画设置
		
    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...
    
		
    2. 
						
  2. 前端js,css文件合并三种方式,bat命令
		
    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
    
		
    3. 
						
  3. python 中增加css样式的三种方式
		
    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
    
		
    4. 
						
  4. css中的三种基本定位机制
		
    css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
    
		
    5. 
						
  5. CSS中的三种基本的定位机制（普通流、定位、浮动）
		
    一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...
    
		
    6. 
						
  6. 应答流式RPC 请求流式RPC 向流式RPC  流式RPC的三种具体形式
		
    https://mp.weixin.qq.com/s/pWwSfXl71GQZ3KPmAHE_dA 用Python进行gRPC接口测试(二) 大帆船 搜狗测试 2020-02-07   上期回顾:用P ...
    
		
    7. 
						
  7. ASP.NET提供三种主要形式的缓存
		
    ASP.NET提供三种主要形式的缓存:页面级输出缓存.用户控件级输出缓存(或称为片段缓存)和缓存API.
    
		
    8. 
						
  8. 关于linux三种网络形式
		
    今天是开始的第一天,额,没什么仪式.舍友偶然间提醒我,应该把学习的东西,做一下规划和整理.我想一想也是对的.所以开通了这个.希望以后回来可以看看自己曾经的幼稚,那证明了我不断在学习在进步.最近在准备C ...
    
		
    9. 
						
  9. File类的构造方法：三种重载形式（新手）
		
    //导入的包.import java.io.File;//File类的构造方法 三种重载形式//创建的一个类.public class zylx1 { //公共静态的主方法. public stati ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. LeetCode   分类颜色
			
    LeetCode   分类颜色 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0. 1 和  ...
    
			
    2. 
						
  2. APT软件包管理-在线安装
			
    APT (Advanced Packaging Tool高级软件包工具) 是一个强大的包管理系统,而那些图形化程序如 添加/删除 应用程序 都是建立 在它的基础之上的.有了dpkg后,Debian再次 ...
    
			
    3. 
						
  3. 用Python在Android手机上架FTP服务器
			
    当我们没有带数据线却将手机上的文件共享到电脑上时,架个简单的FTP服务器 可以帮我们快速解决问题.以共享手机里的照片为例: 首先将电脑.手机接入同一个wifi. 然后,手机上用QPython执行以下脚 ...
    
			
    4. 
						
  4. 阶段3 3.SpringMVC·_07.SSM整合案例_02.ssm整合之搭建环境
			
    创建数据库ssm并创建表account create database ssm; use ssm; create table account( id int primary key auto_incr ...
    
			
    5. 
						
  5. SQL学习（二）SQL基础的增删改查
			
    在测试时使用数据库时,用的比较多的就是增删改查SQL了. 一.增加(insert into ...values) 用于向表中插入新记录 1.不指定列(表示:依次插入所有列的值) insert into ...
    
			
    6. 
						
  6. [NodeJS] 优缺点及适用场景
			
    概述: NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”,那么它的出现是为了解决什么问题呢,它有什么优缺点以及它适用于什么场景呢? 本文就个人使用经验对这些问题进行探讨. 一.  ...
    
			
    7. 
						
  7. JavaScript DOM 编程艺术(第二版)  初读学习笔记
			
    这本书留给我的印象就是结构.表现和行为层的分离,以及书后面部分一直在强调的最佳实践原则:平稳退化,逐步增强,向后兼容以及性能考虑. 要注意这不是一本JavaScript入门书籍~ 2.1 准备工作 用 ...
    
			
    8. 
						
  8. 在Linux中使用minikube
			
    Minikebe Minikube是一个轻量级Kubernetes实现,它在本地机器上创建一个VM,并部署一个只包含一个节点的简单集群. Minikube使用Docker机器来管理Kubernetes ...
    
			
    9. 
						
  9. Laravel底层原理系列
			
    Laravel 从学徒到工匠精校版 地址:https://laravelacademy.org/laravel-from-appreciate-to-artisan Advanced Applicat ...
    
			
    10. 
						
  10. vue中refs的使用
			
    最近在看其他项目的过程中,发现在dom节点上使用了ref="xxx"的使用,以前一直不知道该属性起着什么作用,因为一直忙着写项目. 这两天项目不忙了,有闲心来看别人做的项目了,就看 ...
    
			
    11.