CSS样式

怼烎@ 2022-06-12 11:15 338阅读 0赞

一、内部样式表  
  
1、选择器：  
  
<html>  
  <head>  
    <title>内部样式表</title>  
    <style type="text/css">  
      body\{                //body是选择器  
    background-color:red;      
      \}  
      table\{  
    text\_align:center        //table是选择器  
      \}  
      h1\{                //h1是选择器  
    color:red  
      \}  
      p\{                //p是选择器  
        text-decoration:underline;      
      \}  
    </style>  
  </head>  
</html>  
<html>  
  <head>  
    <title>内部样式表</title>  
    <style type="text/css">  
      body\{  
    background:red url(http://www.baidu.com) no-repeat    //分别表示颜色、背景图片、背景图片是否重复。他们之间用空格 区分  
      \}  
    </style>  
  </head>  
</html>  
  
2、伪类：  
<html>  
  <head>  
    <title>内部样式表</title>  
    <style type="text/css">  
      /\*\*  
    link:    从未访问过的连接  
    visited: 已经访问过的链接  
    active:  得到焦点的连接  
    hover:   鼠标悬停时  
      \*/  
      a:link\{  
    color:red;  
    font-size:400px;  
      \}  
    </style>  
  </head>  
</html>  
  
二、外部样式表  
1.在style目录下定义一个style.css文件，内容：  
    body\{  
      background-color:red;  
    \}  
2.在html文件里引用上面的样式：  
    <html>  
      <head>  
        <title>引用外部样式</title>  
        <link rel="stylesheet" type+"text/css" ref="style/style.css"/>  
      </head>  
    </html>  
  
三、还有ID选择器和类别选择器