CSS语法结构
选择器{
属性1:值1;
属性2:值2;
属性3:值3
}
注释
/**/
CSS三种导入方式
- 外部引入方式
外部引入方式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
- 内部样式
内部样式是将CSS样式集中写在网页的
<head></head>标签中的<style></style>标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 行内样式
行内式是在标签的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
CSS选择器
基本选择器
元素选择器
p {color: "red";}
ID选器
#i1 {
background-color: red;
}
类选择器
.c1 {
font-size: 14px;
}
通用选择器
* {
margin:0;
padding:0;
}
组合选择器
后代选择器
div下面所有的a标签
div a {
color: green;
}
儿子选择器
div下一级的所有的a标签
div>a {
color: green;
}
毗邻选择器
div同级别下紧挨着的那一个a标签
div+a {
color: green;
}
弟弟选择器
div同级别，且在div下面的所有的a标签
div~a {
color: green;
}
属性选择器
- 含有某个属性
[username] { /*所有含有属性名是username的标签*/
background-color: lime;
}
- 含有某个属性并且有某个值
[username='jason'] { /*找到所有属性名是username并且属性值是Jason的*/
color: orange;
}
- 含有某个属性并且有某个值的某个标签
input[username="jason"] { /*找到所有属性名是username并且属性值是Jason的input标签*/
background-color:wheat;
}
不常用的属性选择器：根据值的某个字段找元素
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
color: green;
}
分组与嵌套
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div,a,span{
color:red;
}
嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色
.c1 p{
color:red;
}
伪类选择器
- (link)未访问过的状态：没有被点击过
a:link{
color:red;
}
- (hover)鼠标悬浮态：鼠标悬停在标签上时显示的状态（需要记住）
a:hover{
color:red;
}
- (active)激活态：鼠标点击标签不松开时的状态
a:active{
color:red;
}
- (visited)访问过后的状态：被鼠标点击过
a:visited{
color:red;
}
- (focus)input框获取焦点：input框被鼠标选中的时候
input:focus{
color:red;
}
伪元素选择器
- first-letter
通常用来给首字母设置特殊样式
/*p标签文本内容的首字母大小变为48px，颜色为红色*/
p:first-letter {
font-size: 48px;
color: red;
}
- before
在元素之前插入内容，且无法被选取
p:before {
content:"*";
color:red;
}
- after
在元素之后插入内容，且无法被选取
p:after {
content:"[?]";
color:blue;
}
before和after一般用来清除浮动
选择器的优先级
- 选择器相同，书写顺序不同
就近原则：谁离标签更近就听谁的
- 选择器不同
行内式 > id选择器 > 类选择器 > 标签选择器
精确度越高越流弊，越有效
- !important强制让标签采用你的样式，不推荐使用
CSS属性
宽高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定
字体属性
字体样式
font-family
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
字体大小
font-size
p {
font-size: 14px;
}
如果把值设置成inherit表示继承父元素的字体大小值
字体粗细
font-weight
| 值 | 意义 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
字体颜色
color
- 十六进制：color:#ffffff;
当六个数一样时可以简写：color:#fff;
- 写颜色具体的值：color:red;
- 三基色：color:rgb(255,255,255);
三基色的范围：0~255的整数
- 可以设置透明度的三基色：color:rgba(255,255,255,0.5);
透明度的范围：0~1
文字属性
文字对齐
text-align
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰
text-decoration
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本(通常用来去除a标签的下划线) |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值 |
a {
text-decoration: none;
}
首行缩进
text-indent
p {
text-indent: 32px;
}
把p标签内的文本首行缩进32个像素
背景属性
背景颜色
background-color
div {
background-color:red;
}
背景图片
在背景图片比容器小时会自动重复排列，直到铺满容器为止
background-image
div {
background-image: url('1.jpg');
}
背景图片的重复与方向
background-repeat
- repeat（默认铺满）
div {
background-image: url("gradient_bg.png");
background-repeat: repeat;
}
- repeat-x:水平方向铺满容器
/*水平方向铺满容器*/
div {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
- repeat-y:垂直方向铺满容器
/*垂直方向铺满容器*/
div {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
背景图片只显示一次
background-repeat:no-repeat
body {
background-image: url("tree.png");
background-repeat: no-repeat;
}
背景图片的开始位置
background-position
body {
background-image: url("tree.png");
background-repeat: no-repeat;
/*背景图片在右上角*/
background-position: right top;
}
背景图片是否跟随整体一起移动
background-attachment
- fixed：不跟随整体一起移动
body {
background-attachment: fixed;
}
- scroll：跟随整体一起移动
body {
background-attachment: scroll;
}
背景简写
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
这样写代码太过冗余，可以使用background来简写
但是在简写时要注意值的书写顺序：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
body {
background: #ffffff url("tree.png") no-repeat right top;
}
所有背景属性
| 属性 | 含义 |
|---|---|
| background | 在一条声明中设置所有背景属性的简写属性。 |
| background-attachment | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
| background-clip | 规定背景的绘制区域。 |
| background-color | 设置元素的背景色。 |
| background-image | 设置元素的背景图像。 |
| background-origin | 规定在何处放置背景图像。 |
| background-position | 设置背景图像的开始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
| background-size | 规定背景图像的尺寸。 |
背景属性详情
边框属性
边框属性表
| 属性 | 含义 |
|---|---|
| border-width | 边框粗细 |
| border-style | 边框样式 |
| border-color | 边框颜色 |
| border-radius | 边框圆角 |
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
边框粗细
border-width
div {
border-width: 2px;
}
边框样式
border-style
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框（默认属性） |
边框颜色
border-color
div {
border-color: red;
}
边框圆角
border-radius
div {
/*可以写百分比*/
border-radius: 50%;
/*也可以写像素*/
border-radius: 5px;
}
边框简写
div {
border: 2px solid red;
}
display属性
display属性详细表格
| 值 | 含义 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>） |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead> |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>） |
| table-row | 此元素会作为一个表格行显示（类似 <tr>） |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>） |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
display属性常用值
| 值 | 意义 |
|---|---|
| display:none | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:block | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:inline | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:inline-block | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
盒子模型
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
margin外边距
div {
/*上外边距5px*/
margin-top:5px;
/*右外边距5px*/
margin-right:5px;
/*下外边距5px*/
margin-bottom:5px;
/*左外边距5px*/
margin-left:5px;
}
推荐使用简写
/*顺序：上右下左x*/
div {
margin: 5px 5px 5px 5px;
}
padding内边距
div {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
推荐使用简写
div {
/*顺序：上右下左x*/
padding: 5px 10px 15px 20px;
}
margin和padding的常用简写方式
- 提供一个，用于四边；
- 提供两个，第一个用于上－下，第二个用于左－右；
- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
- 提供四个参数值，将按上－右－下－左的顺序作用于四边；
float浮动（基本不使用，用弹性盒子flex会更好）
浮动详细参考该地址
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动
clear属性规定元素的哪一侧不允许其他浮动元素。
- left：在左侧不允许浮动元素。
- right：在右侧不允许浮动元素。
- both：在左右两侧均不允许浮动元素。
- none：默认值。允许浮动元素出现在两侧。
- inherit：规定应该从父元素继承 clear 属性的值。
注意：clear属性只会对自身起作用，而不会影响其他元素。
清除浮动带来的影响（父标签塌陷的问题）
- 固定高度
- 伪元素清除法
- overflow:hidden
伪元素清除法（用的较多）
.clearfix:after {
content: "";
display: block;
clear: both;
}
溢出（overflow属性）
overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
overflow-x
设置水平方向的溢出属性，值与overflow一致
overflow-y
设置垂直方向的溢出属性，值与overflow一致
定位属性（position）
| 值 | 意义 |
|---|---|
| static | 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。 |
| relative | 相对定位，主要用法：方便绝对定位元素找到参照物 |
| absolute | 绝对定位，相对于已经定位过的父标签做移动（如果没有父标签那么就以body为参照） |
| fixed | 固定定位，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 |
透明度（opacity属性）
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明
inherit：从父元素继承opacity属性的值
通常与hover一起使用：当鼠标移上去时图片的透明度会改变
z-index属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index可设置的值：
- auto: 默认。堆叠顺序与父元素相等。
- 任意整数: 设置元素的堆叠顺序，数字越大显示的优先级越高，可以为负数
- inherit: 规定应该从父元素继承 z-index 属性的值。
z-index的特性
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用