CSS入门

css是 层叠式样式表
 
css的作用是什么呢？举个抽象的例子啊，HTML是人，CSS则是衣服...
 
css给html穿上衣服，有三种形式：
内嵌、内联、外联。
这三种形式，优先级为：内嵌(1)，内联(2)，外联(3)。有同学问，什么意思？外联的优先级最弱对吗，如果我给div穿上黑色的衣服，是用外联的形式穿上的，那么我再用内联的形式给它穿上灰色的衣服，最后在页面上呈现出的结果，则是灰色的衣服，这就是优先级。
有同学又问：代码是从上往下执行的，那内联写在上面，外联写在下面，会不会是黑色的衣服呢？回答是，还是灰色，优先级是会影响的。
 
这里就介绍一下这三种形式的写法：
内嵌：<div style="color:red;">给我穿上红色衣服</div>在div里写style样式，则直接是内嵌形式，属性值的意思：color颜色，red红色，运行代码，它的字体颜色会变成红色。
 
内联：在head标签里写style标签：
 
  1. <head lang="en">
  2.     <meta charset="UTF-8">
  3.     <title></title>
  4.     <style>
  5.         p{
  6.             color:grey;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11. <p>我是灰色衣服</p>
  12. </body>
 
  1. 这就是内嵌形式，在head里写入style标签，然后在里面写出元素的名字，或者id、class，来指定这个元素，用花括号包起来，里面也是键值对。

外联：

使用link标签，写在head标签里面：<link rel="stylesheet" href="mycss.css"/>
它的意思是引用同级目录下的 "mycss.css"文件，注意，css层叠样式表要用css做后缀哦。
那么在外联里面css的写法和内联是一样的，不过不需要 style标签，直接写 元素、花括号、键值对 即可
写一个：
html里面的代码：
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" href="mycss.css"/>
  7. </head>
  8. <body>
  9. <span>我是外联，给我上黑色衣服</span>
  10. </body>
  11. </html>
 
  1. css里面的代码：
  1. span{
  2.     color:#000;
  3. }
  1.  
  1. 因为head标签里面使用了 link标签找到了css样式表，所以在里面外面写css代码，就会给html做出表现，换句话说就是给它穿上衣服。
  1.  
  1. 这里再说一下，以上我们使用的是 元素选择器来控制的css样式，那么我们说一下它最基础的三种选择器：
  1. ID选择器，class(类)选择器，元素选择器。
  1. 优先级同上，ID最高，它们的写法：
  1.  
  1. ID选择器：
  1. html:
  1. <div id="div1"></div>
  1.  
  1. css:
  1. #div1{
  2.     color:lavender;
  3. }
  1.  
  1. class选择器：
  1. <div class="div1"></div>
  1. css:
  1. .div1{
  2.     color:yellow;
  3. }
  1. 元素选择器：
  1. html:
  1. <div></div>
  1. css:
  1. div{
  2.     color:blue;
  3. }
  1. 重点注意它们的写法。选择器只能用在外联、内联。内嵌直接style直接上衣服，大家注意，class是可以控制多个元素一起用，而id整个页面只能唯一，否则会报错。
  1.  
  1. 老师的课程比较慢，因为考虑到一部分入门的同学，大家主动点学习。有问题可以评论，在老师理解范围内，都能解决哟
 
 

第五篇 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. [学习笔记] Tangent Distance

    Tangent Distance 简介 切空间距离可以用在KNN方法中度量距离,其解决的是图像经过有限变换之后还能否被分类正确,例如.对一张数字为5的手写数字图片,将其膨胀后得到图像p1,此时KNN还 ...

  2. java tfserving grpc 通信调用代码解析 【重点参考】

    https://blog.csdn.net/shin627077/article/details/78592729/   [重点参考]

  3. python|爬虫东宫小说

    2k小说网爬取最近大火的<东宫>小说,借鉴之前看过的一段代码,修改之后,进行简单爬取. from urllib import requestfrom bs4 import Beautifu ...

  4. Client Dimensions , offsetHeight , scrollTop 属性详解

    http://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight http://ww ...

  5. mysql 索引失效的几种情况+

  6. C#通过Oracle.ManagedDataAccess无法访问Oralce (转)

    原文转自:https://www.cnblogs.com/duanjt/p/6955173.html 问题描述:通过C#引用Oracle.ManagedDataAccess.dll访问Oracle,写 ...

  7. 小程序onLaunch事件的坑

    记一个小程序踩过的坑 小程序项目中app.js里面定义了globalData,即全局变量,里面定义了一个token字段 需求是这样的,每次进入小程序的时候需要检验该token有没有,没有就请求后台获取 ...

  8. Linux (Ubuntu 18.04) 安装vim编辑器

    大家可以去Ubuntu官网下载桌面系统:https://ubuntu.com/download/desktop,虽然最新版是19.04,但是建议大家下载稳定版18.04.安装过程非常简洁,我使用的是V ...

  9. 1.2.2 OSI参考模型 上

    一.HCNA网络技术学习指南 为了实现网络的互通及各种各样的网络应用,网络设备需要运行各种各样的协议已实现各种各样具体的功能.面对各种各样且数量繁多的功能,我们可以从网络架构的角度,引入功能分层的模型 ...

  10. Oracle Express Edition

    Oracle Express Edition(简洁版/开发版)非注册下载安装及SQL*Plus的简单使用 https://www.cnblogs.com/cjw1115/p/6209439.html ...