2018.12.5 CSS三种引入方式优先顺序,基础选择器,样式与长度颜色,常用样式(字体,文本)
一、三种方式的书写规范
1、行间式
<div style=" 100px; height: 100px; color: rgb(17, 119, 0);">></div>
2、内联式
<head>
<style>
div {
100px;
height: 100px;
background-color: red;
}
</style>
</head>
3、外联式
file: zero.css
div {
100px;
height: 100px;
background-color: red;
}
file: zero.html
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
代码运用
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>css三种引入</title>
<style type="text/css">
/* cass注释,p是选择器!作用域{}|作用域里是,{样式块}
下面<p></p>被p选择器装饰*/
p{
150px;
height: 150px;
background-color: red;
}
</style>
<<!--外链式-->
<!-- 要将css文件与该html文件建立联系 => link-->
<!-- 相对路径(目标文件相对于本文件的位置./当前路径../上一层路径) | 绝对路径-->
<!-- rel代表连接的样式(样式表)
type="text/css"在link里可以省略代表连接的文本类型
href="./css02.css"当前目录连接的css文件-->
<link rel="stylesheet" href="./css02.css">
</head>
<body>
<!--css:层级样式表,完成页面布局 -->
<<!--组成部分:选择器 作用域 样式块-->
<!--1.行间式-->
<div style="color: red">一段话,将要被css修饰处理</div>
<!--
1.样式书写在标签的style全局属性里
2.样式格式为 =>key: valye(单位)
3.以分号隔开多个样式
4.最后的;可以省略
-->
<!--宽高背景颜色 -->
<!--style 默认有宽度没高度,背景透明 -->
<div style=" 200px; height: 200px; "></div>
<!--2 内联式 -->
<!--
0.style标签写在<head>标签里
1.样式书写在标签的style标签中
2.样式格式为 => 选择器{样式块}
3.样式块 =>key: valye(单位)
4.样式快里以;隔开多个样式
5.最后的;可以省略
-->
<!-- 被上面style标签中选择器p给修饰了-->
<p></p>
<!--外链式 -->
<!--
1.样式书写在外部css文件中,不需要写任何标签,css里不会有标签只有html里有标签
2.样式格式为 => 选择器{样式块}
3.样式块 =>key: valye(单位)
4.样式块以;隔开多个样式
5.最后的;可以省略
-->
<h3></h3>
下面是写在css02.css文件里的选择器
/*css文件书写css语法*/
/*
选择器{
样式1:值1;
样式2:值2;
}
*/
h3 {
100px;
height: 100px;
background-color: blue
}
</body>
</html>
三种选择器的优先顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种引入的优先级</title>
<!-- 三种可以同时存在,协同完成布局-->
<!-- 三种之间没有优先级值说,谁在逻辑下方(后面解释的)谁就起作业(相同的样式用覆盖机制)-->
<!--行间式一定是逻辑最下方的-->
<!-- 外联-->
<link rel="stylesheet" href="./03.css">
<!-- 内联-->
<style type="text/css">
div{
200px;
color: pink;
}
</style>
</head>
<body>
<!-- 优先级:大家同时存在且操作同一对象同意属性,
才会出现冲突,最终起作用的就是优先级高的-->
<div style="你是个好人</div>
下面是03.css内容
div{
height: 200px;
color: black;
}
</body>
</html>
二 基础选择器(id选择器>类选择器>标签选择器>通配选择器)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style type="text/css">
/*div =>标签名 => 标签选择器 开发过程中尽可能少的运营,
运用范围为最内曾的显示层*/
/*dd => class名(可以重复) => 类选择器:布局的主力军*/
/*d => id名 => id选择器* 一定为唯一的,不然js不能识别/
/* * =>通配选择器 =>可以控制html,body,body下所有
用于显示内容的标签*/
/** { */
/*border: 1px solid black;*/
/*}*/
/*三种选择器有优先级*/
/*标签选择器:标签名{}*/
div {
200px;
height: 200px;
background-color: red;
}
/*类 选择器:.类名{}*/
.dd {
background-color: orange;
}
/*id 选择器: #id名{} */
#d {
background-color: green;
}
/*优先级: id选择器>类选择器>标签选择器>通配选择器 */
/*作用范围越精确优先级越高*/
</style>
<style type="text/css">
.div {
200px;
height: 200px;
background-color: orange;
}
/*多类名更加精确.div.red都是类名之间没有顺序
div.#d.div.red也可以找到匹配的类
*/
.div.red{
background-color: red;
}
</style>
</head>
<body>
<!-- 选择器: css选择html标签的一个工具 =>
将css与html建立起练习,呢么css就可以控制html样式 -->
<!--选择器其实就是给html标签起名字-->
<div></div>
<div class="dd"></div>
<div class="dd" id="d"></div>
<div class="div"></div>
<div class="div red"></div>
<div class="div"></div>
</body>
</html>
三 样式与长度颜色
2、长度
-
px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
-
mm：毫米
-
cm：厘米
-
in：英寸
-
pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
-
em：相当长度，通常1em=16px，应用于流式布局
3、颜色
-
rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
-
rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
-
hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
-
hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
-
HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。
Hue衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。 Saturation值是一个百分比:0%是灰度,100%饱和度最高 Lightness值也是一个百分比:0%是最暗,50%均值,100%最亮。
-
AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc
-
代码运用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>长度与颜色</title>
<style type="text/css">
.div {
/*px mm cm in em vw vh pt*/
200px;/*上面的长度名称都可以写在width和height里*/
height: 200px;
/*颜色单词 | rgb() 0~255 | rgba(255, 0, 255,0) |
#六位十六进制数#ff00ff,可以简写为#f0f*/
/*
hsl(320, 100%, 50%)
hsla(320, 100%, 50%,0.4)*/
background-color: rgb(255,0,255);
/**/
/*#abc == #AABBCC*/
/**/
}
</style>
</head>
<body>
<div class="div" ></div>
</body>
</html>
四 常用样式
1、字体样式
-
font-family：字体族科，多值用于备用，以,隔开
font-family: "STSong", "Arial";
-
font-size：字体大小
-
font-style： 字体风格 normal | italic | oblique#斜体
-
font-weight：字体重量 normal | bold | lighter | 100~900#字体粗细
-
line-height：行高
-
font：字重 风格 大小/行高 字族
2、文本样式
-
color：文本颜色
-
text-align：横向排列
left 居左 | center 居中 | right 居右
-
vertical-align：纵向排列
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象顶端对齐
-
text-indent：字体缩减
-
text-decoration：字划线#overline上面 | line-through中间 | underline下面
-
letter-spacing：字间距#2px距离大小
-
word-spacing：词间距#10px距离大小
-
word-break：自动换行#break-all,等..
normal：默认换行规则
break-all：允许在单词内换行
3、背景样式
-
background-color：颜色
-
background-image：图片
background-image: url(bg.png);
-
background-repeat：重复
repeat | no-repeat | repeat-x | repeat-y
-
background-position：定位
top | bottom | left | right | center
v_hint：定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center
-
background-attachment：滚动模式
scroll | fixed
v_eg：父级设置属性，子集内容超出父级范围
v_hint：掌握基本属性
代码运用(字体样式)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
200px;
height: 200px;
background-color: orange;
}
/*字体样式*/
.box {
/* 400px;*/
/*height: 100px;*/
/*字族*/
/*STSong作为首选字体, 微软雅黑作为备用字体*/
font-family: "STSong", "微软雅黑";
}
.box.uu {
/*字体大小*/
/*font-size: 50px;**/
/*字重字体粗细*/
/*font-weight: 900;*/
/*风格 斜体*/
/*font-style: italic;*/
/*行高: 某一段文本在自身行高中可以垂直居中显示 => 文本垂直居中
#字体距离上面的距离*/
/*line-height: 100px;*/
/*字体整体设置
/*字重 风格 大小/行高 字族 (风格可以省略)*/
font: 900 normal 50px/500px "STSong", "微软雅黑";
}
i {
/*normal清除系统字体风格*/
font-style: normal;
}
</style>
</head>
<body>
<div class="box uu">呵呵</div>
</body>
</html>
代码运用(文本样式)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap {
200px;
height: 200px;
background-color: yellow;
}
/*文本样式*/
.w1 {
/*换行方式*/
word-break:break-all;
}
.w2 {
400px;
/*水平居中: left | center | right*/
/*text-align: right;*/
/*字划线: overline | line-through | underline */
text-decoration: underline;
/*字间距*/
/*letter-spacing: 2px;*/
/*词间距*/
/*word-spacing: 50px;*/
/*缩进*/
/*1em相当于一个字的宽度*/
/*text-indent: 2em;*/
}
a {
/*取消划线比如超文本下班的下划线可以用这个去掉*/
/*text-decoration: none;*/
}
i {
/*normal清除系统字体风格所有风格都不用斜体*/
/*font-style: normal;*/
}
</style>
</head>
<body>
<div class="box uu">普通文本</div>
<i>i的文本</i>
<div class="wrap">一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三</div>
<hr>
<!-- <div class="wrap w1">123 12312 31231231231 2312312312312 3123123123123123123123123123123123123123123123123123123</div> -->
<hr>
<div class="wrap w2">hello world hello world</div>
<a href="">链接标签</a>
</body>
</html>
五display
display介绍
1.什么是display：页面中的所有标签的显示方式都是由display来控制的，display属性值不同，显示方式就不同，eg: display: block就是以block(块级)方式显示
2.为什么要掌握display：不管是系统已具有显示方式的标签，还是自定义的标签，我们掌握了display，就可以按照我们的需求，修改它们的显示方式，来达到我们期望的显示效果
3.每一个系统标签，都具有display默认值，div，h1，p为block，span等文本类标签为inline，img和input两个标签为inline-block
不是啊，文本、图片、视频、音频
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
.box {
80px;
height: 40px;
background-color: orange
}
.box {
/*block: 块级标签, 独占一行, 支持所有css样式*/
/*display: block;*/
/*inline: 内联(行级)标签, 同行显示, 不支持宽高*/
/*display: inline;*/
/*inline-block: 内联块标签, 同行显示, 支持所有css样式*/
display: inline-block;/*行快*/
/*标签的嵌套规则*/
/*①*/
/*block可以嵌套所有显示类型标签, div | h1~h6 | p*/
/*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/
/*②*/
/*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */
/*③*/
/*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/
}
.b1 {
height: 100px;
}
.b2 {
height: 80px;
}
.b3 {
height: 120px;
}
.box {
/*文本基线对齐*/
vertical-align: baseline;
}
</style>
</head>
<body>
<!-- <div class="box b1"></div>
<div class="box b2"></div>
<div class="box b3"></div> -->
<div class="box b1">123</div>
<div class="box b2">456</div>
<div class="box b3">
<span>789 789 789 789</span>
<span>789 789 789 789</span>
</div>
</body>
</html>