网站推广策划评估工具7,重庆云诚度网站建设,个人博客网站,wordpress 原创 转载CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
一、实例
1、HTML使用样式
本例演示如何使用添加到 head 部分的样式信息对 HTML 进行格式化。 !DOCTYPE html
htmlheadmeta charsetutf-8titleHTM…CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
一、实例
1、HTML使用样式
本例演示如何使用添加到 head 部分的样式信息对 HTML 进行格式化。 !DOCTYPE html
htmlheadmeta charsetutf-8titleHTML使用样式/titlestyle typetext/cssh1 {color: red;}p {color: blue;}/style
/headbodyh1这是一个标题/h1p这是一个段落。/p
/body/html 运行结果 2、本例演示如何使用样式属性做一个没有下划线的链接。 如何使用 style 属性制作一个没有下划线的链接。 !DOCTYPE html
htmlheadmeta charsetutf-8title做一个没有下划线的链接/title
/headbodya hrefhttp://www.baidu.com/ styletext-decoration:none;访问 baidu.com!/a/body/html 运行结果 3、链接到一个外部样式表
本例演示如何 标签链接到一个外部样式表。
!DOCTYPE html
htmlheadmeta charsetutf-8title链接到一个外部样式表/titlelink relstylesheet typetext/css hrefstyles.css
/headbodyh1我使用了外部样式文件来格式化文本 /h1p我也是!/p
/body/html
运行结果 二、如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用style 属性内部样式表 -在HTML文档头部 head 区域使用style 元素 来包含CSS外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件。
三、内联样式
当特殊的样式需要应用到个别元素时就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
p stylecolor:blue;margin-left:20px;这是一个段落。/p
四、HTML样式实例 - 背景颜色
背景色属性background-color定义一个元素的背景颜色
body stylebackground-color:yellow;
h2 stylebackground-color:red;这是一个标题/h2
p stylebackground-color:green;这是一个段落。/p
/body
!DOCTYPE html
htmlheadmeta charsetutf-8title背景颜色/title
/headbody stylebackground-color:yellow;h2 stylebackground-color:red;这是一个标题/h2p stylebackground-color:green;这是一个段落。/p
/body/html
运行结果 五、HTML 样式实例 - 字体, 字体颜色 字体大小
我们可以使用font-family字体color颜色和font-size字体大小属性来定义字体的样式:
h1 stylefont-family:verdana;一个标题/h1
p stylefont-family:arial;color:red;font-size:20px;一个段落。/p
!DOCTYPE html
htmlheadmeta charsetutf-8titleHTML 样式实例 - 字体, 字体颜色 字体大小/title
/headbodyh1 stylefont-family:verdana;一个标题/h1p stylefont-family:arial;color:red;font-size:20px;一个段落。/p
/body/html
运行结果 六、HTML 样式实例 - 文本对齐方式
使用 text-align文字对齐属性指定文本的水平与垂直对齐方式
h1 styletext-align:center;居中对齐的标题/h1
p这是一个段落。/p
!DOCTYPE html
htmlheadmeta charsetutf-8titleHTML 样式实例 - 文本对齐方式/title
/headbodyh1 styletext-align:center;居中对齐的标题/h1p这是一个段落。/p/body/html
运行结果 七、内部样式表
当单个文件需要特别样式时就可以使用内部样式表。你可以在head 部分通过 style标签定义内部样式表:
headstyle typetext/cssbody {background-color:yellow;}p {color:blue;}/style
/head
八、外部样式表
当样式需要被应用到很多页面的时候外部样式表将是理想的选择。使用外部样式表你就可以通过更改一个文件来改变整个站点的外观。
headlink relstylesheet typetext/css hrefmystyle.css
/head
九、HTML 样式标签
