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>
浙公网安备 33010602011771号