从零开始，学习web前端之css基础
文章目录
- css简介
- 选择器
- 基础选择器
- 复合选择器
- 标签的分类
- css三大特性
- css属性
css简介
css起源
在web早期（1990-1993），html是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。随着万维网的出现（用户交互体验的加强）对html的要求越来越大，人们迫切需要html增加新的元素，去完成一个特定的功能。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
css概念
CSS ：层叠样式表 (Cascading Style Sheets)(级联样式表)
CSS特点
1)丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2)易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
3)多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4)层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
5)页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。
** 样式表书写位置**
内嵌式写法
外链式写法
写在head里，
行内样式表（直接在标签里面写）
三种写法特点:
内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）
css基本写法
选择器：{
属性：值；
属性：值
}
选择器
选择器可以参考选择器
css属性
css属性有很多，具体可以看 css参考手册
常用的基本属性:
width:20px; 宽
height:20px; 高
background-color:red; 背景颜色
font-size:24px; 文字大小
text-align:left | center| right 内容的水平对齐方式
text-indent:2em; 首行缩进
color:red; 文字颜色
background-color 背景颜色
background-image 背景图片
background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
background-position left | right | center | top | bottom 背景定位
background-attachment 背景是否滚动 scroll | fixed
…等等
选择器
基础选择器
标签选择器
写法：标签{属性：值;}
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
background: #060C19;
}
p{
font-size: 20px;
color: red;
}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
类选择器
写法：.自定义类名(属性:值;)
特点: 谁调用，谁生效.
一个标签可以多个类选择器。
多个标签可以调用同一个类选择器
类选择器命名规则：
不能用纯数字或者数字开头来定义类名。
不能使用特殊符号(_ 除外)来定义类名。
不推荐使用汉字来定义类名。
不推荐使用标签名、属性、属性值来定义类名。
.name {
color: white;
font-weight: bold;
font-size: 60px;
text-align: center;
letter-spacing: 5px;
}
.btnDiv {
text-align: center;
min-width: 500px;
margin-top: 60px;
}
id选择器
写法：#自定义名{属性:值;}
特点:谁调用，谁生效。
一个标签只能调用一个id选择器。
一个id选择器在一个页面只能调用一次。
#superContainer {
height: 100%;
position: relative;
-ms-touch-action: none;
touch-action: none
}
复合选择器
两个或两个以上的基础选择器通过不同的方式连接在一起
交集选择器
标签+类(id)选择器{属性:值;}
特点:即是某个标签，而且这个标签调用了类（id）选择器
內容3
后代选择器
选择器+空格+选择器{属性:值;}
后代选择器的基本要求：包含(嵌套)关系。
特点: 父在前,子在后。
无限制隔代。
只要能代表这个标签，可以是标签选择器、类选择器、id选择器自由组合。
子标签1
子标签2
子代选择器
选择器>选择器{属性:值;}
特点：选择的是直接下一代.有限制隔代。
子标签1
子标签2
子标签3
并集选择器
选择器+,+选择器+,+选择器{属性:值;}
html,body,div,span{
margin: 0;
padding: 0;
}
标签的分类
块元素
典型代表：div,h1-h6,p,ul,li
特点:
- 独占一行
- 可以设置宽高
- 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
块级标签
aaa
bbb
ccc
行内元素
典型代表： span ,a, ,strong , em, del, ins
特点：
- 在一行上显示
- 不能直接设置宽高
- 元素的宽和高就是内容撑开的宽高。
行内元素
span标签
超链接
行内块元素(内联元素)
典型代表 input img
特点：
- 在一行上显示
- 可以设置宽高
行内块元素
通过display属性转换元素
display: none;//此元素不会被显示。
display: block;//此元素将显示为块级元素，此元素前后会带有换行符。
display: inline;//默认。此元素会被显示为内联元素，元素前后没有换行符。
display: inline-block;//将元素转换为行内块元素
转换元素
aaaa
bbbb
段落标签
css三大特性
层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
继承性
继承性发生的前提是包含（嵌套关系）
1）文字颜色可以继承
2）文字大小可以继承
3）字体可以继承
4）字体粗细可以继承
5）文字风格可以继承
6）行高可以继承
总结：文字的所有属性都可以继承。
◆特殊情况：
h系列不能继承文字大小。
a标签不能继承文字颜色。
权重和优先级
从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。
从选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
important的权重为1,0,0,0
ID的权重为0,1,0,0
类的权重为0,0,1,0
标签的权重为0,0,0,1
伪类的权重为0,0,1,0
属性的权重为0,0,1,0
伪对象的权重为0,0,0,1
通配符的权重为0,0,0,0
其中，！important会把优先级提到最高。
优先级特点
- 继承的权重为0
- 权重会叠加
eee
伪类
CSS 伪类用于向某些选择器添加特殊的效果。
写法： 选择器：伪类{ 属相：值} 例： a：hover{color:red;}
常用的伪类状态有
1 :link 选择未访问的链接
2 :visited 选择已访问的链接
3 :hover 选择鼠标指针浮动在其上的元素
4 :active 选择活动的链接
5 :focus 选择获取焦点的输入字段
转换元素
超链接1
超链接2
超链接3
超链接4
超链接5
css属性
背景属性
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
示例：
背景屬性
文本属性
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
示例：
背景屬性
段落标签
超链接aaaa
字体属性
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。
示例：
背景屬性
段落标签
超链接aaaa
列表属性
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
背景屬性
- item
- item
- item
- item
- item
- item
表格属性
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。
示例：
表格标题
表格头
单元格
单元格
单元格
单元格
单元格
单元格
单元格
单元格
单元格
单元格
单元格
单元格
单元格
单元格
单元格
单元格
轮廓属性
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
示例：
边框属性
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
示例：
内边距
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
示例：
外边距
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
示例：
adssadsaas
浮动
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
元素浮动之后不占据原来的位置（脱离标准文档流），文字和浮动元素没有层叠关系
假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）
浮动的作用
1.文本绕图
文字和浮动元素没有层叠关系
2.制作导航
3.网页布局
清除浮动
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。这个时候我们需要清除浮动
清除浮动的方法
1）clear: left | right | both
在最后一个浮动元素后添加标签,。
2）伪元素清除浮动（推荐使用）
自定义一个伪元素，在浮动的父元素上调用伪元素即可。
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;/*IE678*/
}
示例
overflow
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
定位（poisition）
定位方向: left | right | top | bottom
1）静态定位
position:static; 静态定位。默认值，就是文档流。
2）绝对定位
position:absolute;
特点：
★元素使用绝对定位之后不占据原来的位置（脱标）
★元素使用绝对定位，位置是从浏览器出发。
★嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
★嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
★给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）
3）相对定位
position: relative;
特点：
★使用相对定位，位置从自身出发。
★还占据原来的位置。
★子绝父相（父元素相对定位，子元素绝对定位）
★行内元素使用相对定位不能转行内块元素
4）固定定位
position:fixed;
特点：
★固定定位之后，不占据原来的位置（脱标）
★元素使用固定定位之后，位置从浏览器出发。
★元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）
定位的元素居中显示
方法：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
图片和文字垂直居中对齐
vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;
img{
vertical-align: middle;
}
css可见性
overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。
display:none; 隐藏元素 隐藏之后不占据原来的位置。
Display:block; 元素可见
Display:none 和display:block 常配合js使用。
精灵图（CSS Sprites）
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的 background-image ， “background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。能够有效的减少http请求。
css初始化
因为不同浏览器渲染出来的样式不同，为了解决这一兼容性问题，一般在我们会对css进行初始化。
示例：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可。也可以关注我web前端的博客专栏，我会不定期的更新，如果文中有什么错误的地方，还望指正，谢谢！