今日内容

1.css三种引入方式

2.三种引入方式的优先级

3.长度及颜色单位

4.常用样式

5.css选择器

CSS三种引入方式

1.1css引入方式之行间式

​ 行间式（特点）：

​ 1.标签头部的style属性内

​ 2.属性值满足的是CSS语法

​ 3.属性值用key:value形式赋值（value具有单位）

​ 4.属性值之间用；隔开

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>行间式</title>
  6. </head>
  7. <body>
  8.     <div style="background-color: #fef; width: 200px; height: 200px"></div>
  9. </body>
  10. </html>

1.2css引入方式之内联式

​ 内联式（特点）：

​ 1.在style标签内（style标签一般作为head的子标签）

​ 2.属性值满足的是CSS语法

​ 3.属性值用key:value 形式赋值（value具有单位）

​ 4.属性值之间用；隔开（一般独行分开赋值）

​ 5.格式：选择器{样式块}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>内联式</title>
  6.     <style type="text/css">
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: rgba(255,110,168,0.8);
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div></div>
  16. </body>
  17. </html>

1.3css引入方式之外联式

​ 外联式（特点）

​ 1.在外部CSS文件中

​ 2.属性值满足的是CSS语法

​ 3.属性值用key:value形式赋值（value具有单位）

​ 4.格式：选择器{样式块}

​ 5.属性值之间一般用；隔开

​ 6.将HTML与CSS文件建立联系：HTML通过link标签连接外部CSS（一般在head连接）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>外联式</title>
  6.     <link rel="stylesheet" href="01.css">
  7. </head>
  8. <body>
  9.     <div></div>
  10. </body>
  11. </html>
  13. CSS文件内容
  14. div{
  15.     width: 200px;
  16.     height: 200px;
  17.     background-color: black;
  18. }

2.三种引入方式的优先级

​ 2.1 引入方式的优先级解析

​ 引入CSS样式时所发生的：

​ 1.引入方式都是协同布局

​ 2.不重复的属性一定为唯一位置的唯一值

​ 3.重复的属性采用覆盖赋值，保留最后赋值的值

​ 4.行间式一定逻辑上是最后被解析的（js正常操作的就是行间式）

​ 5.!important会影响优先级

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>三种引入的优先级</title>
  6. 	<link rel="stylesheet" type="text/css" href="02.css">
  7. 	<style type="text/css">
  8. 		div{
  9. 			width: 200px;
  10. 			height: 200px;
  11. 			background-color:red!important;
  12. 		}
  13. 	</style>
  14. </head>
  15. <body>
  16. 	<div style="background-color: yellowgreen"></div>
  17. 	<!-- <div></div> -->
  18. </body>
  19. </html>
  20. CSS文件内容
  21. div{
  22. 	background-color:green;
  23. }

3.长度及颜色单位

​ 3.1长度单位

​ 长度单位有：in pt px mm cm em rem vw vh

​ 720pt = 10 in

​ 100mm = 10cm

​ 160px = 10em = 10rem

​ 50vw = 50% view width

3.2颜色单位

​ 颜色单位有：rgb rgba() #六个十六进制位 hsl()

​ rgb:直接输入颜色的英文名称就行

​ rgba():括号内输入三个0-255的数再输一个0-1之间的数（用于表示透明度） 如（101，120，123，0.8）

​ #六个十六进制位：#后面跟六个十六进制位 如#FFFFFF

​ hsl: H表示色相，S表示饱和度，L表示明度

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>长度及颜色单位</title>
  6. 	<style type="text/css">
  7. 		body{
  8. 			background-color: yellowgreen;
  9. 		}
  10. 		div{
  11. 			/*长度单位*/
  12. 			/*px in pt mm cm em rem vw vh */
  13. 			/*width:100px;*/
  14. 			/*width:720 pt; 10in*/
  15. 			/*width:100mm;10cm*/
  16. 			/*width:160px;10em 10rem*/
  17. 			/*width:50vw; 50% view width*/
  18. 			width:100px;
  19. 			height: 100px;
  20. 			/*颜色单位*/
  21. 			/*单词 reg() rgba() #六个十六进制位 hsl()*/
  22. 			/*background-color: red;*/
  23. 			/*background-color: rgb(0,0,255);*/
  24. 			/*background-color: rgba(0,0,255,50);*/
  25. 			/*满足AABBCC可以简写为abc*/
  26. 			/*background-color: #a0c;*/
  27. 			background-color: red;
  28. 		}
  29. 	</style>
  30. </head>
  31. <body>
  32. 	<div></div>
  33. </body>
  34. </html>

4.常用样式

4.1常用字体样式

​ 常用字体样式：

​ font-size: 30mm;(字体大小)

​ font-weight:900;(自重：bold、normal、light、100-900 )

​ line-height:50mm;(行高：行高设置大于等于字体大小，字体在行高中垂直居中显示)

​ font-style:normal;(字体样式：一般不关心)

​ font-family:"楷体"，“微软雅黑”（字族：可以自定义字族，当这个“楷体”字体不存在，再选取“微软雅黑”#备用字体）

