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. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  3. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. css中的三种基本定位机制

    css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...

  5. CSS中的三种基本的定位机制(普通流、定位、浮动)

    一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...

  6. 应答流式RPC 请求流式RPC 向流式RPC 流式RPC的三种具体形式

    https://mp.weixin.qq.com/s/pWwSfXl71GQZ3KPmAHE_dA 用Python进行gRPC接口测试(二) 大帆船 搜狗测试 2020-02-07   上期回顾:用P ...

  7. ASP.NET提供三种主要形式的缓存

    ASP.NET提供三种主要形式的缓存:页面级输出缓存.用户控件级输出缓存(或称为片段缓存)和缓存API.

  8. 关于linux三种网络形式

    今天是开始的第一天,额,没什么仪式.舍友偶然间提醒我,应该把学习的东西,做一下规划和整理.我想一想也是对的.所以开通了这个.希望以后回来可以看看自己曾经的幼稚,那证明了我不断在学习在进步.最近在准备C ...

  9. File类的构造方法:三种重载形式(新手)

    //导入的包.import java.io.File;//File类的构造方法 三种重载形式//创建的一个类.public class zylx1 { //公共静态的主方法. public stati ...

随机推荐

  1. LC 609. Find Duplicate File in System

    Given a list of directory info including directory path, and all the files with contents in this dir ...

  2. C++ 学习安排

    第一阶段主要是理解概念及最基本的定义和声明包含以下内容:1. 头文件2. 命名空间3. 变量和基本类型4. 函数5. 类6. 标准库类型第二部分进阶入门,主要学习C++中的某些内容的特殊性及逻辑编写1 ...

  3. JNI知识扩展

    JNI(Java Native Interface,JAVA原生接口) 使用JNI可以使Java代码和其他语言写的代码(如C/C++代码)进行交互. 问:为什么要进行交互? |- 首先,Java语言提 ...

  4. springboot2.0数据制作为excel表格

    注意:由于公司需要大量导出数据成excel表格,因此在网上找了方法,亲测有效. 声明:该博客参考于https://blog.csdn.net/long530439142/article/details ...

  5. 关于Win7 64位下:Navicat无法连接64位Oracle 11gR2:Cannot load OCI DLL解决方法

    错误描述 在Win7下安装了Oracle 11g R2,在用Navicat去连接Oracle时,提示以下错误: Cannot load OCI DLL, 126: Instant Client pac ...

  6. win + T 快捷键

    和 alt + tab 不同,win + T会在 在任务栏间的程序间进行switch

  7. 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_6 自定义类型转换器代码编写

    mvc是基于组件的方式 类型转换的接口Converter,想实现类型转换,必须实现这个接口 Ctrl+N搜索 converter 这是一个接口类 它有很多的实现类.S是字符串.后面T是指要转换类型 新 ...

  8. go 基础 处理异常

    package main import "fmt" func main() { dosomething() } func dosomething(){ defer func() { ...

  9. 【.NET】由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值。

    前言 上段时间做项目时,遇到如题之类问题,如今过去有一段时间了,具体出现的情形忘了,当时虽然找到了解决方法,但是依旧没有弄明白出现此种情况是何种原因,后来在微软的帮助支持中心找到了答案,特此记录,以防 ...

  10. deepin与win10 设置共享文件

    在做预料训练时用的是基于linux环境下的kenlm训练工具,然后当时发现woc? 这这这这训练出来的语言模型居然拖不到win10下使用......当时特别二,就在linux下登录邮箱给自己发邮件23 ...