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学习之老男孩python全栈第九期_day008作业
1. 文件a.txt内容:每一行内容分别为商品名字,价钱,个数,求出本次购物花费的总钱数apple 10 3tesla 100000 1mac 3000 2lenovo 30000 3chicken ...
- 关于对DI和IOC的概念理解
在spring框架学习过程中,涉及到两个新名词:DI和IOC.开始总是混淆两者的概念,稀里糊涂,后来上网搜了一下又和同学讨论之后,基本上理解了二者的概念.实际上DI(依赖注入)和IOC(控制反转)就是 ...
- Android--根据子控件的大小自动换行的ViewGroup
1.自定义ViewGroup /** * Created by Administrator on 2016/2/26. * * --------自动换行的ViewGroup----------- */ ...
- 【Redis】Redis学习（四） Redis Sentinel模式详解
主从模式的弊端就是不具备高可用性,当master挂掉以后,Redis将不能再对外提供写入操作,因此sentinel应运而生. Redis Sentinel是Redis官方提供的集群管理工具,主要有三大 ...
- 004-React-Native--多图选择上传
参考资料:http://www.jianshu.com/p/488e62ed9656 一:使用react-native-image-crop-picker进行图片选择时,并没有提供多图的机制.当你从相 ...
- Linux服务器redhat配置本地yum源
前面给大家介绍了很多在Linux安装软件的知识,这些软件往往依赖了很多第三方的工具或者软件,如果在Linux服务器有外网的情况,咱们可以通过yum install这样的命令直接去安装这些相关的工具或者 ...
- ADB三个进阶使用
adb通过Wi-Fi连接手机 背景知识 Android系统底层运行着一个服务(adbd),也就是在手机系统内部,用于响应.管理大家在电脑端的adb命令连接,这个服务在启动时候会根据手机的配置监听USB ...
- LeetCode 题解之Rotate List
1.题目描述 2.题目分析 首先数出链表中的元素个数count,然后对k = k % count 求余数.接着将链表形成一个环,从最后一个元素开始,运动 count - k 步,此时节点的下一个节点 ...
- 使用 Azure PowerShell 监视和更新 Windows 虚拟机
Azure 监视使用代理从 Azure VM 收集启动和性能数据,将此数据存储在 Azure 存储中,并使其可供通过门户.Azure PowerShell 模块和 Azure CLI 进行访问. 使用 ...
- 转：asp.net mvc下的多语言方案 包含Html，Javascript和图片
可以不使用微软的Resource文件,而是将所有的词汇放入在一个txt的词典之中,便于维护. 步骤如下: 1)在整个程序的入口处global.asax.cs加入函数 private void Read ...