您的位置：首页 > Web前端 > CSS

CSS 基础知识

2017-07-11 00:00 281 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML CSS基础

相关文章推荐

新的分享

章节导航