​ font:lighter 50mm/80mm "微软雅黑"（CSS语法：空格隔开多个赋值的值，逗号隔开为一个值多值赋值）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>字体样式</title>
  6. 	<style>
  7. 		span{
  8. 			font-size: 30mm;
  9. 			font-weight: 900;
  10. 			line-height: 50mm;
  11. 			font-style: normal;
  12. 			font-family:"楷体","微软雅黑";
  13. 			font:lighter 50mm/80mm "微软雅黑";
  14. 		}
  15. 	</style>
  16. </head>
  17. <body>
  18. 	<span>hello world!</span>
  19. </body>
  20. </html>

4.2常用文本样式

​ 常用文本样式有：

​ color:red;(颜色)

​ text-align:center;(水平居中方式：left、center、right)

​ text-decoration:none;(字划线：underlin、line-through、overline、none)

​ letter-spacing:3xp;(字间距)

​ word-spacing:10px;(词间距)

​ vertical-align:baseline;(垂直排列方式：top、baseline、bottom)

​ text-indent:2em;(缩进)

​ word-break:break-all;(按标签设定的宽度强行换行，可以在单词（整体）内部换行)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>文本样式</title>
  6. 	<style type ="text/css">
  7. 		span{
  8. 			color: red;
  9. 			text-align: center;
  10. 			text-decoration: none;
  11. 			letter-spacing: 3px;
  12. 			word-spacing: 10px;
  13. 		}
  14. 		div{
  15. 			width: 300px;
  16. 			display: inline-block;
  17. 		}
  18. 		div{
  19. 			font-size:12px;
  20. 			vertical-align: baseline;
  21. 			text-indent: 2em;
  22. 		}
  23. 		.div{
  24. 			word-break: break-all;
  25. 		}
  26. 		a{
  27. 			/*应用场景*/
  28. 			text-decoration: none;
  29. 		}
  30. 		h1{
  31. 			text-align: center;
  32. 		}
  33. 	</style>
  34. </head>
  35. <body>
  36. 	<h1>标题</h1>
  37. 	<span>123 abc 哈哈</span>
  38. 	<!-- <a href="">123</a> -->
  39. 	<div>嘻嘻 哈哈 嘿嘿嘿 嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿</div>
  40. 	<div>red yellow green red yellow greenred yellow greenred  greenred yellow green</div>
  41. 	<div class="div">abcdefasdasdqwdaskjhdksaaaaaaaaaaaaaaaaaaaaaaaaaaaahkjhqwiukdhaksihdiusahdiuhzxciuhzixzhciuxzhiuchzxiuhciuxzhciuzhiuziuxhciuxzhicuhxziuchxziuhciuxzhcixzuhciuxzhcizhx</div>
  42. </body>
  43. </html>

4.3常用背景样式

​ 常用背景样式：

​ background-image:url("");(背景图片)

​ background-repeat:no-repeat;（平铺：no-repeat、repeat-x、repeat-y）

​ background-position:right center;(定位：top、bottom、center、left、right#第一个值控制水平位置，第二个值控制垂直位置，可以用别的单位来填写如：10px 10px)

​ background-attachment:fixed(定位相关的涉及到滚动时的效果：scroll、fixed)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>背景样式</title>
  6. 	<style type="text/css">
  7. 		div{
  8. 			width: 300px;
  9. 			height: 300px;
  10. 			background-color: red;
  11. 		}
  12. 		div{
  13. 			background-image: url("data/bg_repeat.gif");
  14. 			background-repeat: no-repeat;
  15. 			background-position: right center;
  16. 			background-attachment: fixed;
  17. 		}
  18. 		div{
  19. 			/*整体设置*/
  20. 			background: url("data/bg_repeat.png") 10px 10px no-repeat red;
  21. 		}
  22. 	</style>
  23. </head>
  24. <body>
  25. 	<div></div>
  26. 	br*100
  27. </body>
  28. </html>

5.css选择器

5.1CSS选择器

​ 1.通配选择器：匹配所有（具有显示效果的所有标签）

​ 2.标签选择器：匹配制定标签名的对应所有标签

​ 3.类选择器：匹配指定类名对应的所有标签

​ 4.id选择器：匹配指定id名对用的唯一标签（html、css都是标记语言，所以对id可以进行多匹配，但js时编程语言，只能匹配到一个）

​ 总结：

​ 1.通配选择器一般用于整体reset操作（reset操作：清除系统自定义样式）

​ 2.标签与ID选择器运用场景并不多，一般不提倡采用ID选择器进行布局

​ 3.类选择器为布局首选（建议基本全用class选择器进行布局）

​ 基本选择器优先级：id > class > 标签 > 通配

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>css选择器</title>
  6. 	<style type="text/css">
  7. 		div{
  8. 			width: 100px;
  9. 			height: 100px;
  10. 			background-color: red;
  11. 		}
  12. 		section{
  13. 			width: 200px;
  14. 			height: 200px;
  15. 			background-color: yellow;
  16. 		}
  17. 		.dd{
  18. 			font-size: 50px;
  19. 		}
  20. 		#ele{
  21. 			color: green;
  22. 		}
  23. 		*{
  24. 			margin: 0;
  25. 		}
  26. 		*{
  27. 			text-align: left;
  28. 		}
  30. 		div{
  31. 			text-align: right;
  32. 		}
  34. 		.d{
  35. 			text-align: center;
  36. 		}
  38. 		#ele{
  39. 			text-align: left;
  40. 		}
  42. 	</style>
  43. </head>
  44. <body>
  45. 	<section class="dd">s_1</section>
  46. 	<div >d_1</div>
  47. 	<section class="d" id="ele">s_2</section>
  48. 	<div class="dd">d_2</div>
  50. 	<span></span>
  51. </body>
  52. </html>

