【CSS】入门简介

原创 2017年01月03日 13:32:28

前言

  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的认识,也算的上是一种很好的学习方式(网页上右击–查看源码)。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML5快速入门(二)—— CSS简介

CSS简介 CSS(Cascading Style Sheets):层叠样式表,它用来控制HTML标签的样式,在美化网页中起到非常重要的作用 CSS的编写格式是键值对的形式格式:属性名 : 属性值 c...

CSS2(样式表简介)中文手册

  • 2008-09-10 19:43
  • 259KB
  • 下载

CSS2样式表简介

  • 2007-12-14 09:24
  • 259KB
  • 下载

CSS动画简介

现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端。 但是,CSS动画除外,它实在太有用了。本文介绍CSS动画的两大组成部分:transition和animation。我不打算给出...

css样式 做的学校简介

  • 2009-12-28 00:50
  • 1.51MB
  • 下载

css3简介.pdf

  • 2015-09-01 10:12
  • 2.05MB
  • 下载

CSS3 Transitions, Transforms和Animation使用简介与应用展示

CSS3 Transitions, Transforms和Animation使用简介与应用展示 时间:2011-01-22来源:未知 作者:admin 点击: 1895次 内容提要: ...

前端学习之路css(01)-简介

CSS 简介1. CSS是什么 CSS 指层叠样式表 (Cascading Style Sheets); 样式定义如何显示 HTML 元素; 样式通常存储在样式表中; 把样式添加到 HTML 4.0 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)