文章目录
- 一.CSS简介
- 二.CSS样式
- 三.盒子模型
- 四.CSS3新特性
- 五.网格布局
- 六.flex布局
前言
CSS 是 Cascading Style Sheet 的简写，表示层叠样式表，主要用于渲染HTML元素在网页中的展示效果。主要包括对元素高度、宽度、字体、颜色、背景图片、边距、定位、呈现方式等设定
一.CSS简介
1.CSS选择器
CSS 选择分为基本选择器和层次选择器。
CSS 基本选择分为ID选择器、类选择器和标签选择器三大类。
CSS 选择器有优先级之分： ID选择器 > 类选择器 > 标签选择器
2.CSS选择器语法
/*标签选择器*/
标签名{
声明1;
声明2;
...
声明n;
}
/*类选择器*/
.类名{
声明1;
声明2;
...
声明n;
}
/*ID选择器*/
#ID值{
声明1;
声明2;
...
声明n;
}
3.CSS样式引入
CSS 样式分为行类样式、内部样式和外部样式三种。
行类样式
<div style="color:red;font-size:20px;">
这是行内样式
</div>
内部样式
<style>
#demo{
color:red;
font-size:20px;
}
</style>
<div id="demo">
这是内部样式
</div>
外部样式
/*demo.css*/
#demo {
color:red;
font-size:20px;
}
<!-- demo.html -->
<head>
<link type="text/css" href="demo.css" rel="stylesheet">
</head>
CSS 样式引入也具有优先级：行内样式 > 内部样式 > 外部样式
4.CSS 高级选择器
后代选择器
div ul li {
}
子代选择器
div > ul > li {
}
二.CSS样式
1.字体
字体的复合属性是有顺序的：风格 粗细 大小 类型
2.文本
/*需要注意：文本两端对齐只对最后一行有效，因此需要添加一个text-align-last属性来完成两端对齐*/
text-align:justify;
text-align-last: justify;
3. 背景
4.边框
5.边距
边距分为外边距和内边距。边距有4个方向：上、下、左、右。
外边距： margin
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
margin: 2px;
内边距：padding
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
padding: 2px;
6.浮动
元素浮动有两个方向：left 和 right。
float: left;
7.清除浮动
清除浮动有三种选择：left、right 和 both。
浮动的元素与其他元素不在同一个层级，清除浮动后，浮动的元素就与其他元素在同一个层级了
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container{
background: red;
}
.block1,
.block2,
.block3{
width:200px;
height: 100px;
}
.block1{
background: black;
float: left;
}
.block2{
background: orange;
float: right;
}
.block3{
background: yellowgreen;
clear: both
}
</style>
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
</div>
8.定位
元素定位分为无定位、绝对定位、相对定位和固定定位四种。元素定位是根据参照物来进行定位，定位时根据元素与参照物上下左右四个方向中任意相邻的两个方向的距离来进行定位，定位方式不同，参照物也不一样。元素定位默认为无定位。绝对定位和固定定位的元素必须设置宽度和高度
position: relative;
top: 10px;
left: 10px;
position: absolute;
top: 10px;
right: 10px;
position:fixed;
left: 20px;
bottom: 20px;
9. 列表样式
10.伪类样式
常用的伪类样式是鼠标悬浮的伪类样式:hover
div:hover{
background: red;
}
超链接伪类样式
当超链接同时拥有上面的伪类样式时，其书写顺序有要求： a:link->a:visited->a:hover->a:active
三.盒子模型
HTML 中的每一个元素都是一个容器，这个容器就像是一个盒子，它包括：外边距，边框，填充，和实际内容
元素的总宽度 = 左外边距 + 左边框 + 左内边距 + 宽度 + 右内边距 + 右边框 + 右外边距
元素的总高度 = 上外边距 + 上边框 + 上内边距 + 高度 + 下内边距 + 下边框 + 下外边距
四.CSS3新特性
1.边框
border-radius:用于创建圆角
#border{
width: 100px;
height: 100px;
background-color: red;
border-radius: 5px;
}
2.盒子阴影
box-shadow:用来添加阴影
box-shadow:阴影类型 水平阴影位置 垂直阴影位置 阴影模糊距离 阴影大小 阴影颜色;
示例：
box-shadow: inset 2px 2px 2px 2px red;
3.CSS3渐变
线性渐变—Linear Gradients:颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
linear-gradient(渐变方向, 颜色1, yanse2, ..., 颜色n)
示例：
.block1 {
/* 从上到下的线性渐变： */
background: linear-gradient(red, blue);
}
.block2 {
/* 从左到右的线性渐变：*/
background: linear-gradient(to right,red, blue);
}
.block3 {
/* 从左上角到右下角的线性渐变：*/
background: linear-gradient(to bottom right, red , blue);
}
径向渐变—Radial Gradients:圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
radial-gradient(center, shape size, start-color, ..., last-color);
示例：
.block1 {
/* 颜色结点均匀分布的径向渐变：*/
background: radial-gradient(red, green, blue);
}
.block2 {
/* 颜色结点不均匀分布的径向渐变： */
background: radial-gradient(red 5%, green 15%, blue 60%);
}
.block3 {
/* 形状为圆形的径向渐变：*/
width: 600px;height: 400px;
background: radial-gradient(circle, red, yellow, green);
}
4.文本效果
text-shadow:向文本添加阴影
text-overflow:当文本溢出包含元素时发生的事情
超出部分显示省略号
white-space:nowrap 文本不会换行，在同一行继续
overflow:hidden 溢出隐藏
text-overflow:ellipsis 用省略号来代表被修剪的文本
/*文本阴影与盒子阴影的区别在于：文本阴影无内外之分，且文本阴影没有阴影大小的设置*/
text-shadow: 2px 2px 2px red;
/*文本溢出时不换行*/
white-space: nowrap;
/*元素溢出部分隐藏掉*/
overflow: hidden;
/*文本溢出部分使用省略号显示*/
text-overflow: ellipsis;
5. 字体
@font-face {
font-family: 必需。规定字体的名称
src: 必需。定义字体文件的 URL
font-weight: 可选。定义字体的粗细。默认是 "normal"
font-style: 可选。定义字体的样式。默认是 "normal"
}
6.变形
CSS3 变形是一些效果的集合。如平移、旋转、缩放、倾斜效果；每个效果都可以称为变形，它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
/*transform-function是一个变形函数，可以是一个，也可以是多个，中间以空格分开*/
transform:[transform-function];
6.1 平移
translate(x, y)：平移函数，基于X、Y坐标重新定位元素的位置
translateX(x)：表示只设置X轴的位移
translateY(y)：表示只设置Y轴的位移
/*transform: translate(20px, 30PX);*/
/*transform: translateX(20px);*/
transform: translateY(20px);
6.2 2D 缩放
scale(x, y)：缩放函数，可以使任意元素对象尺寸发生变化。当该函数只接收一个值时，表示同时设置X与Y的值
scaleX(x)：表示只设置X轴的缩放
scaleY(y)：表示只设置Y轴的缩放
/*transform: scale(0.5, 1.5);*/
/*transform: scaleX(0.5);*/
transform: scaleY(0.5);
6.3 旋转
rotate(degree)：旋转函数，取值是一个度数值。参数degree单位使用deg表示，参数degree取正值时元素相对原来中心顺时针旋转
transform: rotate(10deg);
6.4 倾斜
skew(x, y)：倾斜函数，取值是一个度数值。
skewX(x)：表示只设置X轴的倾斜
skewY(y)：表示只设置Y轴的倾斜
/*transform: skew(20deg, 60deg);*/
/*transform: skewX(45deg);*/
transform: skewY(45deg);
7. 过渡
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
CSS3 transition的过渡功能通过一些 CSS 的简单动作触发样式平滑过渡
transition:[transition-property transition-duration transition-timing-function transition-delay ]
transition-property：
过渡或动态模拟的 CSS 属性，为了方便，一般都指定all，表示所有属性
transition-duration：完成过渡所需要的时间，即从设置旧属性到换新属性所花费的时间，单位为秒
transition-timing-function：指定过渡函数
linear：规定以相同速度开始至结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
transition-delay：过渡开始出现的延迟时间。
正值表示元素过渡效果不会立即触发，当过了设置的时间值后才会被触发；
负值表示元素过渡效果会从该时间点开始显示，之前的动作被截断；
0是默认值，元素过渡效果立即执行
过渡效果的出发时机
伪类触发： :hover :active :focus :checked
媒体查询：通过@media属性判断设备的尺寸，方向等
JavaScript触发：用JavaScript脚本触发
#tran{
width: 200px;
height: 200px;
background-color: red;
/*宽度发生变化时就会触发过渡效果*/
transition: width .5s ease 0s;
}
#tran:hover{
width: 50px;
}
8.媒体查询
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype : 表示媒体类型
all：用于所有设备
screen：用于电脑屏幕，平板电脑，智能手机等。
media feature ：表示媒体功能
max-width：定义输出设备中的页面最大可见区域宽度。
min-width：定义输出设备中的页面最小可见区域宽度。
.box{
background-color: red;
height: 50px;
}
@media screen and (min-width: 700px){
.box{
width: 200px;
}
}
@media screen and (min-width: 900px){
.box{
width: 300px;
}
}
@media screen and (min-width: 1200px){
.box{
width: 400px;
}
}
五.网格布局
如上图，网格布局就是指通过水平和垂直创建的一种模式，可以在这个模式上排列元素，网格通常具有行和列以及间隙（列跟列之间的距离，gutter）。
fr（fraction ，片段）布局单位
fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。
repeat
CSS 函数表示轨道列表中的重复部分，可以更紧凑地写入列和行重复。
<div class="wrapper">
<div class="col">11</div>
<div class="col">12</div>
<div class="col">13</div>
<div class="col">14</div>
<div class="col">21</div>
<div class="col">22</div>
<div class="col">23</div>
<div class="col">24</div>
</div>
用网格创建一个布局，一行四列，每列等宽。
.wrapper {
/* 转化元素类型 */
display: grid;
/* 设置网格的间隙，包含了行和列，也可以使用grid-row-gap和grid-column-gap分开设置 */
grid-gap: 10px;
/* 设置每列的尺寸 */
grid-template-columns: repeat(4, 1fr);
}
repeat（4,1fr） 的作用，创建4列等宽的网格，每列 1fr 它们所占的空间量相等。也可以使用百分比依次设置每一列占比
六.flex 布局
1.Flex简介
Flex 是 Flexible Box 的缩写，意为"弹性布局"。采用 Flex 布局的元素，称为 Flex 容器（flex
container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项（flex item）
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。
Flex 项默认沿主轴排列。单个项占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 crosssize 。
2 容器的属性
以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
2.1flex-direction属性
flex-direction 属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row （默认值）：主轴为水平方向，起点在左端。
row-reverse ：主轴为水平方向，起点在右端。
column ：主轴为垂直方向，起点在上沿。
column-reverse ：主轴为垂直方向，起点在下沿。
2.2 flex-wrap属性
默认情况下，Flex 项目都排在一条线（又称"轴线"）上。 flex-wrap 属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap （默认）：不换行。
wrap ：换行，第一行在上方
wrap-reverse ：换行，第一行在下方。
2.3 flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
2.4 justify-content属性
justify-content 属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start （默认值）：左对齐
flex-end ：右对齐
center ： 居中
space-between ：两端对齐，项目之间的间隔都相等。
space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
2.5 align-items属性
align-items 属性定义项目在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start ：交叉轴的起点对齐。
flex-end ：交叉轴的终点对齐。
center ：交叉轴的中点对齐。
baseline : 项目的第一行文字的基线对齐。
stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
2.6 align-content属性
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around |stretch;
}
flex-start ：与交叉轴的起点对齐。
flex-end ：与交叉轴的终点对齐。
center ：与交叉轴的中点对齐。
space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch （默认值）：轴线占满整个交叉轴。
3. Flex 项的属性
以下6个属性设置在Flex 项上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
3.1 order属性
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
3.2 flex-grow属性
flex-grow 属性定义项目的放大比例，默认为 0 ，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3.3 flex-shrink属性
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-
shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
3.4 flex-basis属性
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。
3.5 flex属性
flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值： auto ( 1 1 auto ) 和 none ( 0 0 auto )。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
3.6 align-self属性
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为
auto ，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
总结
CSS差不多这些了，由于我才大一前端只学完到JavaScript，所以更新完JavaScript就结束前端的更新啦！
版权归原作者 多喝烧碱 所有， 如有侵权，请联系我们删除。