1、颜色属性：color属性定义文本的颜色
颜色属性有5种写法：1）color:green (属性值是颜色的英文单词)
2）color:#ff6600 (16进制的颜色定义方式,可在PS中寻找对应颜色的16进制；#ff(红)66(绿)00(蓝)})
3）color:#f60 (缩写式：当RGB三种颜色的十六位进制值相同即可缩写；color:#ff6600等价color:#f60)
4）color:rgb(x,x,x) （x表示红(r)绿(g)蓝(b)的值，每个的取值范围是[0,255]）
5）color:rgba(x,x,x,a) (x表示红(r)绿(g)蓝(b)的值，a表示色彩空间的透明度，取值范围是[0,1])
例子：
<!--设置p标记中的颜色为青色，h1标记中的内容设置成不同透明度的样式-->
<!DOTYPLE html>
<html>
<head>
<title>CSS的常见属性之一：颜色属性</title>
<meta charset="utf-8">
<style type="text/css">
p{color:red}
p{color:#ff6600}
p{color:rgb(0,255,255)}
.a{color:rgba(182,22,106,1)}
.b{color:rgba(182,22,106,0.8)}
.c{color:rgba(182,22,106,0.6)}
.d{color:rgba(182,22,106,0.3)}
</style>
</head>
<body>
<p>
麦子学院
<h1 class="a">麦子学院</h1>
<h1 class="b">麦子学院</h1>
<h1 class="c">麦子学院</h1>
<h1 class="d">麦子学院</h1>
</p>
</body>
</html>运行结果：
2、字体属性：定义文本的字体属性，包括：大小，样式等
1）字体大小（用font-size定义）
px：为文字设置一个固定的值 %：与父元素相比所占的百分比（如：100%表示与父元素一样大）
smaller：比父元素更小 larger：比父元素更大 inherit：跟父元素一样大
<!DOTYPLE html>
<html>
<head>
<title>CSS的常见属性之二：字体属性</title>
<meta charset="utf-8">
<style type="text/css">
body{font-size:40px}/*这样定义两个标题字体的大小还是不统一的,只是在原来的比例上增大了*/
h1,h2{font-size:40px}/*这样定义两个标题字体的大小才是一样大*/
body{font-size:20px}/*定义父元素*/
h1,h2{font-size:100%}/*这种方式与上面两种方式等价，此时它们的大小与父元素相同，为40px*/
h3{font-size:200%}/*h3的大小比父元素大一倍*/
.ha{font-size:smaller}/*ha的大小比父元素更小*/
h1{font-size:inherit}/*h1的大小跟父元素一样*/
.hb{font-size:larger}/*hb的大小比父元素更大*/
</style>
</head>
<body>
<h1 class="ha">麦子学院</h1>
<h1>麦子学院</h1>
<h1 class="hb">麦子学院</h1>
<h2>麦子学院</h2>
<h3>麦子学院</h3>
</body>
</html>2）字体（用font-family来定义，如：font-family：微软雅黑，serif）
注：一般要定义多种字体，主要是怕程序员与用户用的电脑有差异，程序员有A字体时，用户电脑上没有A字体
例子：h1{font-family:'宋体','微软雅黑'}，可以去网上查找各类字体的英文名称，这样不用加'*'号
h1{fotn-family:Microsoft YaHei}
3) 字体加粗（用font-weight来定义，如：font-weight:normal）
font-weight的属性值有几种：normal(默认值), bold(粗), bolder(更粗), lighter(更细)
也可以自己取相应的值来设定粗细，取值范围是100-900之间的整百数，其中400=normal，700=bold 4）字体样式（用font-style来定义，如：font-style:normal）
normal：正常（标准）
italic：斜体
oblique：倾斜
inherit：继承
5）小型大写字母显示文本（用font-variant来定义，如：font-variant:normal;）
normal：正常
small-caps：小型大写字母
inher：继承
3、背景属性（定义背景相关属性，如：背景颜色、背景图片等）
1）背景颜色（background-color）
其属性值的表达方式与字体颜色属性相同，如：background-color：red、rgb(255,0,0)
2）背景图片（background-image）
background-image:url(图片路径) ——默认会把背景图片平铺满
background-image:none——没有背景图片
3）背景重复（指背景图片的重复方式，background-repeat）
background-repeat:repeat——背景图片重复平铺满
background-repeat:repeat-x——向X轴重复
background-repeat:repeat-y——向Y轴重复
background-repeat:no-repeat——不重复，仅一张
4）背景位置（指背景图片的位置，background-position）
横向（left，center，right）
纵向（top，center，bottom）
background-position后面可以跟两个属性值，如：background-position:top center;
background-position的属性值可用数值表示，background-position:(x) (y)，如：background-position:(20px) (2px)
5）简写方式，用简单方式定义background的所有属性
background:背景颜色 url(图像) 重复 位置
如：background:#f2f2f2 url(3_qq_42543880.jpg) no-repeat center;
例子：
<!DOTYPLE html>
<html>
<head>
<title>CSS的常见属性之三：背景相关属性</title>
<meta charset="utf-8">
<style type="text/css">
div
{
width:200px;定义div的长和宽
height:200px;
background:#f2f2f2 url(3_qq_42543880.jpg) no-repeat 20px 20px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>运行结果：
4、文本属性（包括文本的排列方式，文本方向，字符间距等属性）
1）横向排列（指文本的横向位置，text-align）
left——文本居左 center——文本居中 right——文本居右
2）文本行高（line-height）
两种方式表示：1、%：基于字体大小的百分比行高
2、数值：设置固定行高
例子：
<!DOTYPLE html>
<html>
<head>
<title>CSS的常见属性之四：文本相关属性</title>
<meta charset="utf-8">
<style type="text/css">
div
{
width:300px;/*为div设置尺寸*/
height:300px;
}
p
{
font-size:20px;/*设置字体大小为20px*/
line-height:40px;/*设置行高为40px，即字体的两倍*/
line-height:50%;/*设置行高为字体大小的50%，即字体的一半，这样会导致两排字出现重合*/
}
</style>
</head>
<body>
<div>
<p>麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院</p>
</div>
</body>
</html>运行结果：
3）文本首行缩进（text-indent）
三种表示方式：1、%：表示占父元素的百分比
2、数值：设置固定值，默认为0
3、inherit：继承父元素
例子：
<!DOTYPLE html>
<html>
<head>
<title>CSS的常见属性之四：文本相关属性</title>
<meta charset="utf-8">
<style type="text/css">
div
{
width:300px;/*为div设置尺寸*/
height:300px;
}
p
{
font-size:20px;/*设置字体大小为20px*/
line-height:40px;/*设置行高为40px，即字体的两倍*/
line-height:50%;/*设置行高为字体大小的50%，即字体的一半，这样会导致两排字出现重合*/
text-indent:50%;/*首行缩进占父元素的50%，因为p标记的父元素为div，而div的尺寸为300px*/
text-indent:40px;/*首行缩进用数值定义，40px相当于首行缩进两个字*/
}
</style>
</head>
<body>
<div>
<p>麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院</p>
</div>
</body>
</html>4）文本字符间距（letter-spacing）
三种表示方式：1、normal：默认
2、数值：设置固定值，可以为负值，最终效果与设定的字体大小有关
3、inherit：继承
5）单词间距（word-spacing）
三种表示方式：1、normal：默认
2、数值：设置固定值，可以为负值，最终效果与设定的字体大小有关
3、inherit：继承
6）文本方向（direction）
三种表达方式：1、ltr：从左到右，系统默认
2、rtl：从右到左
3、inherit：继承
7）文本大小写（text-tranform）
五种表达方式： 1、none：默认
2、capitalize：每个单词以大写字母开头
3、upprecase：仅有大写字母
4、lowercase：无大写字母，仅有小写字母
5、inherit：从父元素继承text-transform属性
5、边框属性（包括边框的风格、宽度、颜色等属性）
1）边框风格
a、border-style：边框各个方向统一样式；
b、border-bottom/top/left/right-style：单独定义某一方向（下边、上边、左边、右边）的边框样式
c、十种属性值：1、none：无边框； 2、solid：直线边框； 3、dashed：虚线边框；
4、dotted：点状边框； 5、double：双线边框； 10、inherit：继承
以下几种表达方式需依托border-color属性值
6、groove：凸槽边框； 7、ridge：垄状边框； 8、inset：inset边框； 9、outset：outset边框
2）边框宽度
a、border-width：边框各个方向统一宽度；
b、border-bottom/top/left/right-width：单独定义某一方向（下边、上边、左边、右边）的边框宽度
c、五种属性值：1、thin：细边框； 2、medium：中等边框； 3、thick：粗边框；
4、数值：固定值的边框； 5、inherit：继承
3）边框颜色
a、border-color：边框各个方向统一颜色；
b、border-bottom/top/left/right-color：单独定义某一方向（下边、上边、左边、右边）的边框颜色
c、四种属性值：1、RGB：rgb(255,255,0) 2、RGBA：rgba(255,255,0,0.5)
3、十六位进制：#ff0、#ffee00 4、inherit：继承
d、属性值的四种情况：1、border-color后面只跟一个值：（上、下、左、右）都是一样的颜色，如：border-color：green
2、border-color后面跟两个值：（上下）一个颜色，（左右）一个颜色，如：border-color：blue red
3、border-color后面跟三个值：(上)、(左右)、(下)各一个颜色，如：border-color：blue red green
4、border-color后面跟四个值：(上)(右)(下)(左)各一个颜色，如：border-color：blue red red green
例子：
<!DOTYPLE html>
<html>
<head>
<title>CSS的常见属性之五：边框相关属性</title>
<meta charset="utf-8">
<style type="text/css">
div
{
width:50px;
height:50px;
float:left;
margin-right:10px;
background-color:#f60;
border-width:3px;
border-color:green;
}
.div1{border-style:solid;}
.div2{border-style:dashed;}
.div3{border-style:dotted;}
.div4{border-style:double;}
.div5{border-bottom-style:solid;border-top-style:dashed;border-left-style:dotted;border-right-style:double;}
.div6{border-style:solid;border-width:4px;border-color:rgb(0,0,255) green red;}
/* .div7,.div8,.div9,.div10
{
border-width:20px;
width:90px;
height:40px;
background-color:none;
border-color: #ddd;} */
/*简写方式:样式，宽度，颜色*/
.div7,.div8,.div9,.div10
{
width:90px;
height:40px;
border:solid 2px black;
}
.div7{border-style:groove;}
.div8{border-style:ridge;}
.div9{border-style:Inset;}
.div10{border-style:outset;}
</style>
</head>
<body>
<div class="div1">solid</div>
<div class="div2">dashed </div>
<div class="div3">dotted </div>
<div class="div4">double </div>
<div class="div5">kind </div>
<div class="div6"> div0</div>
<div class="div7"> 凸槽边框</div>
<div class="div8"> 垄状边框</div>
<div class="div9"> inset</div>
<div class="div10"> outset</div>
</body>
</html>运行结果：
4）简写方式（border：样式 宽度 颜色）
6、列表属性（设置列表标记的类型、位置等）
1）标记的类型（用list-style-type设置）
1、none：无标记 2、disc：默认，标记是实心圆 3、circle：标记是实心圆 4、square：标记是实心方块
5、decimal： 标记是数字 6、decimal-leading-zero：0开头的数字（01、02等） 7、lower-roman：小写罗马数字
8、upper-roman：大写罗马数字（I,II,III等） 9、lower-alpha：小写英文字母 10、upper-alpha：大写英文字母
。。。。
2）标记的位置（用list-style-position设置）
1、inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
2、outside：默认值，保持标记位于文本的左侧，列表项目标记放置文本以外且环绕文本不根据标记对齐
3、inherit：从父元素继承
3）设置图像列表标记（用list-style-image设置）
1、url：图像路径
2、none：默认，无图形被显示
3、inherit：从父元素继承list-style-image属性值
4）简写方式（list-style：类型 位置 图像标记）
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
