[关闭]
@linux1s1s 2017-07-13T11:37:26.000000Z 字数 2988 阅读 1487

Base Time-CSS

Base H5 2017-01


什么是CSS

Cascading Style Sheets 简称:CSS 中文:CSS 指层叠样式表

语法

此处输入图片的描述

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

CSS实例

请参考W3School CSS实例

栗子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <style>
  7. p
  8. {
  9. color:red;
  10. text-align:center;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <p>Hello World!</p>
  16. <p>这个段落采用CSS样式化。</p>
  17. </body>
  18. </html>

此处输入图片的描述

id 和 class 选择器

如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <style>
  7. #para1
  8. {
  9. text-align:center;
  10. color:red;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <p id="para1">Hello World!</p>
  16. <p>这个段落不受该样式的影响。</p>
  17. </body>
  18. </html>

这里仅仅对id为para1的字段做了CSS样式处理

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <style>
  7. .center
  8. {
  9. text-align:center;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h1 class="center">标题居中</h1>
  15. <p class="center">段落居中。</p>
  16. </body>
  17. </html>

如何创建CSS

外部样式表

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

内部样式表

  1. <head>
  2. <style>
  3. hr {color:sienna;}
  4. p {margin-left:20px;}
  5. body {background-image:url("images/back40.gif");}
  6. </style>
  7. </head>

内联样式

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

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表(位于 <head> 标签内部)
4. 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

CSS背景属性

此处输入图片的描述

栗子:

  1. body
  2. {
  3. background-image:url('img_tree.png');
  4. background-repeat:no-repeat;
  5. background-position:right top;
  6. }

CSS文本属性

此处输入图片的描述

栗子:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <style>
  7. h1 {text-align:center;}
  8. p.date {text-align:right;}
  9. p.main {text-align:justify;}
  10. </style>
  11. </head>
  12. <body>
  13. <h1>CSS text-align 实例</h1>
  14. <p class="date">2015 年 3 月 14 号</p>
  15. <p class="main">“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”</p>
  16. <p><b>注意:</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
  17. </body>
  18. </html>

CSS字体属性

此处输入图片的描述

栗子:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <style>
  7. p.normal {font-style:normal;}
  8. p.italic {font-style:italic;}
  9. p.oblique {font-style:oblique;}
  10. </style>
  11. </head>
  12. <body>
  13. <p class="normal">这是一个段落,正常。</p>
  14. <p class="italic">这是一个段落,斜体。</p>
  15. <p class="oblique">这是一个段落,斜体。</p>
  16. </body>
  17. </html>

CSS链接

栗子:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <style>
  7. a:link {color:#FF0000;} /* 未访问链接*/
  8. a:visited {color:#00FF00;} /* 已访问链接 */
  9. a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
  10. a:active {color:#0000FF;} /* 鼠标点击时 */
  11. </style>
  12. </head>
  13. <body>
  14. <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
  15. <p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
  16. <p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
  17. </body>
  18. </html>

CSS 盒子

此处输入图片的描述

最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

关于CSS可以进一步学习CSS 实例,余下的部分不再展开。

参考:

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注