CSS语法
CSS基础语法
CSS语法可以分为两部分：
- 选择器
- 声明
声明由属性和值组成，多个声明之间用分号分隔。
CSS注释
注释是代码之母。
/*这是注释*/网页中引用CSS样式
- 内联样式
- 行内样式表
- 外部样式表
- 链接式
- 导入式
内嵌方式
style标签
<!doctype html>
<html>
<head>
<meta charset="utf8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签！</p>
</body>
</html>
行内样式
<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签！</p>
</body>
</html>
外联样式表-链接式
link标签
index.css
p {
color: green;
}
然后在HTML文件中通过link标签引入：
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>这是一个p标签！</p>
</body>
</html>
外联样式表-@import url()方式 导入式
了解即可。
index.css
@import url(other.css)
注意： @import url()必须写在文件最开始的位置。
链接式与导入式的区别
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的基本选择器
首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。
基础选择器包括：
- 标签选择器
- 类选择器
- ID选择器
- 通用选择器
标签选择器
顾名思义就是通过标签名来选择元素：
示例：
p {
color: red;
}
将所有的p标签设置字体颜色为红色。
ID选择器
通过元素的ID值选择元素：
示例：
#i1 {
color: red;
}
将id值为i1的元素字体颜色设置为红色。
类选择器
通过样式类选择元素：
示例：
.c1 {
color: red;
}
将所有样式类含.c1的元素设置字体颜色为红色。
通用选择器
使用*选择所有元素：
* {
color: black;
}高级选择器
后代选择器
因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式：
div p {
color: red;
}
从div的所有后代中找p标签，设置字体颜色为红色。
儿子选择器
div>p {
color: red;
}
从div的直接子元素中找到p标签，设置字体颜色为红色。
毗邻选择器
div+p {
color: red;
}
找到所有紧挨在div后面的第一个p标签，设置字体颜色为红色。
弟弟选择器
div~p {
color: red;
}
找到所有div标签后面同级的p标签，设置字体颜色为红色。
属性选择器
除了HTML元素的id属性和class属性外，还可以根据HTML元素的特定属性选择元素。
根据属性查找
[title] {
color: red;
}
根据属性和值查找
找到所有title属性等于hello的元素：
[title="hello"] {
color: red;
}
找到所有title属性以hello开头的元素：
[title^="hello"] {
color: red;
}
找到所有title属性以hello结尾的元素：
[title$="hello"] {
color: red;
}
找到所有title属性中包含（字符串包含）hello的元素：
[title*="hello"] {
color: red;
}
找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：
[title~="hello"] {
color: red;
}
表单常用
input[type="text"] {
backgroundcolor: red;
}分组和嵌套选择器
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div,p {
color: red;
}
为div标签和p标签统一设置字体为红色的样式。
通常，我们会分两行来写，更清晰:
div,
p {
color: red;
}
嵌套
多种选择器可以混合起来使用，比如：.c1类下面的所有p标签设置字体颜色为红色。
.c1 p {
color: red;
}伪类选择器
常用的几种伪类选择器。
没有访问的超链接a标签样式：
a:link {
color: blue;
}
访问过的超链接a标签样式：
a:visited {
color: gray;
}
鼠标悬浮在元素上应用样式：
a:hover {
background-color: #eee;
}
鼠标点击瞬间的样式：
a:active {
color: green;
}
input输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #eee;
}伪元素
介绍常用的伪元素。
first-letter
用于为文本的首字母设置特殊样式。
例如：
p:first-letter {
font-size: 48px;
}
before
用于在元素的内容前面插入新内容。
例如：
p:before {
content: "*";
color: red;
}
在所有p标签的内容前面加上一个红色的*。
after
用于在元素的内容后面插入新内容。
例如：
p:after {
content: "*";
color: red;
}
在所有p标签的内容后面加上一个蓝色的?。
选择器的优先级
我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？也就是不同的选择器它们的优先级是怎样的呢？
是先来后到呢还是后来居上呢？统统不是，它是按照下面的选择器的权重规则来决定的。
注意：
还有一种不讲道理的!import方式来强制让样式生效，但是不推荐使用。因为大量使用!import的代码是无法维护的。
字体相关CSS属性介绍
font-family
字体系列。
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
简单实例：
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
如果设置成inherit，则表示继承父元素的字体。
font-weight
字重（字体粗细）。
取值范围：
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bord | 粗体 |
| border | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
font-size
字体大小。
p {
font-size: 14px;
}
如果设置成inherit表示继承父元素的字体大小值。
color
设置内容的字体颜色。
支持三种颜色值：
- 十六进制值 如: ＃FF0000
- 一个RGB值 如: RGB(255,0,0)
- 颜色的名称 如: red
p {
color: red;
}字体属性
text-align
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
line-height
行高
text-decoration
文字装饰。
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
背景属性
常用背景相关属性：
| 属性 | 描述 |
|---|---|
| background-color | 规定要使用的背景颜色。 |
| background-image | 规定要使用的背景图像。 |
| background-size | 规定背景图片的尺寸。 |
| background-repeat | 规定如何重复背景图像。 |
| background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 |
| background-position | 规定背景图像的位置。 |
| inherit | 规定应该从父元素继承background属性的设置。 |
background-repeat取值范围：
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承background-repeat属性的设置。 |
background-attachment取值范围：
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承background-attachment属性的设置。 |
background-position取值范围：
| 值 | 描述 |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
如果只设置了一个关键词，那么第二个值就是"center"。 默认值：0% 0%。 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果只设置了一个值，另一个值就是50%。 |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果只设置了一个值，另一个值就是50%。 可以混合使用 %和position值。 |
示例：
body {
background-color: red;
backgraound-image: url(xx.png);
background-size: 300px 300px;
background-repeat: no-repeat;
background-position: center
}
简写：
body {
background: red url(xx.png) no-repeat fixed center/300px 300px;
}CSS盒子模型
HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如图所示：
注意：浏览器的调试窗口中通常会有相似的模型可供开发调试使用。
border
边框的常用值：
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
示例：
div.box {
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
padding: 5px 10px 15px 20px;
border: 5px solid blue;
margin: 5px 10px;
}
1.border会改变元素的实际大小 2.背景色会渲染到border区域
内边距
padding:内边距 控制内容到边框的距离 1.只写一个padding代表四个方向，也可以单独指定某一个方向 2.元素设置了padding值是额外家在原来大小之上的width+padding。如果不想改变实际大小，那就在width-padding对应方向的值 3.padding是添加给父级的，改变的是父级包含的内容的位置，自身位置不变 4.简写方法 1）一个值：4个方向 2）两个值：上下 左右 3）三个值：上 左右 下 4）四个值：上 右 下 左（顺时针方向） 注意：padding不支持负值
外边距
margin： 外边距 控制元素与元素之间的距离 1）margin 的4个方向 2）margin会改变实际大小，背景色不会渲染到margin区域 这个区域会以空白显示，但是也属于盒子的一部分 3)margin是添自身的,如果哪个想要改变自己的位置，就给谁添加margin html的部分标签自带margin padding p body ul
display
1.控制HTML元素的显示和隐藏 2.块级元素与行内元素的转换。
block（块级）
默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
inline（行内）
行内元素
只要设置了display: inline，那么元素的width、height、margin-top、margin-bottom和 float属性都不会有什么影响。
inline-block（行内块级）
行内块元素
同时具有行内元素和块级元素的特点。
none
HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
float
先来了解一下block元素和inline元素在文档流中的排列方式。
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效
常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等 所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。
float属性值：
1、left：左浮动 左侧为起始，从左向右排列
2、right：右浮动 右侧为起始，从右向左排列
3、none ：不浮动，默认不浮动
浮动产生的影响
浮动可以使元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止
浮动的特性
什么是文档流
可见元素在文档中排列位置，元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
1.浮动会使元素脱离文档流
2.浮动会使元素提升层级
3.浮动可以使块元素在一行排列，不设置宽高的时候，可以使元素适应内容
4.浮动可以使行内元素支持宽高
浮动产生的问题
父元素不设置高度，子元素设置浮动之后，不会撑开父元素的高度
解决办法
1.给父元素固定高度。不灵活
2.在浮动元素最后加一个空的块元素，且块元素不浮动，设置其属性为clear：both 结构冗余
3.常用方法：.wrap:after{
clear: both;
content: "";
height: 0;
visibility: hidden;
display: block;
}
4.给父盒子 添加overflow:hidden属性position
设置定位之后，top、left、right、bottom属性值可以使用
一、relative 相对定位：相对于自身位置定位
影响：
1.没有偏移量的时候对元素本身基本没有影响
2.提升层级
`
二、abdolute 绝对定位
在没有父级元素的情况下，相对于浏览器的左上角定位
没有定位父级，相对于浏览器的左上角定位
有定位父级，相对于最近的父级定位
影响
脱离文档流
提升了层级
`
三、fixed 固定在浏览器的某个位置，可以做小广告
四、static 静态定位，默认 ```