什么是CSS？
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS使用
CSS介绍
css可以在head中通过style标签内部直接编写css，但是此时的css样式只针对此html页面。还能通过link标签引入外部css文件的方式，此方式对于多个有相同样式需求的页面便体现出它的优势。最后，也可以在标签内直接写，但是此方式会使页面越来越复杂，而且它是权级最高的，覆盖其他的style样式。
语法结构
选择器 {
属性名：属性值
}
注释语法： /* 注释内容 */
CSS选择器
基本选择器
标签选择器
标签选择器通过标签名直接查找
/* 查找所有div标签 */
div {
width: 200px;
height: 200px;
background-color: red;
}
类选择器
通过标签的class值查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
/* 查找所有class值含有one的标签 */
.one {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
id选择器
通过标签id值查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
/* 查找id值为two的标签 */
.two {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="two"></div>
</body>
</html>
通用选择器
/* 查找body内所有标签 */
* {
font-size: 16px;
}
组合选择器
<div>
<p>
<span></span>
</p>
</div>
如上图，为了区分嵌套标签之间的关系，我们发明了一种称呼。span是p的儿子，是div的孙子，也可以说是div的后代；p是div的儿子，也是div的后代，是span的父亲；div是p的父亲，也是span的爷爷，也可以说是他们的祖先。
有了上面的共识，我们再来讨论接下来的选择器。
后代选择器
/* 查找div内所有的span */
div span {
color: red;
}
儿子选择器
/* 查找div内所有的儿子span */
div > span {
color: red;
}
毗邻选择器
/* 查找同级别下面紧挨着的第一个span(不能有其他标签间隔) */
div + span {
color: red;
}
弟弟选择器
/* 查找同级别下面所有的span(不需要紧挨着) */
div ~ span {
color: red;
}
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
/* 查找含有custom属性的标签 */
[custom] {
width: 200px;
height: 200px;
background-color: red;
}
/* 查找custom属性值为x的标签 */
[custom='x'] {
width: 200px;
height: 200px;
background-color: red;
}
/* 查找custom属性值为x的div标签 */
div[custom='x'] {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div custom="x"></div>
</body>
</html>
分组和嵌套
选择器之间还能够组合使用。
/* 多个相同选择器并列使用 */
div,span,p { /* 查找div或者span或者p */
color: red;
}
/* 多个不同选择器并列使用 */
div,#d1,.c1 { /* 标签查找div id查找d1 类查找c1*/
color: red;
}
/* 不并列同样可以使用组合选择器 */
.c1 p { /*查找class为c1的后代p标签*/
color: red;
}
/* 直接筛选 */
div#d1 { /*查找id为d1的div标签*/
color: red;
}
div.c1 { /* 查找class为c1的div标签 */
color: red;
}
伪类选择器
/* 鼠标悬浮在a标签上显示橘色 */
a:hover {
color: orange;
}
/* 点击输入框背景颜色变成红色 */
input:focus {
background-color: red;
}
伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。
/* 所有p标签内容的第一个字符为48px */
p:first-letter {
font-size: 48px; /* 字体大小 */
color: red;
}
/* 在所有p标签之前加入hello，并且为红色 */
p:before {
content: 'hello';
color: red;
}
/* 在所有p标签之后加入hello，并且为橘色 */
p:after {
content: 'hello';
color: orange;
}
选择器优先级
css样式生效遵循就近原则，样式离标签近的起作用。选择器的优先级为：行内样式 > id选择器 > 类选择器 > 标签选择器
字体 font
/* 字体相关 css 样式*/
p {
font-size: 16px; /* 字体大小 */
font-weight: bolder; /* 字体粗细 也可为 0-700权重值 */
/* font-weight: lighter; */
color: red; /* 字体颜色 */
text-align: center; /* 字体对齐方式 */
text-decoration: none; /* 文字装饰 （主要用于去除a标签点击后默认的下划线） */
text-indent: 32px; /* 首行缩进 */
}
背景属性 backgound
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/* 背景重复
repeat(默认): 背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top; /* 左上 */
/*background-position: 200px 200px;*/
支持简写：
background:#336699 url('1.png') no-repeat left top;
边框 border
属性介绍：
- border-width 边框宽度
- border-style 边框风格
- none 无边框
- dotted 点状虚线边框
- dashed 矩形虚线边框
- solid 实线边框
- border-color 边框颜色
div {
border-width: 2px;
border-style: solid;
border-color: red;
/* 简写 */
/* border: 2px solid red; */
}
边框的风格样式可以每条边都有所不同，
div {
border-top-style: dotted;
border-top-color: red;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: none;
}
border-radius
此属性能够实现圆角边框。如果div为正方形，设置此值为div长或高的一般即可得到一个圆形。
display属性
用于控制HTML元素的显示效果。
- display："none" —— HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
- display："block" —— 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
- display："inline" —— 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
- display："inline-block" —— 使元素同时具有行内元素和块级元素的特点。