今日内容：
1、css的三种引用方式
2、样式与长度及颜色
3、常用样式
4、css选择器
一、css的三种引用方式
行间式：
1.在标签头部的style
2.属性值是css语法
3.属性值用Key：value形式赋值，value具有单位
4.属性值之间用;隔开
<div style='width:100px;height=100px;backgroud-color:red;'> </div>
内联式：
1.在style标签内部(style标签一般作为(head的子标签))
2.属性值是css语法
3.属性值用Key：value形式赋值，value具有单位
4.属性值之间用;隔开（一般独立分开赋值）
5.格式：选择器{样式块}
<style type='text/css'> div{ width:100px; height:100px; backgroud-color:red; } </style>
外联式：
1.在外部CSS文件中
2.属性值是css语法
3.属性值用Key：value形式赋值，value具有单位
4.属性值之间用;隔开（一般独立分开赋值）
5.格式：选择器{样式块}
6.将html和css文件建立连接：通过link标签链接外部CSS
<link rel='stylesheet' type='text/css' href='css/01.css'>
01.css
div{
width:100px;
height:100px;
backgroud-color:red;
}
三种引入的优先级
注:三种方式之间没有优先级之分
1.三种方式协同布局,从上往下解析
2.不重复的属性一定为唯一位置
3.重复的属性采用覆盖赋值，保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
5.!important会影响优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type='text/css'> div{ width:100px; height: 100px; background-color: yellow; } </style> <link rel="stylesheet" type="text/css" href="02.css"> </head> <body> <div style='background-color: yellowgreen'></div> </body> </html>
02.css
div{
width:100px;
height: 100px;
background-color: red;
}
二、样式与长度及颜色
1.基本样式
<head> <style> div { width: 100px; height: 100px; background-color: red; } </style> </head>
2.长度
-
-
mm：毫米
-
cm：厘米
-
in：英寸
-
pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
-
720pt = 10 in
100mm = 10cm
160px = 10em = 10rem
50vw = 50% view width
3.颜色
-
-
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）
-
颜色单位有：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>
三、常用样式
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>
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>
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>
四、css选择器
1.通配选择器
匹配html,body,以及body中的所有子标签，就是具有显示效果的所有标签。一般用于整体reset操作（清除系统自定义样式）
*{
margin: 0;
}
2.标签选择器
匹配制定标签名的对应所有标签，运用场景并不多
div{
width: 100px;
height: 100px;
background-color: red;
}
3.类选择器
匹配指令类名对应的所有标签。类选择器为布局首选，建议基本都用类选择器进行布局
.dd{
font-size: 50px
}
4.id选择器
匹配制定ID名对应的唯一标签。html,css都是标记语言，所有对id可以进行多匹配，但JS是编程语言，只匹配到一个。一般不提倡用id选择器进行布局
#ele{
color: blue;
}
基础选择器优先级
- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器
