css的三种引入方式
一、行间式
<div style="200px ; height:200px; background:red;"></div>
二、内联式
<head>
<style>
div{
200px;
height:200px;
background:red;
}
</style>
</head>
三、外联式
file：1.css
.div{
200px;
height:200px;
background-color:red;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" herf="1.css">
<title>外联样式</title>
</head>
样式、长度与颜色
1、基本样式
<head>
<style>
div{
weight:200px;
height:200px;
background-color:red;
}
</style>
</head>
2、长度
- px：像素，屏幕上显示的最小单位
- mm：毫米
- cm：厘米
- in：英寸
- pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用
- em：相对长度，通常1em=16px，应用于流式布局
- vw：相对宽度，应用于流式布局；50vw 50%浏览器的宽度
- vh：相对高度，用法与vw相似
3、颜色
- rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
- rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
- AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写abc
常用样式
1、字体样式
- font-size：30mm; 字体大小
- font-weight: bold, normal,lighter,100~900;字体自重
- font-family:字体家族，多值用于备用，以，隔开
font-family:"STSong", "Arial";
-
line-height:字体的行高
-
css语法：空格隔开为多个值赋值， ，隔开为一个值多赋值
有顺序 顺序为：字重 宽度/行高 字族
<style>
div{
font: lighter 50mm/60mm "STsong";
}
</style>
2、文本样式
-
color：文本颜色
-
text-align:对其方式 left center right(一般用于标题居中)
-
text-decoration:字划线 underline overline line-through none(一般的用法为none,用于去除超链接的下划线)
-
vertical-align:垂直排列方式 top baseline bottom
-
letter-spacing:字间距
-
word-spacing:词间距
-
text-indent:2em;首行缩进
3、背景样式
- background-color:red;背景颜色
- background-image:背景图片
background-image:url(1.jpg)
-
background-repeat:平铺 no-repeat repeat-x repeat
-
background-position:定位 10px 10px;第一个控制水平位置,第二个控制垂直位置
css选择器
基础选择器
1.通配选择器
匹配所有具有显示效果的标签
*{
100px;
height:200px;
background:red;}
2.标签选择器
匹配指定标签的显示效果
div{
100px;
height:200px;
background:red;
}
3.类选择器
匹配指定类名的标签的显示效果
.dd{
100px;
height:200px;
background:red;
}
<div class= "dd">
hello!
</div>
4.id选择器
匹配指定id的标签的显示效果
#id{
100px;
height:200px;
background:red;
}
<div id= "d">
hello!
</div>
总结:
- 通配选择器一般用于整体的reset操作(reset操作:清除系统自定义样式)
- 标签与id不常用
- 类选择器为布局首选