【3】CSS简单样式

CSS发展史

1996年12月 css第一版诞生。
1998年5月 css2正式发布
2004年 css2.1发布
Css3的发布……。不是一个时间而是一个时间段

css3模块介绍

css2中在 css1基础上添加了高级功能
浮动和定位、高级选择器（子选择器、相邻选择器、通用选择器）

css3遵循的是模块化开发。发布时间并不是一个时间点，而是一个时间段。

css简介

CSS的基本概念
CSS是层叠样式表(Cascading Style Sheet)

CSS的作用

用于控制网页的外观，修饰和美化html标签的,实现了结构和形式的分离。

使用CSS+DIV的优点
采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优
1：表现和内容相分离
2：提高页面浏览速度
3：易于维护和改版

样式表的定义方式

Css样式定义在样式表中
样式的定义方式
选择器{样式1：样式值1；样式2：样式值2；……}

样式表的分类

1、行内样式表
在html标记内，使用style属性定义css样式。
如：

<p style=”color:#00ffdc;”></p> 

2、内嵌式样式表将css添加到与之间，并用

<style></style>标记声明的一种样式。
　　语法如下：
<style>
　　/*这里写css内容*/
</style>

3、外部定义css样式表，通过

<link href="style.css"  rel="stylesheet" type="text/css" /> 

4、在外部定义css样式表，通过导入方式链接到页面中的一种样式。

语法：

<style>
　　     @import url();
 </style>

样式表的优先级
就近原则

CSS选择器

1：基本选择器

Css选择器
全局选择器
设置所有标签使用同一样式，用*来表示
全局选择器语法:*{ }
标签选择器
标签选择器的语法：p{}

类选择器
类选择器：用来为一系列标签定义相同的样式
类选择器的语法: .classname{}

    先定义
    .blue{color:#00000ff;}
    然后再引用
    

一站式建店

ID选择器
ID选择器的语法:#idname{}

先定义 
#green{color:#0000ff;}

再引用样式

一站式建店

用法和class类似，但要注意同一id名在同一个页面中只能出现一次

选择器的优先级及权重

 行内>id>class>element>*
权重：
行内/1000
id/100,
class/10, 
element/1,
*/0

基本样式

基础样式属性
Color：颜色；规定颜色值为颜色单词名称例如（red）或者十六进制值得颜色例如（#ff0000）或者为rgb值得颜色例如（rgb(255,0,0)）；

Width:宽度；设置元素的宽度值，值为数字；单位为px（像素)、em（字符）、%（百分比）；默认值为auto（自动，通过浏览器自动计算出宽度值单位为像素）

Height：高度；设置元素的高度值，值为数字；单位为px（像素)、em（字符）、%（百分比）；默认值为auto（自动，通过浏览器自动计算出宽度值单位为像素）

Background-color:背景颜色；规定颜色值为颜色单词名称例如（red）或者十六进制值得颜色例如（#ff0000）或者为rgb值得颜色例如（rgb(255,0,0)）；

Inherit：属性值，大部分属性都有该属性值意义为继承。

颜色值的表示法

单词表示法  Red green blue yellow pink orange…

十六进制表示法
#ff0000 #00ff00 #0000ff #000000  #ffffff 
#f00 #0f0  #00f  #000 #fff

Rgb表示法     (255,0,0)
Rgba表示法     (255,255,0,0.3)

note3

html:结构
css:修饰和美化HTML标签->表现
    历史：96年css第一个版本。easy decorate change color size 补白、基本选择器
    2000年网吧火  


css3新特性：
    css层叠样式表
css作用：用于控制网页的外观， 修饰美化htmlb标签，实现了结构和形似的分离

