2_31_CSS 属性、CSS与CSS3的属性值和单位_191022
css属性
font-family font-size font-style color
一、CSS属性值和单位
1、字符
如果值为若干单词，则要给值加引号。
如：p{ font-family:"sans serif"; }
p{ font-family: "微软雅黑 Light"; }
2、颜色
单位 描述
（颜色名） （颜色名称）
rgb(x,x,x) RGB值
rgb(x%, x%, x%) RGB百分比值
#rrggbb 十六进制数
3、长度
长度单位 简介
em 相对单位，相对于当前对象内文本的字体尺寸
ex 相对单位，相对于字符“x”的高度，通常为字体高度的一半
px 相对单位，像素（Pixel）
pt 绝对单位，点（Point）
pc 绝对单位，派卡（Pica）。相当于我国新四号铅字的尺寸
in 绝对单位，英寸（Inch）
cm 绝对单位，厘米（Centimeter）
mm 绝对单位，毫米（Millimeter）
（1）绝对单位换算：1in = 2.54cm = 25.4 mm 。绝对单位在网页中很少使用，一般多用在传统平面印刷中。
（2）相对单位与绝对单位相比显示大小不是固定的，受到屏幕分辩率、可视区域、浏览器设置以及相关元素大小等多种因素影响,。
（3）em
• em 相对于当前文档内文本的字体尺。
• 下面实例说明了em单位的使用。寸，若当前文档内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸，一般为16px
<style type="text/css">
body{font-size:62.5%;}
.p1{font-size:1.4em;}
.p2{font-size:1.6em;}
</style>
（4）ex = ½ em
• ex 相对于字符 “x” 的高度，通常为字体尺寸的一半。在实际使用中，浏览器将通过em 的值除以 2 得到 ex 值。
（5）px
• 像素（Pixel）是相对于显示器屏幕分辨率而言的，如Windows用户所使用的分辨率一般是96像素/英寸，MAC用户所使用的分辨率一般是72像素/英寸。
注：实际运用中多使用实际单位 em 和 px
二、CSS3属性值和单位
1、颜色
• CSS3增加的颜色值和单位。
2、长度
• CSS3增加的长度值和单位。
3、时间
• CSS3增加的时间值和单位。
四、CSS样式属性
可以使用丰富的样式规则来为网页中的元素设计显示样式，CSS样式属性大致分为文字、文本、背景、定位、边框、布局、列表、光标、滤镜 等。
总结： 颜色值（4种）、长度（em，px，ex=1/2em）
1、文字属性
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS使用示例-文字属性的使用</title>
<link href="12.jpeg" rel="icon">
<style type="text/css">
p {
font-family: 楷体;
font-size: 18pt;
font-style: italic;
font-weight: bold;
color: blue;
}
h1{
font-family:楷体;
font-size:20pt;
color:red;
text-align: center;
}
</style>
</head>
<body>
<h1>黄鹤楼送孟浩然之广陵</h1><br /><p align="center">
故人西辞黄鹤楼<br />
烟花三月下扬州<br />
孤帆远影碧空尽<br />
惟见长江天际流<br />
</p>
</body>
</html>
效果如下：
2、文本属性
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS使用示例-文本属性的使用</title>
<style>
.p1{
color: black;
text-decoration: underline;
letter-spacing: 2px;
text-align:center;
}
</style>
</head>
<body>
<p class="p1">天将降大任于斯人也，<br>必先苦其心志，劳其筋骨，<br>
饿其体肤，空乏其身，行拂<br>乱其所为，所以动心忍性，<br>增益其所不能。</p>
</body>
</html>
效果如下：
3、背景属性
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS使用示例-背景属性的使用</title>
<link href="12.jpeg" rel="icon">
<style>
html{
background-color: aqua;
background-image: url("12.jpg");
background-attachment: fixed;/*图片是否随内容滚动*/
background-size: 100%;
}
#idxzq{
color: darkorange;
text-align:center;
font-family:华文仿宋;
}
</style>
</head>
<body>
<p id="idxzq">范仲淹：苏幕遮<br>
碧云天，黄叶地，秋色连波，波上寒烟翠。<br>
上映斜阳天接水，芳草无情，更在斜阳外。<br>
黯乡魂，追旅思。夜夜除非，好梦留人睡。<br>
明月楼高休独依，酒入愁肠，化作相思泪。</p>
</body>
</html>
效果如下：
4、边框属性
利用CSS边框属性可以设置对象边框的颜色、样式以及宽度。使用对象的边框属性之前，必须先设定对象的高度及宽度。
• Border（边框）
• border-什么
（1）边框颜色
定义边框颜色使用 border-color 属性，对象有上方、右方、下方、左方四个边框。
对边框颜色赋值时有以下几种方式：
• 四个参数：按上方、右方、下方、左方的顺序赋值；
例如：border-color:red green blue black;
• 一个参数：颜色作用于四个边框；
例如：border-color:red;
• 二个参数：按照上下，左右的顺序赋值；
例如：border-color:red green; 上下边框为红色，左右边框为绿色；
• 三个参数：按照上，左右，下的顺序赋值；
例如：border-color:red green blue; 上边框为红色，左右边框为绿色，下边框为蓝色；
（2）边框样式
定义边框样式使用 border-style 属性，边框样式的参数的个数及赋值方式与边框颜色类似，边框样式的可取值及其解释如表所示：
（3）边框宽度
定义边框宽度使用border-width来定义，宽度的取值可以使用关键字或自定义的数值，宽度的参数的个数及赋值方式与边框颜色类似。
• 可使用的关键字有 medium、thin、thick。
medium ：默认宽度；
thin : 小于默认宽度；
thick : 大于默认宽度；
• 若要使边框宽度只对某一个边框有效，只需要在border-width中加入边框位置即可。
例如 ： border-left-width:thin;
注：边框的属性也可以使用border复合属性按照宽度、样式、颜色的顺序定义。
例如：border:1px solid skyblue; 边框：宽度 样式 颜色；（三者顺序可以随意变换）
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS使用示例-边框属性</title>
<link href="12.jpeg" rel="icon"><!--添加网页logo rel="icon"：修改网页默认显示类型为小图标 -->
<style type="text/css">
div.b1{
border:2px dashed #FF9600;
}
div.b2{
border:4px double red;
}
</style>
</head>
<body>
<div class="b1" style="position:absolute;background-color:#33CCFF;width:250px;height:100px;display:inline">
<div class="b2" style="position:relative;top:10px;left:10px;width:100px;height:100px;background-color:#FFCC00;">春晓<br />
春眠不觉晓<br />
处处闻啼鸟<br />
夜来风雨声<br />
花落知多少</div>
</div>
</body>
</html>
效果如下：
CSS基础小结
• CSS 是 层叠样式表，是设计网页的布局和格式的有效手段。
• CSS的样式规则包括选择符，属性名以及属性值。
• CSS常用的选择符有 HTML(元素)选择符、类选择符、id选择符、组合选择符 以及 包含选择符 等。
• 可以使用 内嵌样式表、内部样式表、外部样式表的方式来使用样式表，其中，外部样式表最为常见。
• 各种使用样式表的优先级从高到低依次为 内嵌样式表、内部样式表、外部样式表、浏览器的默认样式。
• CSS的属性包括 文本属性、文字属性、背景属性、定位属性、边框属性、列表属性、布局属性、滤镜属性等。
上一篇： CSS3中新增的背景属性
下一篇： Codeigniter的dom类用法实例
推荐阅读
-
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
-
css3系列-2.css中常见的样式属性和值
-
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
-
2_31_CSS 属性、CSS与CSS3的属性值和单位_191022
-
js 获取和设置css3 属性值的实现方法_javascript技巧
-
CSS3中的变形和过渡与动画和关联属性的简单介绍
-
js 获取和设置css3 属性值的实现方法_javascript技巧
-
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
-
CSS3中的变形和过渡与动画和关联属性的简单介绍
-
css3系列-2.css中常见的样式属性和值