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 七 慢查询优化的基本步骤 八 慢日志管理 ====== ...
随机推荐
- BZOJ5473: 仙人掌
传送门 首先,所有连通块的个数的期望再减去每个点孤立的概率就是答案. 设 \(d_i\) 表示 \(i\) 的度数,那么每个点孤立的概率为 \(\frac{1}{2^{d_i}}\) 考虑计算所有连通 ...
- 【代码笔记】iOS-只让textField使用键盘通知
代码: #import "ViewController.h" @interface ViewController () @end @implementation ViewContr ...
- 【代码笔记】iOS-Transition动画
一,工程图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIVi ...
- Express浅谈
写给鸟自己的,大家如果不慎百度到这里来了,真好也在做这块功能,不懂的可以联系鸟.微信:jkxx123321 const Sequelize = require('sequelize'); const ...
- 【Java入门提高篇】Day4 Java中的回调
又忙了一周,事情差不多解决了,终于有可以继续写我的博客了(各位看官久等了). 这次我们来谈一谈Java里的一个很有意思的东西——回调. 什么叫回调,一本正经的来讲,在计算机程序设计中,回调函数是指通过 ...
- 03-01_WebLogic一些概念名词
WebLogic一些概念名词 域(Domain) 管理服务器(Administrative Server) 被管服务器(Managed Server,受管服务器) 集群(Cluster) 机器(Mac ...
- 光杆mdf文件的导入
场景,准备学习SSAS的时候,按照教程在微软下载了示例数据库AdventureWorksDW2012,下载来才发现只有一个mdf文件. 正好今天群里有位兄弟也碰到差不多的问题,客户数据库里的ldf文件 ...
- 转：Newtonsoft.Json高级用法
原文地址:http://www.cnblogs.com/yanweidie/p/4605212.html 手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多 ...
- postgresql排序分页时数据重复问题
当同时排序又分页时,如果排序的字段X不是唯一字段,当多个记录的X字段有同一个值时顺序是随机的. 这个有可能造成分页时数据重复的问题.某一页又把上一页的数据查出来了,其实数据库只有一条记录. 解决办法: ...
- PowerShell发送邮件（587）
#定义邮件服务器 $smtpServer = "mail.xx.com" $smtpUser = "sender" $smtpPassword = " ...