关闭

CSS入门简介

234人阅读 评论(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
查看评论

WebRTC 入门 01 简介 II

转载请注明出处: 信令 WebRTC的设计目的是解决对多媒体层的控制而不是信令层,它将信令层的东西尽量多的留给了应用层来管理。
  • yamingwu
  • yamingwu
  • 2015-03-24 08:49
  • 750

CSS简介以及使用

一、css的简介 1、什么是css 层叠样式表,css是对html进行样式修饰语言 层叠:就是层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的部分应用优先级高的,不冲突的部分共同作用 样式表:就是css属性样式的集合 2、css的作用 (1)修饰html的 使其html样...
  • MinggeQingchun
  • MinggeQingchun
  • 2017-03-20 17:19
  • 491

html css入门书籍推荐

好尴尬,最近找工作,一直遇到培训机构,妹的。。。。只能慢慢找了 首先,希望大家有基本的html以及css的基础来看下面基本书: 1.html5秘籍 2.css3实战 3.javascript权威指南 4.jquery权威指南 希望能快点找到工作, qq:17...
  • HUSHILIN001
  • HUSHILIN001
  • 2017-03-05 16:44
  • 736

LESS CSS入门简介

Less的一些简介,看完后直接去看官方文档就可以了。
  • kydkong
  • kydkong
  • 2016-07-21 16:14
  • 149

第一章:CSS简介和基本语法

1.CSS简介 CSS是用于布局与美化网页的;CSS是Cascading Style Sheets的英文缩写,即层叠样式表;CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言);CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用.css为文件名...
  • a123456zabc
  • a123456zabc
  • 2016-03-23 20:48
  • 276

HTML、CSS、JavaScript网页制作从入门到精通

这大概是我第一次写博客吧,自从大一开始写代码,至今也有5年的光景了,很遗憾并没有养成写博客的习惯,一方面因为我平时很少有阶段性的总结,另一面也确实不知道该分享些什么。归根结底还是功夫不到家,没有一些让自己骄傲的阶段性成果。既然要写,还是决定从读书笔记开始,记下自己学习的心得,一方面可以分享给大家,另...
  • luchengbing0120
  • luchengbing0120
  • 2017-09-19 19:42
  • 494

HTML5快速入门(一)—— HTML简介

前言:1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真正快速入门,如果有哪些不清楚的地方或者错误,欢迎联系我 2.更新时间没有规律,一般会在3天左右更新一...
  • yeshaojian
  • yeshaojian
  • 2016-06-08 21:50
  • 10122

html+css快速入门教程

前端工程师应该掌握的基本技术:HTML+CSS+JavaScript1 HTML简介1.1. 什么是HTML?(了解)HTML是超文本标记语言(HyperText Markup Language,HTML)的缩写。是标准通用标记语言(SGML Standard Generalized Markup...
  • keledon
  • keledon
  • 2017-06-07 19:09
  • 770

Linux内核入门简介

往大了说,几乎所有互联网都是运行在Linux服务器上的;往小了说,嵌入式系统很大一部分也都是Linux内核的。可以说,Linux内核无处不在,Linux内核是一个最普遍最复杂的开源项目之一,Linux内核之大,代码量之多,在我感觉就像是一个原始森林,要想精通实在是不容易,但是,不求精通,但求理解内核...
  • lyc_stronger
  • lyc_stronger
  • 2016-07-21 16:31
  • 465

用CSS进行美化的新闻列表

比较实用的网页制作模块-----新闻模块
  • newlinfeng
  • newlinfeng
  • 2017-06-04 18:02
  • 382