CSS 是 层叠样式表 ( Cascading Style Sheets ) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种 标记语言
CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、 边距等)以及版面的布局和外观显示样式。
CSS 样式规则由两个主要的部分构成:选择器以及一条或多条声明
- 选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
选择器分为基础选择器和复合选择器两个大类,我们这里先讲解一下基础选择器。
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:
标签选择器
、类选择器
、id 选择器和通配符选择器
1. 标签选择器
标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定 统一的 CSS 样式。
语法:
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
作用
标签选择器可以把某一类标签全部选择出来,比如所有的<div>
标签和所有的 <span>
标签。
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式,只能选择全部的当前标签。
2. 类选择器
2.1 介绍
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
语法:
<!--要利用到class属性-->
.类名 {
属性1: 属性值1;
...
}
2.2 class属性的命名规范
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
、
2.3利用类选择器实现盒子
目标:
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>略略略</title>
<style>
.red {
background-color: red;
width: 100px;
height: 100px;
}
.green {
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
2.3 类选择器之多类名
我们可以给一个标签指定多个类名
多类名开发中使用场景
(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3) 从而节省CSS代码,统一修改也非常方便.
比如上面的红&绿盒子的例子代码可以改写成:
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>略略略</title>
<style>
.box {
background-color: red;
width: 100px;
}
.red {
height: 100px;
}
.green {
height: 100px;
}
</style>
</head>
<body>
<div class="red box"></div>
<div class="green box"></div>
<div class="red box"></div>
</body>
</html>
3. ID选择器
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以#
来定义。
语法:
#id名 {
属性1: 属性值1;
...
}
id 选择器和类选择器的区别
① 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。
4.通配符选择器
语法:
* {
属性1: 属性值1;
... }
5.总结
如果是修改样式, 类选择器是使用最多的