day45的更多相关文章

  1. day45——html常用标签、head内常用标签

    day45 MySQL内容回顾 数据库 DBMS mysql -RDBMS 关系型 数据库分类 关系型:mysql\oracle\sqlserver\access 非关系型:redis,mongodb ...

  2. js实现自己定义鼠标右键-------Day45

    又是周末了,只是事实上这在国外应该算是一周的開始吧,无论怎么说,今天是在歇息,放松我紧绷的神经,放松我有些疲惫的精神,昨晚上要裂了般的头疼,仿佛全部的数据都在脑子字面飞舞旋转,伴着一阵阵的恶心,当时把 ...

  3. 团队作业8——第二次项目冲刺（Beta阶段）Day4--5.21

    展开圆桌式会议: 会议内容:1.团队成员对昨天任务完成情况做一个简单交流,并对昨天工作中存在的问题提出集中讨论解决:2.按照昨天的昨天工作分配表做具体的任务分配:3.简单讨论明天的任务分配每个人的工作 ...

  4. Python：Day45 Javascript的String字符串

    typeof只能判断普通数据类型, 对于复杂的只是判断出来是一个Object: instanceof 可以判断数据是否是某一类型: alert(s instanceof String); String ...

  5. day45 jQuery

    在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. 书写很繁琐,代码量多. 代码很乱,各个页面到处都是. 动 ...

  6. python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  7. 关于索引的相关 day45

    mysql数据库索引相关   一 介绍 什么是索引? 索引在MySQL中也叫做“键”,是存储引擎用于快速找到记录的一种数据结构.索引对于良好的性能非常关键,尤其是当表中的数据量越来越大时,索引对于性能 ...

  8. day45 html 初识，常见命令

    Web服务本质 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面 浏 ...

  9. MySQL ——索引原理与慢查询优化（Day45）

    阅读目录 一 介绍 二 索引的原理 三 索引的数据结构 三 MySQL索引管理 四 测试索引 五 正确使用索引 六 查询优化神器-explain 七 慢查询优化的基本步骤 八 慢日志管理 ====== ...

随机推荐

  1. AMD与CMD的异同

    AMD与CMD的异同? 1.从官方推荐的写法上面得出: CMD ----- 依赖就近 //CMD define(function(require,exports,module){ var a = re ...

  2. 关于子元素的margin-top对父级容器无效

    如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为visiable的属性就直接解决了 ...

  3. vue Element-UI 分页使用(1)

    最近在使用Element-UI这套框架配合Vue来写前端页面.在用Element-UI来制作表格的时候,遇到了一些小问题,记录方便学习. 其中两个事件是关于切换当前页和切换显示的列表条数的.另外的属性 ...

  4. Windows上PostGIS(压缩版)安装

    PostGIS安装 1．软件下载 postgresql-9.6.1-1-windows-x64-binaries.zip https://www.postgresql.org/download/win ...

  5. 在ActiveReports页面报表中显示Google地图

    有些报表需求中需要我们显示国家.城市等地址信息,在报表中添加地图信息会让报表给最终用户代码更多有效信息. 在报表中可以将地图作为图片添加进来,当一个图片显示在报表中时,该图片必须存放到本地计算机或者服 ...

  6. 机器学习实战（Machine Learning in Action）学习笔记————05.Logistic回归

    机器学习实战(Machine Learning in Action)学习笔记————05.Logistic回归 关键字:Logistic回归.python.源码解析.测试作者:米仓山下时间:2018- ...

  7. CSS 实例之打开大门

    本个实例主要的效果如下图所示 本案例主要运用到了3D旋转和定位技术.具体步骤如下: 1.首先在页面主体加三个很简单的div标签: <div class="door"> ...

  8. Loadrunner打开VU时候报错Critical error（cannot use Exceptiondialog）

    打开Loadrunner打开VU时候报错Critical error(cannot use Exceptiondialog) 卸载后,删掉注册表,重新安装,打开还是这样 怎么办呢 我男票告诉我,从开始 ...

  9. Paxos协议笔记

    对Paxos协议的介绍,可以通过Leslie Lamport的<Paxos Made Simple>展开学习和了解.Paxos算法在允许失败的分布式系统环境下,实现系统一致性.失败的情况有 ...

  10. 用于创建和管理 Azure 虚拟机的常用 PowerShell 命令

    本文介绍一些可用于在 Azure 订阅中创建和管理虚拟机的 Azure PowerShell 命令. 若要获取特定命令行开关和选项的详细帮助,可以使用 Get-Help 命令. 有关安装最新版 Azu ...