关闭

【CSS】入门简介

196人阅读 评论(9) 收藏 举报
分类:

前言

  CSS,Cascading Style Sheets,层叠样式表。是用于控制网页样式并将样式信息与网页内容分离的一种标记性语言。

CSS特点

  相对于传统的HTML的表现而言,CSS能够对网页中的对象位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

CSS由来

  一个东西的出现一般来说意味着一个实际问题的解决。对于CSS,它基本解决了HTML中存在的维护困难,标记不足,数据冗余,定位困难等问题。

<html>
<head>
    <title>页面标题</title>
   </head>
<body>
    <h2><font color="#0000FF" face="黑体">CSS标记1</font></h2>
    <p>CSS标记的正文内容1</p>
    <h2><font color="#0000FF" face="黑体">CSS标记2</font></h2>
    <p>CSS标记的正文内容2</p>
    <h2><font color="#0000FF" face="黑体">CSS标记3</font></h2>
    <p>CSS标记的正文内容3</p>
    <h2><font color="#0000FF" face="黑体">CSS标记4</font></h2>
    <p>CSS标记的正文内容4</p>
</body>
</html>

引入CSS样式后

<html>
<head>
<title>页面标题</title>
<style>
<!--
h2{
    font-family:黑体;
    color:#0000FF;
}
-->
</style>
</head>
<body>
    <h2>CSS标记1</h2>
    <p>CSS标记的正文内容1</p>
    <h2>CSS标记2</h2>
    <p>CSS标记的正文内容2</p>
    <h2>CSS标记3</h2>
    <p>CSS标记的正文内容3</p>
    <h2>CSS标记4</h2>
    <p>CSS标记的正文内容4</p>
</body>
</html>

效果图是一样的,去掉了重复的代码。

这里写图片描述

CSS引入方式

  在html代码中加入CSS样式有四种方式,分别是:行内样式、内嵌式、链接式,导入样式。
一、行内样式

<html>
<head>
<title>页面标题</title>
   </head>
<body>
    <p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>
    <p style="color:#000000; font-style:italic;">正文内容2</p>
    <p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>
</body>
</html>

这里写图片描述

二、内嵌式

<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:25px;
}
-->
</style>
   </head>
<body>
    <p>紫色、粗体、下划线、25px的效果1</p>
    <p>紫色、粗体、下划线、25px的效果2</p>
    <p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>

这里写图片描述

三、链接式

<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
   </head>
<body>
    <h2>CSS标题1</h2>
    <p>紫色、粗体、下划线、25px的效果1</p>
    <h2>CSS标题2</h2>
    <p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>

1.css样式文件内容:

h2{
    color:#0000FF;
}
p{
    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:20px;
}

这里写图片描述

四、导入样式

<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
@import url(1.css);
-->
</style>
   </head>
<body>
    <h2>CSS标题1</h2>
    <p>紫色、粗体、下划线、25px的效果1</p>
    <h2>CSS标题2</h2>
    <p>紫色、粗体、下划线、25px的效果2</p>
    <h3>CSS标题3</h3>
    <p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>

这里写图片描述

结语

  通过学习其他网站的css代码也可以提高css的认识,也算的上是一种很好的学习方式(网页上右击–查看源码)。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:139487次
    • 积分:10726
    • 等级:
    • 排名:第1670名
    • 原创:221篇
    • 转载:16篇
    • 译文:0篇
    • 评论:4756条
    友情链接