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="width: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;
}
2.1Css.css
<!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;
/*width: 720pt; 10in*/
/*width: 100mm; 10cm*/
/*width: 10em; 通常160px 10rem*/
/*width: 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:;
}
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>