博客列表 >HTML-css样式

HTML-css样式

的确
的确原创
2020年02月20日 17:23:13580浏览
 

css是渲染HTML元素标签的样式

实例:

<!DOCTYPE html> 


<html>

<head>

<meta charset="utf-8">

<title>118qq.top</title>

<style type="text/css">

h1{color:red;}

p{color:blue;}

</style>

</head>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落</>

</body>

</html>


如何使用style属性制作一个没有下划线的超链接

实例:

<!DOCTYPE html> 


<html>

<head>

<meta charset="utf-8">

<title>118qq.top</title>

</head>

<body>

<a href="http://www.118qq.top/" style="text-decroation:none;">访问118qq.top</a>

</body>

</html>


如何标签到外部链接表

实例:

<!DOCTYPE html> 


<html>

<head>

<meta charset="utf-8">

<title>118qq.top</title>

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

</head>

<body>

<h1>我使用了外部样式文件来格式化文本</h1>

<p>我也是!</p>

</body>

</html>


如何使用css

css是为了更好的渲染HTML文档而引入的

css可以通过下列方式添加到HTML文档中

l  内联样式:在HTML文档中使用style属性

l  内部样式表:在HTML文档头部<head>使用<style>元素来包含css

l  外部引用:使用外部的css文件

最好的方式是外部引用css文件

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关标签中使用样式属性。样式属性可以包含任何css属性。

实例:

<p style=”color:red; margin-left:20px;”>文本颜色为红色,左外边距为20像素</P>


以上实例是改变段落颜色和左外边距

背景颜色

背景色background-color定义一个元素的背景色

实例:

<!DOCTYPE html> 


<html>

<head>

<meta charset="utf-8">

<title>118qq.top</title>

</head>

<body style="background-color:yellow;">

<h2 style="background-color:red;">这是一个背景为红色的标题</h2>

<p style="background-color:green;">这是一个背景为绿色的段落</p>

</body>

</html>


字体颜色、大小

我们可以使用font-family(字体)、font-size(字体大小)、color(颜色)属性来定义文字样式

实例:

<!DOCTYPE html> 


<html>

<head>

<meta charset="utf-8">

<title>118qq.top</title>

</head>

<body style="background-color:yellow;">

<h1 style="font-family:微软雅黑;">这是一个文字字体为微软雅黑的标题</h1>

<p style="font-family:微软雅黑; color:red; font-size:20px;">这是一个字体为微软雅黑颜色为红色大小为20像素的段落</p>

</body>

</html>


文本对齐方式

使用text-algin(文字对齐)指定文本水平与垂直的对齐方式

实例:

<!DOCTYPE html> 


<html>

<head>

<meta charset="utf-8">

<title>118qq.top</title>

</head>

<body style="background-color:yellow;">

<h1 style="text-algin:center;">居中对齐的标题</h1>

</body>

</html>


内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。可以在<head>部分通过<style>标签定义内部样式表

实例:

<head> 


<meta charset="utf-8">

<title>118qq.top</title>

<style type="text/css">

body{background-color:yellow;}

p{color:blue;}

</style>

</head>


外部样式表

当样式需要被应用到多个页面时,外部样式表将是最理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观

实例:

 

<head> 


<meta charset="utf-8">

<title>118qq.top</title>

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

</head>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议