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 七 慢查询优化的基本步骤 八 慢日志管理 ====== ...
随机推荐
- Context 上下文
全称:context 解释:上下文,在我们的开发的程序中,通常使用context上下文. 理解:结合实际生活我们可以把它理解为是语境,比如A说:我喜欢他. 那么这个他是谁,我们不知道,如果在这句话之前 ...
- var和const和let的区别
简述: 1.前端的变量申明,可以用到var,ES6的const(衡量)/let(变量) 2.在ES5用的都是var,到ES6之后,也就是2015年开始出现const/let. var 不会报错,有声明 ...
- Salesforce中如何删除调试日志
大家在新建一个用户跟踪标记的时候可能会遇到以下报错:调试日志已经超过了上限,在编辑跟踪标志前,删除一些调试日志.但是在点击“全部删除”按钮删除所有可见的日志后,还是报同样的错误,这时候,我们打开开发者 ...
- Linux CentOS 6.5 下 vsftpd ftp服务器搭建
Linux CentOS 6.5 下 vsftpd ftp服务器搭建 by:授客 QQ:1033553122 操作系统环境:CentOS 6.5-x86_64 下载地址:http://www.ce ...
- Expo大作战(二十二)--expo分离后的部署（expokit）
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- [WPF 容易忽视的细节] —— Exception in WPF's Converter
前言: 在WPF中,Converter是我们经常要用到的一个工具,因为XAML上绑定的数据不一定是我们需要的数据. 问题: 在Converter中抛出一个异常导致程序崩溃,而且是在对未捕获异常进行集中 ...
- JSP 过滤器
JSP教程 - JSP过滤器 JSP过滤器是可用于拦截来自客户端的请求或处理来自服务器的响应的Java类. 过滤器可用于执行验证,加密,日志记录,审核. 我们可以将过滤器映射到应用程序部署描述符文件w ...
- nopcommerce
nopcommerce是国外的一个高质量的开源b2c网站系统,基于EntityFramework4.0和MVC3.0,使用Razor模板引擎,有很强的插件机制,包括支付配送功能都是通过插件来实现的,基 ...
- jdk1.8配置环境变量
1. 准备好jdk安装文件,选择地址,假设使用默认地址 2. 安装jdk,此时跳出安装 jre 的地址 3. 等待安装 4.找到安装路径,选择jdk 5. 复制文件夹下的bin 6. 点击我的电脑右键 ...
- mysql 导入csv文件
导入时,系统会默认一个导入路径,如果导入路径不是默认路径,会报 The MySQL server is running with the --secure-file-priv option so it ...