CSS概述

HTML是用来编写网页的骨架

CSS是用来美化网页

javaScript语言是用来为网页添加交互的效果

web的 衰落：

     在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。随着万维网的出现（用户交互体验的加强），对html的要求越来越大，人们迫切需要html增加新的元素，去完成一个特定的功能。

一片混乱：

     迫于压力，html开始出现<font>，<i> ,<s> 等标签。但是html是一种描述结构的语言，也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题：1：由于html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性。2：页面维护越来越困难

当html中存斥着的表现标记问题，W3c并没有忽视。在1995年，w3c开始发布一种正在进行的计划（work-in-prrgress） 称之为css。

     与html相比，Css支持更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框；允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本。

什么是CSS？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)

Css是用来美化html标签的，给页面添加好看的样式也就是外观

CSS和HTML和JavaScript的关系

HTML 结构层负责从语义的角度搭建页面结构CSS 样式层 负责从 审美的角度美化页JavaScript 行为层负责从交互的角度提升用户体验

 CSS的基本语法

选择器{属性:值;属性:值;…….}

属性	解释
Width:20px;	宽
Height:20px;	高
Background-color:red;	背景颜色
font-size:24px;	文字大小
text-align:left | center| right	内容的水平对齐方式
text-indent:2em;	首行缩进
Color:red;	文字颜色

 

注意：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用英文输入法下的分号;隔开。

 

选择器

选择器：实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

基础选择器

1. 标签选择器

2. 类选择器(重点)

3. ID选择器

4. 通配符选择器

 

标签选择器

标签{属性：值;}

作用：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。

通过标签选择器：          改变div标签内字体的颜色和大小          * */         div{             font-size:50px;             color: deeppink;             background-color: yellow;             width:200;             height:100;         }

颜色的显示方式：

1.     直接写颜色的名称

2.     十六进制显示颜色

3.     rgb(120,120,120);

4.     agba(120,120,120,x)了解

a)      x颜色的透明度 0-1

 

类选择器(重点)

         写法 .类名{

属性：值;

属性：值;      

}

类名：自定义的

 

类选择器命名规范：

1.     不能用纯数字或者数字开头来定义类名

2.     不能使用特殊符号或者开头或者(_)定义类名

3.     不建议使用汉字来定义类名

4.     不推荐使用属性或者属性值来定义类名

a)      header logo main hot

b)       

 ID选择器

语法：

         #自定义名称 {

                  属性：值;

                  属性：值;

}

注意事项：在一个 HTML文档中，ID 选择器会使用一次，而且仅一次。

一个标签可以同时调用类选择和ID选择器

通配符选择器(了解)

*{属性：值}

特点：给所有的标签都使用相同的样式。

不推荐使用，增加浏览器和服务器压力。

复合选择器

概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。

交集选择器

语法： 标签+类（ID）选择器名称{

                  属性:值;

                  属性:值;

}

特点：即要满足选择了标签还要满足选择类(ID)选择器。

后代选择器(重点)

语法：选择器+空格+选择器+选择器{

                  属性:值;

属性:值;

}

 

后代：意思就是标签必须有父子关系，也就是嵌套关系。

后代的子元素：无限制各代的。    

 子代选择器

语法 选择器>选择器{

                  属性:值;