学习内容:CSS简单了解,CSS语法,CSS选择器
学习笔记
CSS作用:
CSS的主要使用场景是美化网页,布局页面的
CSS是层叠样式表的简称,也是一种标记语言
HTML主要做结构,显示元素内容
CSS美化HTML,布局页面
CSS最大价值:使样式和结构分离
CSS 语法
<style></style>样式标签在<head></head>标签里
CSS 规则主要由选择器和一条或多条声明组成:
h1(选择器) { color: red; (color为属性,red为属性值,二者和为声明)
font-size: 25px;
}
属性和属性值以键值对形式存在
选择器指向需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
实例
在此例中,所有 <p> 元素大小为25像素,并带有红色文本颜色:
p { color: red; font-size: 25px; }
CSS选择器(开发最常用):
CSS选择器作用,根据不同需求把不同的标签选出来(用来选择标签)
选择器分为基础选择器和复合选择器两大类
基础选择器是由单个选择器组成的;基础选择器包括标签选择器、类选择器、id选择器、通配符选择器
1、标签选择器:把某一类标签选择器全部选择出来,例如把所有<div>标签选择出来
优点:能快速为某一类同类标签统一设置样式
缺点:不能差异化设置,只能选择全部同类标签
实例:
类选择器:
差异化选择不同的标签,单独选一个或某几个标签
类选择器选择有特定 class 属性的 HTML 元素。
语法
.类名 {
属性1: 属性值1;
......
}
注意:1、这里的类名是我们自己取的
2、可以理解为给这个标签起了一个名字,来表示
3、长名字或词组可以用中横线来为选择器命名
4、不能使用纯数字、中文等命名,尽量使用英文字母来表示
5、命名要有意义,尽量让别人一眼就能知道这个类名的目的
结构需要用class属性来调用;如:
<div class="green">变绿色</div>
类选择器口诀:样式“点”定义,结构“类”调用
实例
在此例中第一个<div>字体变绿色,三个<p>字体都变粉色
类选择器应用:
类选择器-多类名
1、多类名使用
<div class=" red font20">多类名</div> (在class属性中写多个类名,各个类名用空格隔开)
多类名开发中使用场景:
(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里
(2)这些标签都可以调用共有的类然后再调用自己独有的类
(3)从而节省CSS代码,统一修改非常方便
id选择器(可以为特殊id的HTML元素指定特定的样式):
HTML以id属性来设置id选择器,CSS中id选择器以“#”来定义
语法:
#id名 {
属性1:属性值1;
......
}
调用:
id选择器和类选择器的区别:
1、类选择器好比人的名字,人的名字可以有多个,同一个名字也可以被多个人使用
2、id选择器好比人的身份证,全球是唯一的,不得重复
3、id选择器和类选择器最大的区别在于使用次数上
4、类选择器在修改样式中用的最多,id选择器一般用于网页唯一性的元素上,经常与JavaScript搭配使用
id选择器口诀:样式#定义,结构id调用 ,只能调用一次,别人切勿使用
通配符选择器:
通配符选择器用“*”定义,他表示选取页面中所有元素(标签)
语法
* {
属性1: 属性值1;
......
}
通配符选择器不需要调用,自动就给所有的元素使用样式
选择器总结:
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
标签选择器 | 可以选出所有相同的标签, 比如p | 不能差异化选择 | 较多 | p{color:red;} |
类选择器 | 可以选出1个或多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
id选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和Js搭配 | #nav {color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 特殊情况要用 | * {color: red;} |