本文详细介绍了CSS的基础知识，包括CSS样式规则的构成、选择器的使用（如标签选择器、类选择器、id选择器和通配符选择器），以及一些基本样式属性，如颜色、字体、文本对齐和溢出处理。还探讨了类选择器和id选择器的区别，并通过实例展示了如何通过CSS实现元素的样式控制。此外，还提及了CSS单位的选择，以及文本和鼠标属性的设置。
目录
CSS简介
- 标记语言
- 层叠样式表（Cascading Stytle Sheets）的简称, 也会称为CSS样式表或级联样式表
- 主要作用
- 设置HTML中的文本内容（字体、大小、对齐方式等）
- 图片的外形（宽高、边框样式、边距等）
- 版面的布局和外观显示样式
CSS样式规则
选择器 {样式}
给谁改样式 {改什么样式}
主要构成: 选择器以及一条或多条声明
选择器 { 属性名: 属性值; 属性名: 属性值; }
- 选择器是用于指定CSS样式的HTML标签，
花括号内是对该对象设置的具体样式 - 属性和属性值以“
键值对”的形式出现 - 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 如果一个属性有多个值的话，那么多个值用
空格隔开 - 属性和属性值之间用英文
：分开 - 多个键值对之间用
；进行区分
CSS注释
注释要写在<style>标签里面才算生效
/*
注释
*/
CSS的一些简单属性
color:red;字体颜色font-size:40px;字号大小, 单位必须加，不加不行background-color: blue;背景颜色font-weight: bold;加粗font-weight: normal;不加粗font-style: italic;斜体font-style: normal;不斜体text-decoration: underline;下划线text-decoration: none;没有下划线
CSS基础选择器
CSS选择器的作用：根据不同的需求将不同的标签选出来，简单地说，就是选择标签用的
标签选择器
用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
标签名 {
属性1：属性值1；
}
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签
类选择器
差异化选择不同的标签，单独选择一个或者某几个标签，可以使用类选择器
.类名{
属性1：属性值1；
}
结构需要用class属性来调用class类
.red{
color: red;
}
<div class='red'>变红</div>
类选择器-多类名
给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签
在标签class属性写多个类名, 多个类名之间用空格分开
<div class="red font20">孙尚香</div>
使用场景
- 方便统一修改
- 可以把一些标签元素相同的样式（公共部分）放到一个类里面
- 这些标签都可以调用这个公共的类，然后再单独调用自己独有的类
- 从而节省CSS代码，统一修改也非常方便
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
</body>
</html>
id选择器
可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以“#” 来定义
只能调用一次
#id名 {
属性1：属性值1
}
id选择器和类选择器区别
- 类选择器（class) 好比人的名字，一个人可以有多个名字，同一个名字也可以被多个人使用
- id选择器好比人的身份证号码，全中国是唯一的，不得重复
- id选择器和类选择器最大的不同就是使用次数
- 类选择器在修改样式中使用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用
通配符选择器
使用“*” 定义，表示选取页面中所有元素（标签）
* {
属性1：属性值1
}
通配符选择器不需要调用，自动就给所有元素使用样式
特殊情况下才使用，后面讲使用场景（以下是清除所有的元素的标签的内外边距）
* {
margin: 0;
padding: 0;
}
CSS单位
单位必须要写,因为它没有默认单位
绝对单位
1 in=2.54cm=25.4mm=72pt=6pc
相对单位
px：像素
em：印刷单位相当于12个点
%：百分比，相对周围的文字的大小
font字体属性
font-size: 50px;/字体大小/line-height: 30px;/行高, 不是直接作用在文字上的, 而是作用在 行 上的, 行高可以用百分比，表示字号的百分之多少/font-family: "Times New Roman","微软雅黑","宋体";/字体类型：如果没有微软雅黑就显示宋体，没有宋体就显示默认/
中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。
须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体
是否加粗属性以及上面这三个属性，可以连写, font属性连写至少要有字号和字体，否则连写是不生效
font: 加粗 字号/行高/ 字体
font: font-style font-weight font-size/line-height font family;
font: 400 14px/24px "宋体";
font-style: italic;/italic表示斜体，normal表示不倾斜/font-weight: bold;/粗体/
normal的值相当于400，bold的值相当于700, 更提倡使用数字表示加粗或者变细
font-variant: small-caps;/小写变大写/
文本居中对齐
单行文本
小技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。
多行文本
如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：
vertical-align: middle; 属性
用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
vertical-align: middle; /*指定行级元素的垂直对齐方式。*/
文本属性
-
letter-spacing: 0.5cm ;单个字母之间的间距 -
word-spacing: 1cm;单词之间的间距 -
text-decoration: none;字体修饰none去掉下划线underline下划线line-through中划线overline上划线
-
text-transform: lowercase;单词字体大小写。uppercase大写、lowercase小写 -
color:red;字体颜色 可使用 预定义的颜色值/十六进制/RGB代码 -
text-align: center;在当前容器中的水平对齐方式。属性值可以是：leftrightcenter（在当前容器的中间）justify
-
text-transform: lowercase;单词的字体大小写。属性值可以是：uppercase（单词大写）lowercase（单词小写）capitalize（每个单词的首字母大写）
-
text-indent: 2em文本的首行缩进，em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小 -
line-height，设置行间的距离，可以控制文字行与行之间的距离，文本高度是不变的
overflow属性
超出范围的内容要怎么处理
属性值:
visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来hidden：不显示超过对象尺寸的内容auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同
鼠标的属性 cursor
属性值:
auto：默认值。浏览器根据当前情况自动确定鼠标光标类型pointer：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样hand：和pointer的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样
想让鼠标放在那个标签上时，光标显示手状，代码如下：
p:hover{
cursor: pointer;
}
扫一扫
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
