网站做虚假宣传有没有做处罚,哪个跨境电商网站做的最好,html5响应式设计公司网站模板整站html源码下载,如皋建设网站目录
文章目录
前言 一.CSS简介
1.CSS选择器
2.CSS选择器语法
3.CSS样式引入
4.CSS 高级选择器
二.CSS样式
1.字体 编辑
2.文本
3. 背景 4.边框
5.边距
6.浮动
7.清除浮动
8.定位
9. 列表样式
10.伪类样式
三.盒子模型
四.CSS3新特性
1.边框
2.盒子阴影 …目录
文章目录
前言 一.CSS简介
1.CSS选择器
2.CSS选择器语法
3.CSS样式引入
4.CSS 高级选择器
二.CSS样式
1.字体 编辑
2.文本
3. 背景 4.边框
5.边距
6.浮动
7.清除浮动
8.定位
9. 列表样式
10.伪类样式
三.盒子模型
四.CSS3新特性
1.边框
2.盒子阴影
3.CSS3渐变
4.文本效果 5. 字体
6.变形
6.1 平移
6.2 2D 缩放
6.3 旋转
6.4 倾斜
7. 过渡 8.媒体查询 五.网格布局
六.flex 布局
1.Flex简介
2 容器的属性
2.1flex-direction属性
2.2 flex-wrap属性
2.3 flex-flow
2.4 justify-content属性
2.5 align-items属性
2.6 align-content属性
3. Flex 项的属性
3.1 order属性 3.2 flex-grow属性
3.3 flex-shrink属性
3.4 flex-basis属性
3.5 flex属性
3.6 align-self属性
总结 文章目录 前言一.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 stylecolor:red;font-size:20px;这是行内样式
/div
内部样式
style#demo{color:red;font-size:20px;}
/style
div iddemo这是内部样式
/div
外部样式
/*demo.css*/
#demo {color:red;font-size:20px;
}
!-- demo.html --
headlink typetext/css hrefdemo.css relstylesheet
/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。 浮动的元素与其他元素不在同一个层级清除浮动后浮动的元素就与其他元素在同一个层级了
stylehtml,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 classcontainerdiv classblock1/divdiv classblock2/divdiv classblock3/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: 必需。定义字体文件的 URLfont-weight: 可选。定义字体的粗细。默认是 normalfont-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。
frfraction 片段布局单位
fr单位被用于在一系列长度值中分配剩余空间如果多个已指定了多个部分则剩下的空间根据各自的数字按比例分配。 repeat CSS 函数表示轨道列表中的重复部分可以更紧凑地写入列和行重复。
div classwrapperdiv classcol11/divdiv classcol12/divdiv classcol13/divdiv classcol14/divdiv classcol21/divdiv classcol22/divdiv classcol23/divdiv classcol24/div
/div
用网格创建一个布局一行四列每列等宽。
.wrapper {/* 转化元素类型 */display: grid;/* 设置网格的间隙包含了行和列也可以使用grid-row-gap和grid-column-gap分开设置 */grid-gap: 10px;/* 设置每列的尺寸 */grid-template-columns: repeat(4, 1fr);
}
repeat4,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就结束前端的更新啦
