今日内容

1.css三种引入方式

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

3.长度及颜色单位

4.常用样式

5.css选择器

CSS三种引入方式

1.1css引入方式之行间式

​ 行间式（特点）：

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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>行间式</title>

</head>

<body>

    <div style="background-color: #fef; width: 200px; height: 200px"></div>

</body>

</html>

1.2css引入方式之内联式

​ 内联式（特点）：

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

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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>内联式</title>

    <style type="text/css">

        div{

            width: 200px;

            height: 200px;

            background-color: rgba(255,110,168,0.8);

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

1.3css引入方式之外联式

​ 外联式（特点）

​ 1.在外部CSS文件中

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

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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>外联式</title>

    <link rel="stylesheet" href="01.css">

</head>

<body>

    <div></div>

</body>

</html>

CSS文件内容

div{

    width: 200px;

    height: 200px;

    background-color: black;

}

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

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

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

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

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

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

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

​ 5.!important会影响优先级

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>三种引入的优先级</title>

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

	<style type="text/css">

		div{

			width: 200px;

			height: 200px;

			background-color:red!important;

		}

	</style>

</head>

<body>

	<div style="background-color: yellowgreen"></div>

	<!-- <div></div> -->

</body>

</html>

CSS文件内容

div{

	background-color:green;

}

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表示明度

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>长度及颜色单位</title>

	<style type="text/css">

		body{

			background-color: yellowgreen;

		}

		div{

			/*长度单位*/

			/*px in pt mm cm em rem vw vh */

			/*width:100px;*/

			/*width:720 pt; 10in*/

			/*width:100mm;10cm*/

			/*width:160px;10em 10rem*/

			/*width:50vw; 50% view width*/

			width:100px;

			height: 100px;

			/*颜色单位*/

			/*单词 reg() rgba() #六个十六进制位 hsl()*/

			/*background-color: red;*/

			/*background-color: rgb(0,0,255);*/

			/*background-color: rgba(0,0,255,50);*/

			/*满足AABBCC可以简写为abc*/

			/*background-color: #a0c;*/

			background-color: red;

		}

	</style>

</head>

<body>

	<div></div>

</body>

</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语法：空格隔开多个赋值的值，逗号隔开为一个值多值赋值）

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>字体样式</title>

	<style>

		span{

			font-size: 30mm;

			font-weight: 900;

			line-height: 50mm;

			font-style: normal;

			font-family:"楷体","微软雅黑";

			font:lighter 50mm/80mm "微软雅黑";

		}

	</style>

</head>

<body>

	<span>hello world!</span>

</body>

</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;(按标签设定的宽度强行换行，可以在单词（整体）内部换行)

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>文本样式</title>

	<style type ="text/css">

		span{

			color: red;

			text-align: center;

			text-decoration: none;

			letter-spacing: 3px;

			word-spacing: 10px;

		}

		div{

			width: 300px;

			display: inline-block;

		}

		div{

			font-size:12px;

			vertical-align: baseline;

			text-indent: 2em;

		}

		.div{

			word-break: break-all;

		}

		a{

			/*应用场景*/

			text-decoration: none;

		}

		h1{

			text-align: center;

		}

	</style>

</head>

<body>

	<h1>标题</h1>

	<span>123 abc 哈哈</span>

	<!-- <a href="">123</a> -->

	<div>嘻嘻 哈哈 嘿嘿嘿 嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿</div>

	<div>red yellow green red yellow greenred yellow greenred  greenred yellow green</div>

	<div class="div">abcdefasdasdqwdaskjhdksaaaaaaaaaaaaaaaaaaaaaaaaaaaahkjhqwiukdhaksihdiusahdiuhzxciuhzixzhciuxzhiuchzxiuhciuxzhciuzhiuziuxhciuxzhicuhxziuchxziuhciuxzhcixzuhciuxzhcizhx</div>

</body>

</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)

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>背景样式</title>

	<style type="text/css">

		div{

			width: 300px;

			height: 300px;

			background-color: red;

		}

		div{

			background-image: url("data/bg_repeat.gif");

			background-repeat: no-repeat;

			background-position: right center;

			background-attachment: fixed;

		}

		div{

			/*整体设置*/

			background: url("data/bg_repeat.png") 10px 10px no-repeat red;

		}

	</style>

</head>

<body>

	<div></div>

	br*100

</body>

</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 > 标签 > 通配

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>css选择器</title>

	<style type="text/css">

		div{

			width: 100px;

			height: 100px;

			background-color: red;

		}

		section{

			width: 200px;

			height: 200px;

			background-color: yellow;

		}

		.dd{

			font-size: 50px;

		}

		#ele{

			color: green;

		}

		*{

			margin: 0;

		}

		*{

			text-align: left;

		}

		div{

			text-align: right;

		}

		.d{

			text-align: center;

		}

		#ele{

			text-align: left;

		}

	</style>

</head>

<body>

	<section class="dd">s_1</section>

	<div >d_1</div>

	<section class="d" id="ele">s_2</section>

	<div class="dd">d_2</div>

	<span></span>

</body>

</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. python-代理模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 模式动机 通过引入一个新的对象(如小图片和远程代理对象)来实现对真实对象的操作或 ...

  2. Markdown 语法笔记

    一.标题 markdown 中的标题用 # 表示,# 的个数表示标题级别,一级标题相当于 h1,二级标题 h2,以此类推 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### ...

  3. 树莓派 引脚及接口图 AV接口顺序

    树莓派 引脚图 注:本表格适用于各版本,并且兼容26Pin的树莓派B,树莓派B为26Pin,其引脚对应于上表的前26Pin.   树莓派 接口图 AV接口又称(RCA),AV接口算是出现比较早的一种接 ...

  4. js判断数组是否包含某个字符串变量

    最近碰到一个这样的现象,后台返回的数据中,数组里面有一些有变量值,有一些没有变量值. 举个例子,比如后台返回的例子是这样的: var arr=[ { "status":" ...

  5. Navicat Premium 12连接Oracle时提示oracle library is not loaded的问题解决

    Navicat Premium 12连接Oracle时提示oracle library is not loaded的问题解决 链接时遇到的问题,记录一下 如果还没有安装工具,请参考:Navicat P ...

  6. DevOps之技能面

    <教学手册(Teaching Manual)> 教学:人类培养态度.传授知识.训练技能的活动.教学目的:知识与技能的层次:(了解.理解.熟悉.掌握.精通).教学手段:理论与实践的方面:(科 ...

  7. python 之socket

    socket,它最初做为BSD UNIX的进程通信机制,通常被称做"套接字",如今已经成为windows和mac等其它操作系统所共同遵守的网络编程标准. socket使用ip+端口 ...

  8. search文件中的config

    config文件中出现这句话时,代表该部分search应写成文件中封装好的search部分.即: var search = null;     this.search = search;     se ...

  9. 学习笔记：The Best of MySQL Forum

    http://mysql.rjweb.org/bestof.html I have tagged many of the better forum threads. 'Better' is based ...

  10. C# 泛型约束 xxx<T> Where T：约束(一)

    泛型约束 代码举例 发现我们游戏的代码中,主程写了很多类似这样的代码: public static T CreateObject<T>(out int objectId) where T ...