day45
今日内容
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的更多相关文章
- day45——html常用标签、head内常用标签
day45 MySQL内容回顾 数据库 DBMS mysql -RDBMS 关系型 数据库分类 关系型:mysql\oracle\sqlserver\access 非关系型:redis,mongodb ...
- js实现自己定义鼠标右键-------Day45
又是周末了,只是事实上这在国外应该算是一周的開始吧,无论怎么说,今天是在歇息,放松我紧绷的神经,放松我有些疲惫的精神,昨晚上要裂了般的头疼,仿佛全部的数据都在脑子字面飞舞旋转,伴着一阵阵的恶心,当时把 ...
- 团队作业8——第二次项目冲刺（Beta阶段）Day4--5.21
展开圆桌式会议: 会议内容:1.团队成员对昨天任务完成情况做一个简单交流,并对昨天工作中存在的问题提出集中讨论解决:2.按照昨天的昨天工作分配表做具体的任务分配:3.简单讨论明天的任务分配每个人的工作 ...
- Python：Day45 Javascript的String字符串
typeof只能判断普通数据类型, 对于复杂的只是判断出来是一个Object: instanceof 可以判断数据是否是某一类型: alert(s instanceof String); String ...
- day45 jQuery
在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. 书写很繁琐,代码量多. 代码很乱,各个页面到处都是. 动 ...
- python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)
一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...
- 关于索引的相关 day45
mysql数据库索引相关 一 介绍 什么是索引? 索引在MySQL中也叫做“键”,是存储引擎用于快速找到记录的一种数据结构.索引对于良好的性能非常关键,尤其是当表中的数据量越来越大时,索引对于性能 ...
- day45 html 初识，常见命令
Web服务本质 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面 浏 ...
- MySQL ——索引原理与慢查询优化（Day45）
阅读目录 一 介绍 二 索引的原理 三 索引的数据结构 三 MySQL索引管理 四 测试索引 五 正确使用索引 六 查询优化神器-explain 七 慢查询优化的基本步骤 八 慢日志管理 ====== ...
随机推荐
- 根据python上下文管理，写一个在读文件内容前后自动打开关闭文件的程序
利用上下文管理实现读f文件前后自动打开关闭文件#在本目录创建f文件,内容写monkey代码如下 import contextlib #导入模块1 @contextlib.contextmanager# ...
- 5月23日——谈谈对BFC规范的理解
一.什么是BFC? BFC(block formatting context):简单来说它就是一种属性,这种属性会影响元素与元素之间的位置.间距 二.形成BFC的条件 1.float:给元素添加浮动 ...
- form图片上传遇到错误
org.springframework.web.multipart.MultipartException: The current request is not a multipart request ...
- htnl类名命规范
html 命名规则 一.注意事项: 1. 一律小写; 2. 尽量用英文; 3. 不加中杠和下划线; 4. 尽量不缩写,除非一看就明白的单词. 主要的 master.css 模块 module.css ...
- SD从零开始09-10
SD从零开始9 数据流(Data Flow) 根据参考创建Create with reference 可以参考之前的凭证来创建销售凭证,可以在初始画面,也可以在凭证处理过程中,通过uniform. d ...
- 活字格Web应用平台学习笔记1 - 下载安装，ready go
今年有一个很重要的职业目标,就是好好学习活字格这个神器,争取在这两个月拿到活字格初级工程师的认证证书.给自己加个油,今天开始好好学习,好好做笔记. 第一步,下载安装 先去活字格官网:http://ww ...
- springboot 1.3.5升级1.5.9后 默认使用tomcat 8.5版本 get请求报400 异常信息为 The valid characters are defined in RFC 7230 and RFC 3986
1.springboot 1.3.5升级1.5.9后 默认使用tomcat 8.5版本而之前用的是tomcat7 get请求报400 异常信息为 The valid characters are ...
- ElementUI制作树形表组件
提要 最近项目中需要用到树形表格来描述部门.区域之间的父子展开关系.但是已经在项目中使用的Vue的成熟组件ElementUI以及iViewUI组件都没有提供相应的树形表格组件,无奈找了其他替代方案也都 ...
- DevOps之技能面
<教学手册(Teaching Manual)> 教学:人类培养态度.传授知识.训练技能的活动.教学目的:知识与技能的层次:(了解.理解.熟悉.掌握.精通).教学手段:理论与实践的方面:(科 ...
- c#WebApi使用form表单提交excel，实现批量写入数据库
思路:用户点击下载模板按钮,获取到excel模板,然后向里面填写数据保存.from表单提交的时候选择保存好的excel,实现数据的批量导入过程 先把模板放在服务器的项目目录下面:如 模板我一般放在:F ...