css优点：【表现和内容想分离|提高页面浏览速度|易于维护和改版】

    1:css的使用
        css定义方法：
        【1】css应写CSS样式表里
        【2】css样式应该怎么写
            语法：  选择器{ 样式1：样式值;样式2：样式值2;....}

    【样式表】：/he
        【1】：行内样式表
 
                 【缺点】
                       只能给当前的标签定义样式，不能给所有相同标签设置
                    结构样式未分离
                 【优点】   
                    级别最高
        【2】：内部样式表（内嵌式样式表）
                【缺点】
                     结构与样式未分离
                【优点】 
                    可以定义同一样式
        【3】:外部样式表
            1:链接式样式表(常用 最多用)   
                【优点】
                    实现结构样式的分离
                    维护方便
            2:导入时样式表(几乎不用)

    【样式表的优先级】：
        行内演示表：就近原则（行内）最高  外部和内部与顺序有关


    【选择器】：
        基本选择器
            《1》【全局选择器】：*{样式1：样式值;样式2:样式值2;...}
                【*】标示页面所有标签
                特点：页面当中所有标签都具有相同样式  
            《2》【标签选择器】：
                p{样式1：样式值;样式2:样式值2;...}
                /**/css注释
                优缺点：
                    相同 标签具有统一样式
            《3》 问题：相同标签有统一样式 | 不同的标签有统一样式
                【类别选择器】
                    选定义后使用
                        定义：.classname{样式1：样式值;样式2:样式值2;...}
                        使用：
 
                    特点：
                        定义一次可以多次使用
            《4》【id选择器】
                先定义后使用
                    定义; #idname{样式1：样式值;样式2:样式值2;...}
                    使用：
 

                    特点：相同的ID名称，在一个页面中只能出现一次（id唯一）

            问题：
                一个标签可以引入多个类别选择器  怎样引入?
                        并列引入， 以最早引入的为主 
                        class="a b" 一般引入两个  中间加入空格

                一个标签可不可以同时引入类别选择器和ID选择器？
                        可以同时，单被覆盖，以ID选择器为主 
                四种选择器的优先级？
                        #>.>eliement>*
            选择器的优先级:
                行内样式表>id>.class>element(元素)>*
            【权重】  1000     100   10     1        0  

            text-decoration:underline;  

            【颜色标示法】
                单词表示方法：
                    red green blue yellow pink purple white black orange gray
                十六进制颜色表示方法：（0-9）(a-f)   0最小 f 最大
                    #ff0000红色  #00ff00绿色 #0000ff蓝色  #ffff00黄色
                    #000000黑色 #ffffff白色 #ddddddd灰色
                    #f00
                RGB标示方法(0.255)
                    background-color:rgb(255,0,0);  红色
                    background-color:rgb(120,120,120); 灰色
                rgba表示法(rgb 红绿蓝 a标示透明度0-1之间值  0.3|0.4  0==表示完全透明 1==不透明)

                    background-color:rgba(255,0,0,0.1);  红色
                    background-color:rgba(120,120,120,1); 灰色
                    opacity:0.5也可以设置透明度，但是影响文字
            【宽|高的表示法】
                    witdth:500px（固定单位）;  width="50%"(流体)；  width:em/rem（相对单位）
                    em:相对于父类元素进行改变
                    rem:相对根元素进行改变;

        基本样式：
            color:
            background-color:
            widht|height
写在标签里面的东西叫：标签属性
 标签属性="标签属性值"
            h3{
                color:red;  css属性：css属性值

            }

            能用CSS属性设置的不要再用标签属性了
                    text-align:center;
            层叠 ：样式表 多个页面可以引用  一个css属性可以多个标签使用   

          引用多个class选择器时，用空格隔开
          当class发生冲突时，以最后出现的class选择器样式为主

不同浏览器会在最外面设置空白边距，可以用margin:0 | padiing:0进行消除
 *{
    margin:0;
    padding:0;
    margin-top:0px;
    margin-left:0px;
    margin:10px 0px 0px 10px;(上右下左|顺时针)
}

/*灰色滤镜 自行设置可见效果*/
img{
    filter:gray;
}