CSS语法及HTML结合

二、CSS语法

p{color:red;}

选择器{属性名:属性值 ;}

选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号

属性名和冒号之间最好不要有空格。

CSS注释/*     */

使用选择器p{ }和<p>标签的区别:

p{

font-weight:bold;

font-style:italic;

}

</style>

</head>

<body>

<p>你好</p>

<p>你好</p>

<p>你好</p>

<p style = "color:red">你好</p>

三、CSS和HTML的结合方式

CSS代码理论上位置是任意的,但通常写在style标签里

CSS和HTML的结合方式有3种:

a. 行级样式表:采用style属性,范围只针对此标签适用

<div style = "border:1px solid red ;">大家好</div>

b. 内嵌样式表:采用<style>标签完成。范围针对此页面

<style type="text/css">

c. 外部样式表: 采用建立样式表文件。针对多个页面.

引入样式表文件的方式:

1):采用<link>标签

   eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

        <link rel = "stylesheet" type = "text/css" href = "a.css"></link>

2):采用import,必须写在<style>标签中,并且必须是第一句

eg: @import url(a.css) ;

两种引入方式的区别:

      外部样式表中不能写<link>标签,但是可以写import语句


<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

<title>Document</title>

<style type="text/css">

/*

CSS和HTML的结合方式:

1. 行级样式表: 采用style属性完成

2. 内部样式表: 采用style标签完成

3. 外部样式表: 采用外部css文件完成

*/

p{

font-weight:bold;

font-style:italic;

}

</style>

</head>

<body>

<p>你好</p>

<p>你好</p>

<p>你好</p>

<p style = "color:red">你好</p>

</body>

</html>


转载于:https://blog.51cto.com/rickyigoogle/1683443

Day2_CSS_CSS语法及HTML结合相关推荐

  1. 【JavaScript总结】JavaScript语法基础:BOM

    DOM是文档对象模型,操作对象是文档 window.document,和浏览器没有直接关系 DOM常用事件: onload,onbeforeunload, onunload onclick,ondbl ...

  2. 【JavaScript总结】JavaScript语法基础:JS编码

    运算符 数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...

  3. 【JavaScript总结】JavaScript语法基础:数据类型

    ------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...

  4. 第二天:Vue基础语法

    1.计算属性的setter和getter 每个计算属性都有setter和getter 一般来说用到setter较少,都不希望数据被改动,所以只用getter时也有缩写 <!DOCTYPE htm ...

  5. LLVM语法语义指令特性

    LLVM语法语义指令特性 High Level Structure Module Structure LLVM 程序由Module's组成,每个 's 是输入程序的一个翻译单元.每个模块由函数,全局变 ...

  6. LLVM一些编程语法语义特性

    LLVM一些编程语法语义特性 High Level Structure Module Structure LLVM 程序由Module's组成,每个 's 是输入程序的一个翻译单元.每个模块由函数.全 ...

  7. LLVM一些语法规则

    LLVM一些语法规则 LLVM文档 LLVM编译器基础架构支持广泛的项目,从工业强度编译器到专门的JIT应用程序,再到小型研究项目. 同样,文档分为几个针对不同受众的高级别分组: LLVM设计概述 几 ...

  8. 2021年大数据Hive(四):Hive查询语法

    全网最详细的Hive文章系列,强烈建议收藏加关注! 后面更新文章都会列出历史文章目录,帮助大家回顾知识重点. 目录 系列历史文章 前言 hive查询语法 一.SELECT语句 1.语句结构 2.全表查 ...

  9. 2021年大数据常用语言Scala(十八):基础语法学习 Map对象

    目录 Map对象 不可变Map 可变Map Map基本操作 Map对象 Map可以称之为映射.它是由键值对组成的集合.在scala中,Map也分为不可变Map和可变Map. 不可变Map 定义 语法 ...

最新文章

  1. python字符串用android,通过s从android客户端向python服务器发送字符串
  2. C# 操作office知识点汇总
  3. linux系统在pe下查看ip地址,pe下查看原系统ip的方法_网站服务器运行维护
  4. java impala_Java实现impala操作kudu
  5. laravel商品图片怎么展示_如何使用Laravel图片处理包intervention-image
  6. SpringMVC当中的 @Transactional(readOnly = true) 的作用
  7. python安装与使用Ta-Lib,获取金融技术面特征
  8. python爬虫爬取页面源码在本页面展示
  9. ideahtml里面没有提示_抖音上爆火的苹果充电提示音,安卓手机也可以设置了!!...
  10. js动态加载HTML元素时出现的无效的点击事件
  11. 基于springboot的社区物业管理系统(完美运行,包含数据库源代码,可完美运行)
  12. 产品经理通用标准工作流程
  13. 如何使用3D Converter将2D视频转换为3D?
  14. 【数字IC验证快速入门】45、UVM项目实践之APB_SPI(13)UVM 验证方法学总结
  15. Java实现字数统计(中文英文韩文日文混合),类似word效果
  16. Spring入门须知
  17. python 给手机发送邮件消息
  18. Python使用Turtle画国旗系列,Python相关方法的梳理和总结
  19. HashMap中的遍历有序性探究
  20. 3Dmax2017版本,如何将物体切换到点和线框模式,后面贴图仍然显示?

热门文章

  1. 如何使用Hadoop的JobControl
  2. java x86 模拟,Java模拟实现百度文档在线浏览
  3. nginx重定向到其他url方法_高级开发必须掌握Nginx之四,if、set、return
  4. Win64 驱动内核编程-21.DKOM隐藏和保护进程
  5. hdu5056(找相同字母不出现k次的子串个数)
  6. C语言经典例19-完数
  7. 【C 语言】数组 ( 指针退化验证 | 计算数组大小 | #define LENGTH(array) (sizeof(array) / sizeof(*array)) )
  8. 【Android 电量优化】JobScheduler 源码分析 ( JobServiceContext 源码分析 | 闭环操作总结 | 用户提交任务 | 广播接收者接受相关广播触发任务执行 )★
  9. 【Kotlin】Kotlin 单例 ( 懒汉式 与 恶汉式 | Java 单例 | Kotlin 单例 | 对象声明 | 伴生对象 | get 方法 | ? 与 !! 判空 )
  10. 为什么Java中有多态?