2.CSS使用基础(1)

目录

一.css颜色的四种表示法

二.使用css 4种方式

三.css注释：

四.CSS Id 和 Class选择器

五.多重样式优先级顺序

六.CSS Backgrounds(背景)

七.CSS Text(文本)

八.CSS Fonts(字体)

一.css颜色的四种表示法：

1.使用英文单词

p {
    color: red;
}

2.使用十六进制的颜色值 #ff0000

p {
    color: #ff0000;
 }

3.为了节约字节，我们可以使用 CSS 的缩写形式： 

p {
 color: #f00;
 }

4.通过两种方法使用 RGB 值：

p {
    color: rgb(255,0,0);
 }
p {
     color: rgb(100%,0%,0%);
  }

二.使用css 4种方式（优先级：内联式 > 嵌入式 > 外联式）

不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题

1.内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

<h1 style="text-align:center;">Center-aligned heading</h1>

2.嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。

<!--在head 的style 标签里定义-->
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue;
}
</style>

3.外联式Linking（也叫外部样式）：将网页链接到外部样式表。(推荐使用link标签）

<!-- 使用link 标签 -->
<link rel="stylesheet" type="text/css" href="css/styles.css">

<!-- 使用import -->
<style type="text/css">
 @import url(css/mycss.css);
</style>

三.css注释：

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

四.CSS Id 和 Class选择器

1.ID属性和class属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

2.ID属性只能在每个 HTML 文档中出现一次。

3.class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

五.多重样式优先级顺序

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

1. 通用选择器（*）
2. 元素(类型)选择器
3. 类选择器
4. 属性选择器
5. 伪类
6. ID 选择器
7. 内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。

尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

• Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
• Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
• Never 永远不要在全站范围的 css 上使用 !important
• Never 永远不要在你的插件中使用 !important
  

  六.CSS Backgrounds(背景)

  CSS 背景属性用于定义HTML元素的背景。

  CSS 属性定义背景效果：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

  背景颜色

  background-color 属性定义了元素的背景颜色。

  body {
  
  background-color:#b0c4de;
  }

  提示：background-color 不能继承，其默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。

  背景图像

  background-image 属性描述了元素的背景图像.

  默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

  页面背景图片设置实例:

• body {
      background-image:url('paper.gif');
  }

  背景图像 - 水平或垂直平铺

  如果需要在HTML页面上对背景图像进行平铺，可以使用 background-repeat 属性。

  默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

• body
  {
  background-image:url('gradient2.png');
  background-repeat:repeat-x;
  }

  景图像- 设置定位与不平铺

• body
  {
  background-image:url('img_tree.png');
  background-repeat:no-repeat;
  }

  为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

  可以利用 background-position 属性改变图像在背景中的位置:

  body
  {
  background-image:url('img_tree.png');
  background-repeat:no-repeat;
  background-position:right top;
  }

  提示：为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如 100px 或 5cm；最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

  关键字

  图像放置关键字最容易理解的作用就像其名字的意义。例如，top left 使图像放置在元素内边距区的左上角。

  只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。

  如果只有一个关键字，则会默认另一个关键字为 center。

  所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

  p
   {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
   background-position:top;
   }  

  单一关键字	等价的关键字
  center	center center
  top	top center 或 center top
  bottom	bottom center 或 center bottom
  right	right center 或 center right
  left	left center 或 center left

  百分数值

  百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，你可以按照下面的代码进行设置：

  body
    {
     background-image:url('img_tree.png');
     background-repeat:no-repeat;
    background-position:50% 50%;
    }

  长度值

  长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。

  比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

  body
    {
     background-image:url('img_tree.png');
     background-repeat:no-repeat;
    background-position:50px 100px;
    }

  注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

  CSS background-attachment 属性

  定义和用法

  background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

  背景- 简写属性

  在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

  为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

  背景颜色的简写属性为 "background":

  body {background:#ffffff url('img_tree.png') no-repeat right top;}

  当使用简写属性时，属性值的顺序为：:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

  以上属性无需全部使用，你可以按照页面的实际需要使用.

  CSS 背景属性

  Property	描述
  background	简写属性，作用是将背景属性设置在一个声明中。
  background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
  background-color	设置元素的背景颜色。
  background-image	把图像设置为背景。
  background-position	设置背景图像的起始位置。
  background-repeat	设置背景图像是否及如何重复。

  属性值

  值	说明
  scroll	背景图片随页面的其余部分滚动。这是默认
  fixed	背景图像是固定的
  inherit	指定background-attachment的设置应该从父元素继承
  local	背景图片随滚动元素滚动

  ---

七.CSS Text(文本)

所有CSS文本属性。

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

1.Text Color

body {color:blue;} 

值	描述
color_name	规定颜色值为颜色名称的颜色（比如 red）。
hex_number	规定颜色值为十六进制值的颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
inherit	规定应该从父元素继承颜色。

2.文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

3.文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

a {text-decoration:none;}

也可以这样装饰文字：

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

4.文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

 

 5.文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度。

p {text-indent:50px;}

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

6.文本间隔

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

p
{
word-spacing:30px;
}

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

7.指定字符之间的空间 

<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

8.指定行与行之间的空间  

p.small {line-height:70%;}
p.big {line-height:200%;}

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

9.指定文本的文字方向 

div.ex1 {direction:rtl;}

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

10.在元素内禁用文字环绕

p
{
white-space:nowrap;
}

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

11.垂直对齐图像 

img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

12.添加文本阴影 

h1 {text-shadow:2px 2px #FF0000;}

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

13.设置或返回文本是否被重写 

unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语

div
{
direction:rtl;
unicode-bidi:bidi-override;
}

值	描述	测试
normal	默认。不使用附加的嵌入层面。	测试 »
embed	创建一个附加的嵌入层面。	测试 »
bidi-override	创建一个附加的嵌入层面。重新排序取决于 direction 属性。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

八.CSS Fonts(字体)

serif和sans-serif字体之间的区别

在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读

在CSS中，有两种类型的字体系列名称：

• 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）

• 特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）

  Generic family	字体系列	说明
  Serif	Times New Roman  Georgia	Serif字体中字符在行的末端拥有额外的装饰
  Sans-serif	Arial  Verdana	"Sans"是指无 - 这些字体在末端没有额外的装饰
  Monospace	Courier New  Lucida Console	所有的等宽字符具有相同的宽度

   除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体
    

    1）font-family 属性设置文本的字体系列。

    font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

    注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

    多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

值	描述
family-name generic-family	用于某个元素的字体族名称或/及类族名称的一个优先表。 默认值：取决于浏览器。
inherit	规定应该从父元素继承字体系列。

2）字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

• 正常 - 正常显示文本

• 斜体 - 以斜体字显示的文字

• 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

 

 

实例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

italic 和 oblique 的区别

• 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
• 倾斜（oblique）文本是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

3）字体大小

font-size 属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：

字体大小的值可以是绝对或相对的大小。

绝对大小：

• 设置一个指定大小的文本

• 不允许用户在所有浏览器中改变文本大小

• 确定了输出的物理尺寸时绝对大小很有用

相对大小：

• 相对于周围的元素来设置大小

• 允许用户在浏览器中改变文字大小

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 30px，那么公式需改为：pixels/30=em）

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

4）小型大写字母（font-variant）

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

5）字体的粗细

p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:;}

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

6）在一个声明中设置所有的字体属性（font）

p.ex1
{
font:15px arial,sans-serif;
}

p.ex2
{
font:italic bold 12px/30px Georgia, serif;

属性定义及使用说明

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

注意： line - height属性设置行与行之间的空间。

值	描述
font-style	规定字体样式。参阅：font-style 中可能的值。
font-variant	规定字体异体。参阅：font-variant 中可能的值。
font-weight	规定字体粗细。参阅：font-weight 中可能的值。
font-size/line-height	规定字体尺寸和行高。参阅：font-size 和 line-height 中可能的值。
font-family	规定字体系列。参阅：font-family 中可能的值。
caption	定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon	定义被图标标记使用的字体。
menu	定义被下拉列表使用的字体。
message-box	定义被对话框使用的字体。
small-caption	caption 字体的小型版本。
status-bar	定义被窗口状态栏使用的字体。