CSS学习01

• CSS简介
• • CSS:cascading style sheets层叠样式表
  • 主要目的：是给HTML标记天界各种各样的表现（格式、样式），比如：文本样式、背景、文本样式、链接样式。
  • 提示：CSS是给HTML标记加的样式；JS是给HTML标记加的行为。HTML标记是最先出现的。
  • • HTML超文本标注语言：各种HTML标记。
    • CSS层叠样式表：给HTML标记加的样式。
    • JavaScript脚本程序：给HTML标记加的程序。
  • 举例：

    h3{
           color:red;
           font-size:3em;
           border:1px solid blue;
           background-color:yellow;
           text-align:center;
          }

    h3{
           color:red;
           font-size:3em;
           border:1px solid blue;
           background-color:yellow;
           text-align:center;
          }

• CSS语法格式

• • h1{color:red;font-size:14px}

  • 
    
    
    
  • 一个CSS规则由“选择器”和“格式声明语句”构成。
  • “选择器”：就是选择HTML标记，换句话说：就是给哪个HTML标记加样式。
  • “格式声明语句”：由{}构成，{}是各种格式语句。
  • 一条格式语句，由“属性名:属性值”构成。
  • 每一条格式语句，必须用英文下的分号“；”结束。
  • 属性名：就是CSS中的各种属性，这些属性名都是固定的。
  • 属性值：一个属性名可以取不同的值，这个值不加""。
  • CSS中的数字单位都是px，这个px不能省略。
• CSS选择器
• • 基本选择器
  • • "*"选择器：通配符
    • • 描述：将匹配所有的HTML标记。
      • 语法：*{color:red;}
      • 注意："*"尽量少用，因为IE6不支持
    • 标签选择器
    • • 描述：将匹配指定的HTML标记。
      • 语法：h1{color:red}  
      • 注意：CSS标签选择器，与HTML标记的名称一样，但不能加< >
    • class选择器（类选择器）——类选择器是使用频率最高的选择器
    • • 描述：给一类HTML标记加样式，这里所指的"一类"是：每个HTML标记都有一个class属性，且class的值一样。class是公共属性，每个HTML标记都有。
      • 类选择器的名称：必须以"."开头，后跟HTML标记的class属性的值，如：.box{color:red}
      • HTML标记的class属性的值，不能以数字开头。

        .myclass{
                color:green;
                background-color:red;
              }

•  < h1 class="myclass" >试试看看的标题</h1>
  

• id选择器
• • 描述：给指定id的元素添加样式。
  • 注意：网页HTML标记的id属性的值，必须是唯一的。
  • 每一个HTML标记都有一个id的公共属性。
  • 注意：id属性一般是给JS使用的，不让用来加样式的。class属性只能给CSS用，不能给JS用。
  • id选择器的名称：必须以"#"开头，后跟HTML标记的id属性的值。

  • #myid{
       color:blue;
       background-color:grey;
     }

  • <p id="myid" >  </p>

• 组合选择器
• • 多元素选择器
  • • 描述：给多个元素加同一个样式,多个选择器之间用逗号","隔开
    • 举例：h1,p,div,body{color:red}
  • 后代元素选择器（最常用）

• 描述：给某个标签的某一个后代元素加样式。选择器之间用"空格"隔开。
• 举例：

  div .title{color:red}
  

  div h1.title{
      background-color:red;
      }
  
  div p.title{
      color:blue;
      background-color:#c9c9c9;
      }

  
  
•  <h1 class="title">试试看看的标题</h1>

               <p class="title"> Linux、Java是自己动手做菜</p>

• • 子元素选择器
  • • 描述：给某个元素的子元素增加样式。
    • 举例：div > h1.title{color:title}
    • 
• CSS注释
• • CSS注释：/**/
  • HTML注释：< !--HTML注释-- >
• CSS尺寸属性
• • width：元素宽度，一定要加px单位。
  • height：元素高度。
• CSS字体属性
• • font-size：文字大小。如：font-size:14px;
  • font-family：字体，如：font-family:微软雅黑;
  • font-style：斜体，取值：italic。如：font-style:italic;
  • font-weight：粗体，取值：bold。如：font-weight:bold;
• CSS文本属性
• • color：文本颜色
  • text-decoration：文本修饰线，取值：none、overline、underline、line-through
  • text-align：文本水平对齐方式，取值：left、center、right
  • line-height：行高，可以用固定值，也可以用百分比。如：line-height:24px;line-height:150%;
  • text-indent：首行缩进。如：text-indent:28px;
  • letter-spacing：字间距

 

• CSS伪类选择器：给超链接加的样式（链接的不同状态加样式）
• • 一个超链接，有四个状态：
  • • 正常状态（:link）：鼠标没放上之前，链接的样式。
    • 放上状态(:hover)：鼠标放到链接上时的样式。
    • 激活状态(:active)：按住鼠标左键不松开的样式，这个状态十分短暂。
    • 访问过的状态(:visited)：按下鼠标左键，并弹起，这时的样式效果。
  • 在日常工作中，会使用以下写法，来给链接加不同的样式：

• a:link ,a:visited{color:gray;text-decoration:none;}  /*将"正常状态"和"访问过的在状态"合二为一*/

• a:hover{color:red;text-decoration:underline;}  /"鼠标放上"单做一种效果*/

  例如：

• .link1 a:link,.link1 a:visited{
                color:#FF0080;
                text-decoration:none;
               } 
  

• .link1a:hover{
                color:gray;
                text-decoration:underline;
                }

  
  
  

•