css入门

最新推荐文章于 2023-03-06 21:30:56 发布

江南晚来客

最新推荐文章于 2023-03-06 21:30:56 发布

阅读量909

点赞数 4

分类专栏： java web技术文章标签： css

本文链接：https://blog.csdn.net/jinzheng069/article/details/8666137

版权

java web技术专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css是什么：

css，即级联样式表（Cascading Style Sheet），它是用来辅助进行网页风格设计的，也可以说是修饰html的文件。

css的好处：

重构页面修改方便，使用了css技术后，html和css文件就分开了，也就是说一个网页的内容与表现形式的分离，一般修改小小部分的css文件里css样式属性就可以修改真站的样式版面，如背景颜色、字体颜色、网站宽度等具有table不具备的方便性。

css语法：

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

例一：

selector {declaration1; declaration2; ... declarationN }

例二：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

css引用方式：

css是由我们的html文件引用的，有三种方式：

1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

2.内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

3.内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

CSS入门例子：

<1>打开记事本:点击"开始"－－选择"程序"－－选择"附件"－－选择"记事本"(或者打开你的Notepad++编辑器)

<2>输入下面代码(直接拷贝过去就可以啦)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
        <head>
                <title> 欢迎来到梦之都 </title>
                <link rel="stylesheet" type="text/css" href="dreamdu.css" />
        </head>
        <body>
                <h1>欢迎来到梦之都</h1>
                <p>这是我的第一个网页,在这里
                        <a href="http://www.dreamdu.com/css/">
                                尽情学习CSS
                        </a>吧!
                </p>
        </body>
</html>

点击"文件"－－选择"保存"－－选择文件类型为"所有文件"－－文件名输入"dreamdu.html"并选择文件保存地址.(记住一定要把文件的后缀存为.html或.htm,否则网页无法显示)

<3>再新建一个文件,输入下面代码(直接拷贝过去就可以啦)

/*段落样式*/
p
{
	color: purple;
	font-size: 12px;
}

/*标题样式*/
h1
{
	color: olive;
	text-decoration: underline;
}

/*链接样式*/
a:link
{
	color:#006486;
}
a:visited
{ 
	color:#464646;
}
a:hover 
{ 
	color: #fff;
	background: #3080CB;
}
a:active 
{ 
	color:white;
	background: #3080CB ;
}

点击"文件"－－选择"保存"－－选择文件类型为"所有文件"－－文件名输入"dreamdu.css"并选择文件保存地址.(记住一定要把文件的后缀存为.css,而且要和dreamdu.html在同一个目录下.)

然后就可以运行看看结果了

（未完待续）

江南晚来客

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css入门

css是什么：css，即级联样式表（Cascading Style Sheet），它是用来辅助进行网页风格设计的，也可以说是修饰html的文件。 css的好处：重构页面修改方便，使用了css技术后，html和css文件就分开了，也就是说一个网页的内容与表现形式的分离，一般修改小小部分的css文件里css样式属性就可以修改真站的样式版面，如背景颜色、字体颜色、网站宽度等具有table
复制链接

扫一扫

专栏目录