小白教程
所有教程
关于
Search
172.70.178.232
172.70.178.232
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML CSS样式”的源代码
本页内容
上一节:
HTML_HSL_和_HSLA_颜色
下一节:
HTML链接
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
CSS 代表层叠样式表。英文Cascading Style Sheets。 掌握CSS后可以通过CSS文件控制多个网页样式,减少代码重复减少维护成本,增加网页打开速度。 <html> <div style="position:relative;height:220px;margin-top:50px;"> <div style="opacity:0.5;position:absolute;left:50px;top:-30px;width:300px;height:150px;background-color:#40B3DF"></div> <div class="w3-theme" style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;"></div> <div style="margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;"> <h1><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">CSS = 样式和颜色</font></font></h1> <div style="letter-spacing:12px;font-size:15px;position:relative;left:25px;top:10px;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">小白教程xiaobai.wang</font></font></div> <div style="color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:20px;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">颜色, </font></font><span style="background-color:#B4009E;color:#ffffff;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 盒子</font></font></span></div> </div> </div> </html> == 什么是 CSS? == 使用 CSS,可以控制颜色、字体、文本大小、元素之间的间距、元素的位置和布局方式、要使用的背景图像或背景颜色、不同设备和屏幕尺寸的不同显示等等。 == 使用 CSS == CSS 可以通过 3 种方式添加到 HTML 中: * 内联- 通过使用HTML元素的style属性 * 内部- <nowiki>通过使用<head>中的<style>标签</nowiki> * 外部- <nowiki>通过使用<link> 链接到外部 CSS 文件</nowiki>, 最常见的方式,推荐使用。 == 内联 CSS == * 内联 CSS 用于将独特的样式应用于单个 HTML 元素。 * 内联 CSS 使用style属性进行设置。 <nowiki>以下示例将元素的文本颜色设置<h1>为蓝色,将元素的文本颜色设置<p>为红色: </nowiki> <sample title="" desc="" hererun="s8"> <h1 style="color:blue;">蓝色标题</h1> <p style="color:red;">红色文本</p> </sample> == 内部 CSS == * 内部 CSS 用于定义单个 HTML 页面的样式。 * 内部 CSS 定义在<nowiki><head>的<style>元素内。</nowiki> <nowiki>以下示例将所有<h1>元素(在该页面上)的文本颜色设置为蓝色,并将所有<p>元素的文本颜色设置为红色。此外,页面将显示为“粉蓝色”背景色:</nowiki> <sample title="" desc="" hererun="s8"> <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>标题</h1> <p>文本</p> </body> </html> </sample> == 外部 CSS 文件 == 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。 外部CSS文件通过link进行添加。 <sample title="" desc="" hererun="s3"> <!DOCTYPE html> <html> <head> <link href="styles.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>标题</h1> <p>段落</p> </body> </html> </sample> 外部样式表可以用任何文本编辑器编写。该文件不得包含任何 HTML 代码,并且必须以 .css 扩展名保存。 <sample title="style.css" desc="" > body { background-color: powderblue; } h1 { color: blue; } p { color: red; } </sample> <blockquote> 提示:使用外部样式表,可以通过更改一个文件来更改整个网站的外观! </blockquote> == CSS 例子 == * CSS color 属性定义要使用的文本颜色。 * CSS font-family 属性定义要使用的字体。 * CSS font-size 属性定义要使用的文本大小。 * CSS border 属性定义 HTML 元素周围的边框。 * CSS padding 属性定义文本和边框之间的填充。 * CSS margin 属性定义了边框外的边距。 <sample title="" desc="" hererun="s"> <!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; border: 2px solid powderblue; padding: 30px; margin: 50px; background:#ccc; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> </sample>
返回至“
HTML CSS样式
”。
上一节:
HTML_HSL_和_HSLA_颜色
下一节:
HTML链接