CSS的引入方式、长度与颜色单位、常用样式、选择器
一、CSS的三种引入方式
1、行间式
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>行间式</title>
</head>
<body>
<!-- 1.在标签头部的style标签内 -->
<!-- 2.属性值满足CSS语法 -->
<!-- 3.属性值用key：value形式赋值，value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<div style="100px;height:100px;background-color:red"></div>
</body>
</html>
2、内联式
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>内联式</title>
<style>
div{
width:100px;
height:100px;
background:yellow;
}
</style>
</head>
<body>
<!-- 1.在style标签内(style标签一般为head的子标签) -->
<!-- 2.属性值满足CSS语法 -->
<!-- 3.属性值用key：value形式赋值，value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<!-- 5.格式：选择器 {样式快}-->
<div></div>
</body>
</html>
3、外联式
div{ width: 200px; height: 200px; background-color: green; }
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外联式</title>
<link rel="stylesheet" type="text/css" href="2.1Css.css">
</head>
<body>
<!-- 1.在外部css文件中 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
<!-- 5.格式: 选择器{样式块} -->
<!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接) -->
<div></div>
</body>
4、三种引入方式的优先级
1.三种方式协同布局:
2.不重复的属性为属性第一次出现时的值
3.重复的属性采用覆盖赋值,保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
5.!important会影响优先级
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种引入优先级</title> <style type="text/css"> div { width: 100px; height: 100px; background-color: yellow!important; } </style> <link rel="stylesheet" type="text/css" href="02.css"> </head> <body> <div style="background-color: yellowgreen"></div> <!-- <div></div> --> </body> </html> <!-- 最后显示的是黄色，因为黄色加了!important --> <!-- 如果去掉!important，显示的颜色是黄绿色 -->
二、长度及颜色单位
1、长度单位
1. px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
2. mm：毫米
3. cm：厘米
4. in：英寸
5. pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
6. em：相当长度，通常1em=16px，应用于流式布局
7.vw、vh:view width,view height 百分比
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>长度单位</title> <style type="text/css"> body { background-color: yellowgreen; } div { width: 100px; /* 720pt; 10in*/ /* 100mm; 10cm*/ /* 10em; 通常160px 10rem*/ /* 50vw; 50% view width*/ height: 100px; } </style> </head> <body> <div></div> </body> </html>
2、颜色单位
1. rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
2. rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
3. hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
4. hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
5. #AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>长度及颜色单位</title> <style type="text/css"> body { background-color: yellowgreen; } div { /*颜色单位*/ /*单词 rgb() rgba() #六个十六进制位 hsl()*/ /*background-color: cyan;*/ /*background-color: rgb(255, 0, 0);*/ /*background-color: rgba(255, 0, 0, 0);*/ /*满足AABBCC形式可以简写为abc*/ background-color: #a0c } </style> </head> <body> <div></div> </body> </html>
三、常用样式
1、字体样式
1. font-size：字体大小
2. font-style： 字体风格 normal | italic | oblique
3. font-weight：字体重量 normal | bold | lighter | 100~900
4. line-height：行高
5. font-family：字体族科，多值用于备用，以,隔开,第一个字体不存在，使用第二个字体
eg：font-family:"STsong","STheiti";
6. font：字重 风格 大小/行高 字族
eg：font:lighter 50px/100px "STsong","STheiti";
2、文本样式
1. color：颜色
2. text-align：水平排列
left 居左
center 居中
right 居右
3. text-decoration：字划线
underline 下划线
line-through 中划线
overline 下划线
none 没有划线，主要应用于超链接的去除下划线
4. text-indent：缩进
5. letter-spacing：字间距
6. word-spacing：词间距
7. vertical-align：垂直排列
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象底端对齐
8.word-break：自动换行
normal：默认换行规则
break-all：允许在单词内换行
3、背景样式
1. background-color：颜色
2. background-image：图片，在url中说明图片的路径
eg：background-image: url(bg.png);
3. background-repeat：重复
no-repeat：不重复
repeat-x：在X轴上重复
repeat-y：在y轴上重复
repeat：重复
4. background-position：定位，第一个值表示水平方向，第二个值表示垂直方向。定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center
top | bottom | left | right | center
eg：background-position：right，center
5. background-attachment：滚动模式
6. background：整体设置
background: 背景图片 图片水平位置 图片垂直位置 图片重复 背景颜色
eg：background: url("data/bg_repeat.gif") 10px 10px no-repeat red
四、基础选择器
1、通配选择器
* { border: solid; } /*匹配文档中所有标签：通常指html、body及body中所有显示类的标签*/
2、标签选择器
div {
background-color: yellow;
}
/*匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span*/
3、类选择器
.red {
color: red;
}
/*匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配*/
4、id选择器
#div {
text-align: center;
}
/*匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配*/
5、选择器的优先级
id > class > 标签 > 通配
6、基础选择器总结
1.通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式)
* {
margin: 0;
}
2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
3.类选择器为布局首选(建议基本全用class选择器进行布局)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> /*1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)*/ /** { border: solid; }*/ /*2.标签选择器(标签名):匹配指定标签名的对应所有标签*/ div { width: 100px; height: 100px; background-color: red; } section { width: 200px; height: 200px; background-color: yellow; } /*3.类选择器(.):匹配指定类名对应的所有标签*/ .dd { font-size: 50px; } /*4.id选择器(#):匹配指定id名对应的唯一标签*/ #ele { color: blue; } * { text-align: left; } div { text-align: right; } .d { text-align: center; } #ele { text-align: left; } </style> </head> <body> <div class="dd">d_1</div> <section>s_1</section> <div class="d" id="ele">d_2</div> <section class="dd">s_2</section> <span></span> </body> </html>