HTML样式- CSS

布满荆棘的人生 2022-06-02 01:29 249阅读 0赞

http://[blog.csdn.net/pipisorry/article/details/78929649][blog.csdn.net_pipisorry_article_details_78929649]

# CSS简介    #

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的。

CSS 可以通过以下方式添加到HTML中:

*  内联样式- 在HTML元素中使用"style" 属性
 *  内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
 *  外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件。

### 已弃用的标签和属性 ###

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.

# 内联样式：style标签 #

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

### 段落的颜色和左外边距 ###

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

### 背景颜色 ###

背景色属性（background-color）定义一个元素的背景颜色：

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

< h2  style = " background-color:red; " > 这是一个标题 </ h2 >

< p  style = " background-color:green; " > 这是一个段落。 </ p >

</ body >

早期背景色属性（background-color）是使用 bgcolor 属性定义。

### 字体, 字体颜色 ，字体大小，字体粗细 ###

现在通常使用font-family（字体），color（颜色），font-size（字体大小）和font-weight（字体粗细）属性来定义文本样式，而不是使用<font>标签（已弃用）。

< p  style = " font-family:arial;color:red;font-size:20px; " > 一个段落。 </ p >

font-size属性

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

font-weight属性

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

### HTML 样式实例 - 文本对齐方式 ###

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

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

文本对齐属性 text-align取代了旧标签 <center> 。

### 边距 ###

margin

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>浏览器计算外边距。</td> 
  </tr> 
  <tr> 
   <td><em>length</em></td> 
   <td>规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。</td> 
  </tr> 
  <tr> 
   <td><em>%</em></td> 
   <td>规定基于父元素的宽度的百分比的外边距。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承外边距。</td> 
  </tr> 
 </tbody> 
</table>

设置 p 元素的 4 个外边距（上右下左）：

p
      {
      margin:2cm 4cm 3cm 4cm;
      }

不写全默认为0，但是如果只设置一个则4个边距都是设置的那个值。

还有margin-left, margin-right, margin-top, margin-bottom。

\[[细说 CSS margin][CSS margin]\]

\[[深入理解css中的margin属性][css_margin]\]

[某小皮][Link 1]

# 内部样式表：<head> #

当单个文件需要特别样式时，就可以使用内部样式表。

你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>  
<style type="text/css">  
body \{background-color:yellow;\}  
p \{color:blue;\}  
</style>  
</head>

使用添加到 <head> 部分的样式信息对 HTML 进行格式化示例

<!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    h1 {color:red;}
    p {color:blue;}
    </style>
    </head>
    
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    
    </html>

![Center][]

### 引用外部字体 ###

<head>  
    <title>Home</title>  
...  
    <style type="text/css">  
    @font-face\{    
        font-family: COLONNA;    
        src:url(./fonts/COLONNA.TTF);    \}  
    </style>  
\}

</head>

Note: 注意字体相对路径！注意字体文件后缀名TTF和ttf是大小写敏感的！注意很多英文字体在中文下是不起作用的！有的字体在linux下不起作用，如华康娃娃体，可以尝试其它字体！

html中引用

<span style="font-family: BRUSHSCI" >ABCDEFG</span>

[某小皮][Link 1]

# 外部样式表 #

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

链接到一个外部样式表

<!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    
    <body>
    <h1>I am formatted with an external style sheet</h1>
    <p>Me too!</p>
    </body>
    
    </html>

![Center 1][]

外部CSS的一个实例 aaa.css，其中定义了body, h1, p标签的表现形式

body  
\{  
    background-color:\#d0e4fe;  
\}  
h1  
\{  
    color:orange;  
    text-align:center;  
\}  
p  
\{  
    font-family:"Times New Roman";  
    font-size:20px;  
\}

### 引用外部字体 ###

css文件中直接加入

@font-face\{    
    font-family: COLONNA;    
    src:url(../fonts/COLONNA.TTF);  
\}

Note: 注意字体相对路径；注意字体文件后缀名TTF和ttf是大小写敏感的！

from: [http://blog.csdn.net/pipisorry/article/details/78929649][blog.csdn.net_pipisorry_article_details_78929649]

ref: \[更多样式， [ CSS 教程][CSS]\]

[blog.csdn.net_pipisorry_article_details_78929649]: http://blog.csdn.net/pipisorry/article/details/78929649
[CSS margin]: https://blog.coding.net/blog/css-margin
[css_margin]: http://www.cnblogs.com/zhuzhenwei918/p/6124263.html
[Link 1]: http://my.csdn.net/
[Center]: /images/20220602/bc5b565ef0e94859aede73ead461769d.png
[Center 1]: /images/20220602/5a5dbadcf75145adbaa9d49d0e940e71.png
[CSS]: http://www.runoob.com/css/