css 2.0版

复习

概念：

1.CSS：cascade style sheet 层叠样式表
2.都是w3c发布

css与页面的结合方式：

1.style属性
2.style标签
3.link引入

css的选择器

1.标签选择器 标签名称
2.ID选择器 #ID（）
3.CLASS选择器 .CLASSName（）
4.选择器分组 选择器1，选择器2……（）
5.伪类选择器 link visited hover active

语法：

• 注释：/* */
• 语法：选择器{
  属性键：属性值；
  属性键：属性值1 属性值2 ……
  }

常见属性

• 字体属性：
• 背景系列：
• 尺寸系列：width height
• 边框系列：
• 编剧系列：
  内边距：padding
  外边距：margin

CSS

基本概念

CSS：cascade style sheet 层叠样式表

一、概念

决定页面的样式：

1. 配色
2. 布局

二、css与html的结合方式

1. style属性
2. style标签
3. link标签引入

三、css的选择器

1. 标签选择器
2. ID选择器
3. class选择器
4. 选择器分组
5. 伪类选择器

四、css的基本语法

选择器 {
属性键：属性值；
属性键：属性值1 属性值2 ……
}
注释：与java中多行注释相同 /注释/

五、css的常用属性

单位：(了解)

• 颜色单位：Color Units
  #RRGGBB rgb(R,G,B) Color Name
• 长度单位：Length Units
  em ex px(常用像素) pt(点) pc in cm mm
  单位换算：1in = 2.54cm = 25.4mm = 72pt = 6pc

属性

• color ==》字体颜色
• font-family ==》字体样式
• font-size==》字体大小
• font-style==》字体样式（斜体……）
• font-weight==》字体加粗
• font-variant==》异体字

/*
            font-size:100px;
            font-family:黑体;
            font-style:italic;
            font-weight:900;
            font-variant:small-caps;
            */
        /*font:font-style||font-variant||font-weight||font-size||line-height;*/
        font : italic small-caps 900 100px  黑体;/*这里的font是复合属性*/

背景

<style type = "text/css">
        body {
            /*
            background-color:pink;
            background-image:url("001.jpg");
            background-repeat:no-repeat;
            background-attachment:fixed;
            */
            /*background:background-color || background-repeat||background-attachment||background-position;*/
            background: green url("001.jpg") no-repeat fixed center;
        }
    </style>

六、盒子模型----解决页面的布局问题

• 万物皆盒子
  1.配色
  2.布局
  块级标签：占的是一行，可以嵌套块级标签
  行内标签：占行内的一部分，不能嵌套块级标签
  块级：div p ol
  行内：span font a
• div

<style type = "text/css">
        div{
            border-color:red;
            border-width:1px;
            border-style:solid;
        }
        #one {
            width:200px;
            height:300px;
            /*
            内边距：内边距会改变自身的宽高
            */
            padding-left:100px;
            
        }
        #two {
            width:100px;
            height:100px;
            /*
            外边距：
            margin-left:100px;
            */
        }
    </style>

也可以这样写

<style type = "text/css">
        div{
            /*
            border-color:red;
            border-width:1px;
            border-style:solid;
            */
            /*border: border-width || border-style || border-color;*/
            border:1px solid red;
            width:100px;
            height:100px;
        }
        #one {
        /*
            1个属性时：4个方向
            2个属性时：第一个决定上下，第2个决定左右
            3个属性时：上    左右        下
            4个属性时：上  右    下   左  （顺势针）
        */
            padding:10px 300px 50px 80px;   
        }
    </style>