Web的学习路线之CSS
一、CSS的作用 ？
静态资源之Css（Cascading Style Sheets）
作用：用于美化页面，布局页面
特点： 层叠（多个样式可以作用在同一个html的元素上，同时生效）
优点：
1.功能强大
2.将内容展示和样式控制分离：
好处：
降低耦合度，解耦；
让分工协作更容易；
提高开发效率。
二、CSS的使用
三、CSS的语法
格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
...
}
选择器：删选具有相同特征的元素。
注意： 每一对属性要用分号隔开，最后一个属性可以不加分号结尾，不过通常都加上分号。
分类：
1.基本选择器
id选择器 选择具体的id属性值的元素
语法 #id属性值{ }
元素选择器 选择具有相同标签名称的元素
语法 标签名称{ }
**注意：id选择器的优先级高于元素选择器
类选择器 选择具有相同class属性值的元素
语法 .class属性值{ }
**注意：类选择器的优先级高于元素选择器
2.组合选择器
选择所有元素
{ }
并集选择器
选择器1，选择器2{ }
嵌套选择器或后代选择器 筛选选择器1下的所有选择器2所指的元素（包括选择器2的子代、孙代等）
选择器1 选择器2{ }
子选择器 筛选父级是选择器1的选择器2中的元素（不包括选择器2的子代、孙代等）
选择器1>选择器2{ }
相邻同级选择器 筛选指定的选择器1之后紧跟的选择器2。
选择器1+选择器2{ }
相邻同级选择器 筛选前面是选择器1的选择器2
选择器1~选择器2{ }
3.属性选择器
简单属性选择器 修改元素名称为元素1，拥有属性名为属性1的元素的所有属性
元素1[属性1]{ }
精确属性值选择器 选择元素名称为元素1，属性名=属性值的元素
元素1[属性名="属性值"]{ }
4.伪类选择器
元素：状态{ }
如<a>
状态： link 表示初始化的状态
visited 表示被访问过的状态
active 表示正在访问的状态
hover 表示鼠标悬浮的状态
下面给大家一个伪类属性before和after的使用例子来理解一下
<head>
<style>
.text1::before {
content: " 利用before ->";
color: red;
}
.text2::after {
content: "<- 利用after";
color:blue;
}
</style>
</head>
<body>
<p class="text1">设置在该元素前</p>
<p class="text2">设置在该元素后</p>
</body>
</html>
3.1 CSS与html的结合方式
3.1.1 内联样式
在标签内使用style属性指定css代码
如：
<div style="color:red;">hello css</div>
3.1.2 内部样式
在head标签内定义style标签，style标签的标签体内容就是css代码
例如
<style>
div{
color: red;
}
</style>
3.1.3 外部样式
定义css资源文件
在head标签内定义link标签，引入外部的资源文件
例如 href引入url,其中rel 定义链接文档与当前文档的关系
<link href="test.css" rel="stylesheet"/>
还可以在hesd标签内用style引入外部文件
<style>
@import“css/a.css”;
</style>
3.2 浮动和消除浮动
浮动
首先我们知道HTML网页显示是“流”方式即从左到右，从上到下。
当该行放不下下下一个元素时就会“流”到下一行。
其中多个元素排在同一行是行内元素的特性，给元素设置宽高是块级元素的特性。
如果想要一些元素既有行内元素的特性又有块级元素的特性就要让这些元素脱离标准文档流，下面说的浮动就可以让元素脱离标准文档流。
浮动的英文单词是 float
float 的属性值
左浮动 left
右浮动 right
垂直位置 Vertical
水平位置 Horizontal
需要我们注意的是：
浮动元素脱离标准文本流不在占用行内的标准流空间
浮动元素的层级比标准文本流里面的元素要高，会浮在标准文本流的元素之上
浮动元素遇到父元素的边框就停止浮动
浮动元素遇到上一个浮动元素就停止浮动
浮动元素的父元素只对浮动元素进行限制不再是包裹
行内元素浮动以后。会变成块级元素
消除浮动
有时候由于浮动元素影响其他元素的排版布局，我们需要清楚浮动
消除浮动后原浮动元素的父元素也会从视觉上感觉是包裹着该元素
- 1.给浮动元素的父元素设置一个固定的高度
（不建议使用，一般高度是由自身的内容自动撑开的） - 2.使用清楚浮动的样式属性 clear
有三个属性值 left、right、both
clear：left； //只清除左浮动
clear：right; //只清楚右浮动
clear：both； //左右浮动都清除
使用方法：在最后一个浮动元素的下面放一个空白的div，给这个div设置clear属性 - 3.使用overflow：hidden
overflow：hidden 是将溢出的部分隐藏
我们也可以借助overflow 来清除浮动
清除无序列表中li的浮动<ul style="overflow:hidden;"> <li>第一栏</li> <li>第二栏</li> <li>第三栏</li> <li>第四栏</li> </ul>
3.3 盒子模型
css中一个盒子的组成部分有内容、内填充、边框、外边距
一个盒子的重要属性有宽、高、边框、内填充、外边距
宽 width 盒子里内容的宽度
高 height 盒子里内容的高度
内填充 padding 盒子中的内容到边框的距离
边框 border 外边框
外边距 margin 盒子与盒子之间的距离
3.3.1 内填充 padding的属性
padding有四个属性
padding-top 上边部分内填充
padding-bottom 下边部分内填充
padding-left 左边部分内填充
padding-right 右边部分内填充
设置的方法有两种
- 1.分别表示
div
{
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
- 2.简易表示（默认顺序是上下左右）
div
{
/*上下左右都为10px*/
padding: 10px;
/*上下填充都为10px 左右填充都为20px*/
padding: 10px 20px;
/*分别表示上填充10px，下填充20px，左填充30px，右填充40px*/
padding: 10px 20px 30px 40px;
}
3.3.2 外边距 margin的属性
margin有四个属性
margin-top 上框外边距
margin-right 右框外边距
margin-left 左框外边距
margin-bottom 下框外边距
设置的方法有两种
- 1.分别表示
div
{
margin-top: 10px;
margin-right: 40px;
margin-left: 30px;
margin-bottom: 20px;
}
- 2.简易表示（默认顺序是顺时针也就是上右下左）
div
{
/*上下左右都为10px*/
margin: 10px;
/*上下外边距都为10px 左右外边距都为20px*/
margin: 10px 20px;
/*上外边距都为10px 左右外边距都为20px 下外边距为30px*/
margin: 10px 20px 30px;
/*分别表示上框外边距10px，右框外边距20px，左框外边距30px，下框外边距40px*/
margin: 10px 20px 30px 40px;
}
3.3.3 margin的塌陷现象和auto属性值
在标准文档流中，竖直方向的margin值不会叠加，会取较大的值
就是说上面的元素设置下外边距，下面的元素设置上外边距
会自动取这两个值中最大的值来显示
水平方向没有margin塌陷的现象
浮动元素没有margin塌陷的现象
auto属性值（自动）
当左外边距与右外边距的值都是auto时，标准文档流中的盒子会水平居中
注意：
水平居中的时候要给盒子设定一个固定的宽度（如果不设置该盒子就会占据父元素100%的宽度）
只有块元素可以实现水平居中，行内元素不可以达到水平居中的效果（行内元素不能设置宽度）
不能使文本达到水平居中的效果（文本用text-align：center;来实现居中）
非标准文档流中的盒子不能达到水平居中的效果（比如浮动盒子）
3.3.4 边框 border的属性
border简易表示有三个属性值
边框的宽度（默认无宽度，即视觉上看不到边框）
边框的线型（默认无线型，即视觉上看不到边框）
线型值：dotted 、dashed 、solid、 double 、groove 、ridge 、inset 、outset
边框的颜色（默认为黑色）
语法：
div{
border：1px solid yellow；
}
这里还有很多其他属性
比如border-radius（边缘半径）、border-top（上边框）、border-bottom（下边框）、border-left（左边框）、border-right（右边框）还可以单独设置border-color（颜色）、boder-width（宽度）、boder-style（线型）
3.3.5 border-collapse
collapse
相邻单元格具有共享边界（折叠边框表格渲染模型）。
separate
相邻单元格具有不同的边界（分隔边框表格渲染模型）。
3.4 display的属性
display 是CSS中用于控制布局的属性，每个元素都有一个默认的 display 。
大多数元素的默认值通常是 block（块级元素） 或 inline（行内元素） 。
当然还有一个值就是none例如script 的默认display属性 。
display属性可以用来进行块级元素和行内元素的互相转换。
3.4.1 display-outside
这些关键字指定元素的外部显示类型，本质上是元素在流布局中的作用。
3.4.2 block
一个块级元素会新开始一行并且尽可能撑满容器。
其他常用的块级元素包括 p 、form 和HTML5中的新元素：header 、footer 、section 等等
3.4.3 inline
一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局
例如span标签
<span> 被包裹的文字</span>
3.4.4 none
关闭元素的显示，使其对布局没有影响（视觉上好像该元素不存在一样）。
并且所有后代元素也都关闭了显示。
display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。
把 display 设置成 none 元素不会占据它本来应该显示的空间，
但是设置成 visibility: hidden; 会占据它本来应该显示的空间。
3.5 display-inside
这些关键字指定元素的内部显示类型，该类型定义了其内容所在的格式上设置上下文的类型（假定它是不可替换的元素）。
3.5.1 flow-root
该元素生成一个块元素框，该框将建立一个新的块格式化上下文，以定义格式化根所在的位置。
3.5.2 table
这些元素的行为类似于HTML
元素。它定义了一个块级框。3.5.3 flex
元素的行为类似于block元素，并根据flexbox模型布置其内容。
3.5.4 grid
元素的行为类似于块元素，并根据网格模型布置其内容。
3.6 position 定位
3.6.1 position的属性：static （默认值）
position: static; 使元素不会被特殊的定位。
3.6.2 position的属性：relative（相对定位）
给相对定位的元素设置 top 、 right 、 bottom 和 left 属性会使其在原有位置上偏离指定的距离。
其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
没有脱离标准文本流但是会压盖其他没有“positioned”的元素
3.6.3 position的属性：fixed（固定定位）
相对于视窗来定位，即使页面滚动，它还是会停留在视窗原来的位置。
也就意味着它和浮动元素一样脱离了标准文档流。
而且固定定位元素的层级比标准文本流的元素高。
（也会盖住标准文本流元素）
3.6.4 position的属性：absolute（绝对定位）
positioned是可被定位的意思，也就是position的值部位state，而且该元素必须为标准文本流元素。
absolute是相对于最近的“positioned”的祖先元素。
如果绝对定位的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。
3.7 position的属性值
top 定位的元素到上边的距离
right 定位的元素到右边的距离
bottom 定位的元素到下边的距离
left 定位的元素到左边的距离
3.8 z-index
对于定位的框（即，positioned），该z-index属性指定：
1.当前堆栈上下文中框的堆栈级别。
2.该框是否建立本地堆栈上下文。
这是什么意思呢？简单来说，就是为可定位的框设置一个值，
该值越大，就会显示在会前面，就像千层饼中放在最上面一层的那张饼。
z-index有一个默认属性值0，可以写成auto，即
/*三种效果是一样的*/
/*1.不设置z-index值*/
/*2.*/
z-index:0;
/*3.*/
z-index:auto;
/* 设置比0值更大*/
z-index:50;
/*会显示在更上层*/
/* 设置比0值更小*/
z-index:-20;
/*会显示在更下层*/
我们通常会给导航栏的z-index设置一个很大的值保证导航栏一直在最上层显示。
四、CSS3
CSS3是在CSS2的基础上添加了新的语法和新的属性
就是对CSS2进行了扩充、删减和优化。
增加了圆角，阴影，渐变，过渡或动画，以及新的布局（例如多栏布局，弹性盒子或网格布局）等等
具体的请看我的CSS3新特性的文章
五、透明化
这里我查到了三种方法
-
背景颜色为透明
background-color: transparent; -
背景颜色半透明
直接对盒子设置，盒子中的所有元素透明度都会变
可以用选择器对盒子中的特定元素进行透明化opacity: 0.5; -
利用颜色通道
background: rgb(95,95,250，0.5); //0.5就是设置的透明程度 （0到1是从全透明到不透明）可以单独设置body背景的颜色透明度
六、CSS框架
buleprint
unsemantic
BlueTrip
Bootstrap
SUSY
Foundation
Kube
GroundworkCss
Semantic UI
Pure.css
6.1 小方法：
-
通过通用选择器可以去除HTML中标签的默认内填充和外边距
比如去掉有序列表或者无序列表的默认内填充margin:0px; //外边距 padding:0px; //内填充 -
默认情况下内填充padding影响盒子的大小
可以通过设置属性 box-sizing：border-box; 来固定盒子大小通过通用选择器给所有的盒子都设置固定 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -
要多使用父元素的padding，少使用子元素的margin
单独设置子元素的margin默认会同时改变父元素的margin
可以通过给父元素设置边框线使父元素的margin恢复
（因为边框线在视觉上影响最后的美观，我们通常不采用这种方法）
还可以通过设置父元素的内填充padding
（但是父元素的大小会改变，那么我们通过上面说的boxsizing来固定父元素的大小）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
