大前端

前端学习之家-大前端

什么是CSS,CSS的使用

一、css:

1.基本选择器

2.高级扩展选择器

3.能够使用常用的css属性

4.能够使用盒子模型的属性去调整网页(万能)

5,完成一个网页的注册。(登入首页)

二、什么是css:

2.1概念:

层叠样式表:Cascade Style Sheet

2.2作用:美化网页

规范

说明

大括号外面的单词或符号

选择器,选中要操作的元素或者标签

大括号

每组样式开始和结束

样式名

如:text-align是固定样式名,不能自己命名

冒号

分隔样式名和样式值

样式值

每个样式名对应的样式值,也是固定的,不可以输入不存在的

分号

每一个样式一分号隔开

注释

和java相同

三、CSS在网页中的三种位置

目标:

           1.CSS的规则

            2.CSS的三种表现形式

三种样式的位置:

以后真实项目中,第三种是最佳选项

2.三种样式的优先级:

什么级:

           第一种>第三种>第二种

被覆盖的情况下:

           行内样式>外部样式>html中style标签样式(内部样式)

小结:

1.行内样式有什么特点:只对一个标签起作用,style作为标签的属性使用

2.内部样式有什么特点:对整个网页起作用,在head以style标签的格式出现

3.外部样式有什么特点:以CSS文件格式独立于html之外可以重用,对多个网页文件起作用(引用),外部样式最大的不同作用就是能够给代码实现解耦。

3.CSS基本选择器

选择器的作用:

在操作样式之前,用选择器元素(某个标签)

(3.1)标签选择器

语法:

标签名{

}

(3.2)类选择器:

1.先给标签进行分类,通过class属性

2.在通过类名进行选择

语法:

.类名{

}

(3.3)ID选择器:

1.给元素的属性加一个ID值

2.再通过ID选择元素,建议一个网页的ID要唯一

语法:             

 #id{

                           }

(3.4)通用选择器:选中整个网页的所有元素

              语法:               

*{
}

选择器分类

作用

语法

备注

标签选择器

通用标签名来选择元素

标签名{}

类名选择器

通过类名选择元素

.类名{}

前提:先使用class属性给元素进行分类

id选择器

通过id的值选择元素

#id{}

建议,在同一个网页中id必须是唯一

通用选择器

选中网页中的所有元素

*{}

4.CSS选择器的优先级

id选择器>类名选择器>标签选择器>通用选择器

5.Css扩展选择器:

层级选择器:在基本的选择器基础上,进行各种组合,形成更加的灵活选择方式

属性选择器:通过属性名选择元素

语法:

层级选择器:父选择器 子选择器{}

例子:ul li{}  ,ul lo{}, tr td{}

属性选择器:标签名[]{}

例:input[ typle]{}

扩展选择器

格式

作用

语法符号

层级选择器

父选择器 子选择器

选择某个选择器下面的子元素

空格

属性选择器

[属性名]

只要包含这个属性的标签都会被选中

标签名[属性]

指定一个标签选择器,这个标签还要包括式属性,属性值没有要求

标签名[属性名="属性值"]

 优先级:标签名[属性名="属性值"]>标签名[属性]>[属性名]

发表评论:

Copyright Your WebSite.Some Rights Reserved.