1.1 基本概念
CSS是指层叠样式表(Cascading Style Sheets)。
为什么要使用CSS?
HTML描述了要呈现的内容,而CSS则定义了这些内容的呈现形式,比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离,有利于分工合作。有利于快速变换不同的呈现形式。
在网页中使用CSS样式可以有三种方法:
(1)内联样式:将样式定义在标签内的style属性中,内容和表现形式高度耦合,维护困难,不利于分工合作,且该样式只应用于当前标签,故不提倡这种做法。样式以键值对的形式书写,以“;”结束。
<p style="color:red;">这是一个段落</p>
(2)内部样式:在网页中的<Head>标签中通过<style>标签来定义。内容和表现形式的耦合程度大大降低。这种方式只适用于网页内容比较简单,若网页内容繁杂,样式繁多就不适用了,且这种方式只能应用于当前页面。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表格.jpg的开发</title>
<style>
table{
border-collapse: collapse;
margin:50px auto;
width:700px;
font-size: 16px;
box-shadow: 0 0 10px #aaa;
}
</style>
<script></script>
</head>
(3)外部样式:在网页外部定义一个CSS样式表文件,文件后缀名为“.css”,然后在网页<head>标签内通过<link>标签引进CSS外部样式表,<link>标签的形式为“<link rel="stylesheet" href="">”。“rel”属性不可缺省,“href”属性值是要引进的样式表的名称及对应的路径。请看代码示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="css/mystyle.css">
<style></style>
<script></script>
</head>
<body>
<p style="color:red;">这是一个段落</p>
<p>这是另一个段落</p>
</body>
</html>
外部CSS样式:
p{
font-size: 17px;
color:pink;
}
body{
background:#aaa;
}
效果图:
外部样式表使得内容和表现形式彻底分离,有利于分工合作及维护,可在多个HTML文件中引用。强力推荐在网页制作中使用外部样式表。
1.2 颜色
所有的颜色都可以由红色(red)、绿色(green)、蓝色(blue)三种颜色搭配而成,也就是人们常说的“三原色”。
在CSS中颜色的表示方法通常有四种:
(1)十六进制表示形式:#aaaaaa(灰色)、#ffffff(白色)、#000000(黑色) 等等····
(2)RGBA(r,g,b,a)形式:以RGB整数设置颜色,A表示颜色的透明度,a的取值范围为“0~1”.“0”表示纯透明,“1”表示不透明。例 rgb(255,255,255),rgba(255,255,255,0.8).
(3)用颜色名表示 :如white、red、greenyellow、gold等。
(4)以RGB百分数设置颜色:如 rgb(50%,20%,30%).
<body>
<p style="color:#ff6a93;">这是一个段落</p>
<p style="color:rgba(67,173,255,0.8);">这是一个段落</p>
<p style="color:blue;">这是一个段落</p>
<p style="rgb(80%,10%,10%)">这是一个段落</p>
</body>
效果图:
1.3尺寸单位
cm:厘米.
mm:毫米.
in:英寸.
px:像素.
%:百分比.
em、vw、vh 、rem.
1.4 CSS基础属性
表示方法 :{ 属性名:属性值 }
例如:
{ background:#aaa;border:solid 1px #fff }
1.4.1 字体相关属性
(1)Font-family:规定字体名称。
(2)Font-size:规定字体大小。
(3)Font-style:规定字体的样式,如加粗、倾斜。
(4)@font-face:自定义一种字体,内容可包括字体名称、大小、颜色。
(5)font-weight:设置字体的权重。取值为“100~900”,或者“bold/bolder/inherit/normal/lighter”.
(6)字体属性也可以简写成一个属性Font:不过书写值有顺序,
例如:
p{
font:18px 华文宋体;
}
/* 简写时候,字体大小必须写在字体名称前面,中间用空格隔开*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>font</title>
<style>
p{
font-family: 华文宋体;
font-size: 17px;
font-style: italic;
}
</style>
<script></script>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
1.4.2 文本相关属性
文本相关属性主要包括文本颜色、对齐方式、修饰效果等。
(1)color:规定文本的颜色,取值为颜色值。
(2)text-decoration(文本修饰效果):取值有 “none(无修饰效果)/underline(下划线)/overline(上划线)/line-through(删除线)”.
(3)text-shadow(文本阴影):比如 { text-shadow:3px 5px #aaaaaa(3px代表水平方向的偏移量,5px代表垂直方向的偏移量,最后一个代表阴影颜色) }
(4)direction:规定文本方向,有两个取值 “rtl(从右往左)/ltr(从左往右)”。
(5)text-indent:规定文本首行缩进值。例如 text-indent:5px
(6)text-align:规定文本水平对齐方式,取值有 "left(左对齐)/right(右对齐)/center(居中)/justify(两端对齐)"。
(7)vertical-align(文本垂直对齐方式):“ top(顶部对齐)/bottom(底端对齐)/middle(居中对齐)”
(8)letter-spacing:规定字符间距。
(9)word-spacing:规定文字间距。
(10)line-height:规定行高,实际上是调整行间距。
1.4.3 尺寸相关属性
(1)width:规定宽度值。
(2)height:规定高度值。
(3)max-width:规定最大宽度值。
(4)max-height:规定最大高度值。
(5)min-width:规定最小宽度值。
(6)min-height:规定最小高度值。
1.4.4 显示相关属性
(1)display:取值 ”none(不显示元素,但不占用原有空间)/block(显示为块级元素)“。
(2)visibility:取值为 ”hidden(隐藏元素,但还占用原有空间)/visible(元素为可见状态)“。
(3)display可将块级元素转化为内联元素,反之亦可以,取值以下:
block:将元素转化为块级元素。
inline-block:将元素转化为内联块级元素。
li{
display: inline-block;
line-height: 35px;
background: #aaaaaa;
width:95px;
text-align: center;
margin-left: -5px;
}
1.4.5 盒子模型
margin:外边距。
与之相关的有:margin-top、margin-right、margin-bottom、margin-left。
使用方法:
(1){ margin:20px ; } 表示上右下左外边距都是20px
(2){ margin-left:10px; } 表示左外边距是10px
(3){ margin:20px 10px 15px 35px } 表示顺序分别是上右下左的外边距值
padding:内边距。
与之相关的有:padding-top、padding-right、padding-bottom、padding-left。
使用方法:
(1){ padding:20px ; } 表示上右下左内边距都是20px
(2){ padding-left:10px; } 表示左内边距是10px
(3){ padding:20px 10px 15px 35px } 表示顺序分别是上右下左的内边距值
border:设定元素的边框。
使用方法:
<style>
p{
border:solid 1px #aaa;
}
</style>
/* 注释:
solid 规定边框的样式为实线,还可取值为 ”dashed(虚线)/dotted(圆点)/transparent(隐藏)/double(双线)“.
1px 规定边框的粗细.
#aaa 规定边框的颜色.
*/
outline: 设置元素周围的轮廓线。用法等同于border