手把手教小白学CSS3,一文就够了
常用CSS:
background-color: red; 背景色
font-size: 35px; 字体大小
font-family: ‘Microsoft YaHei’ ‘Times New Roman’, Times, serif; 字体 可以多个字体,通常给body指定
font-weight: bold; 字体加粗 最好写数字 100…900
font-style: italic; 字体倾斜 normal,让变正常
font: italic 700 16px ‘Microsoft YaHei’; 复合代码 严格按照font: font-style font-weight font-size/line-height font-family;,不需要的可以省略,必须保留font-size font-family
color: #ff0000; 文本颜色
text-align:center 文本对齐
text-decoration: underline; 文本装饰 下划线,删除线,上划线
标签选择器:p { color: green; } 全部选择
类选择器:.red { color: red; }
id选择器:#pink { color: pink; },
通配符选择器:* {},所有标签都改
body { font-size: 16px; },标题特殊,要给单独大小
字体复合属性:font: font-style font-weight font-size/line-height font-family;不需要的可以省略,必须保留font-size font-family
装饰文本:text-decoration: underline; line-through;overline;
将a的下划线去掉:a { text-decoration: none; }
文本首行缩进:text-indent: 20px; 两个文字:text-indent: 2em;
行间距:line-height: 26px;上间距+文本高度+下间距
CSS引入方式:
内部样式表(理论上可以放到任何地方,通常在head),
行内样式表,直接在标签里写
外部,引入css文件
div居中两边对齐:
.duiqi {
margin: auto;
width: 992px;
}
Emmet语法:
! 生成骨架
div+tab,快速生成标签
div*10
父子关系:ul>li
兄弟关系:div+p
.nav+tab 直接出来
#banner
p.one
.demo KaTeX parse error: Expected '}', got 'EOF' at end of input: …{我不喜欢男人}*5 div{} 5
快速生成CSS:简写
w100 width: 100px;
vscode自动化对其:左下角->设置->文本编辑器->格式化->Format On Save
复合选择器
后代选择器:
ol li a
.nav li a
子选择器:亲儿子元素
.nav>a
并集选择器:选择多组标签,逗号分隔,任何选择器都可以并集
div, p {
color: pink;
}
伪类选择器:用冒号表示:比如:hover,:first-child
链接伪类:
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接
/ 未访问过的链接 */
a:link {
color: #333;
text-decoration: none;
}
/* 访问过的链接 */
a:visited {
color: orange;
}
/* 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 选择鼠标正在按下,没有弹起的链接 */
a:active {
color: green;
}
确保生效:LVHA顺序 a:link a:visited a:hover a:active,记忆法LV包包hao
a标签要单独给样式,常用:先给a样式,然后a:hover.
:focus:获取焦点的表单元素,input:focus{}
元素显示模式:以什么方式进行显示.
块元素:
-
- ,
是最典型的块元素.
特点:独占一行,高宽内外边距都可控制,默认父级宽度100%,是一个容器及盒子里面可以放行内或者块元素.
注意:文字类元素内不能放块元素.
行内元素:,最典型的行内元素,也叫内联元素.
特点:一行可显示多个,设置高宽无效,默认宽度是本身内容的宽度,只能容纳文本和其他行内元素.
注意:链接里不能再放链接,a可以放块级元素,转换为块级最安全.
行内块元素:
特点:和相邻行内元素在一行上,之间有空隙,一行可以显示多个,默认宽度是本身内容宽度,高度行高外边距内边距都可以控制.
元素显示模式转换:
*行内转块:display:block
块转行内:display: inline;
*转为行内块:display: inline-block;
截图小工具:snipaste
小米侧边栏:
文字垂直居中,height: 40px;line-height: 40px;行高等于盒子高度
CSS的背景:既可以有图片也可以有背景颜色,图片盖住背景颜色
背景颜色:background-color
背景图片:background-image
背景平铺:background-repeat:no-repeat(默认)
*背景图片位置:background-position:x y;
方位名称:顺序不影响 background-position: center top;默认x顶部,y水平居中
精确单位:background-position: 20px 50px;//x一定是20,y一定是50
混合单位:background-position: 20px center;x,y
背景图像固定(背景附着):background-attachment:scroll||fixed
背景复合写法:没有顺序要求,约定方式:颜色,地址,平铺,滚动,位置
background: #000 url(img/97768752390746.jpg) no-repeat fixed center top;
背景色半透明:background: rgb(0, 0, 0, 0.2);
- ,
CSS三大特性:
层叠性,就近原则
继承性,继承父亲的某些样式,和文字相关text-…
行高继承,可以不跟单位font: 12px/1.5 ‘Microsoft YaHei’;
如果div font-size: 14px;当前div行高21像素
优先级:多个选择器,!important>行内样式>ID选择器>类选择器>元素选择器>继承或者*
无穷大>1000 > 0100 > 0010 > 0001 > 0
权重叠加:实际是green
ul li {
color: green;//0,0,0,1 + 0,0,0,1 = 2
}
li {
color: red;
}
盒子模型
网页布局过程:核心本质,用CSS摆位置.
1.网页元素基本都是盒子
2.CSS设置好盒子样式,摆放到相应位置.
3.放盒子里装内容.
组成:边框,外边距,内边距,实际内容.border content padding margin
边框:
border-width: 5px;
/* 实线边框 /
border-style: solid;
/ 虚线 /
/ border-style: dashed; /
/ 点线 /
/ border-style: dotted; */
border-color: pink;
边框简写:border: 1px solid red;没有顺序
边框分开写法:
border-top: 5px solid pink;
border-bottom: 10px dashed purple;
安装eclipse快捷键,搜索Eclipse keymap
表格的细线边框,collapse倒塌 记忆技巧:col 共同 + laps 滑,滑走 + e → 一起滑落 → 倒塌
border-collapse:collapse //合并相邻的边框
内边距:padding 填充,会增大盒子,解决方法,宽高减去相应距离
padding-left: 20px; padding-top: 30px;padding:5px 10px 15px 20px 上后下左
如果盒子没有指定宽高属性,padding不会撑开盒子大小。
外边距:margin 边缘,控制盒子与盒子之间的距离
简写模式参考padding
外边距块级盒子水平居中,盒子必须指定宽度,左右外边距设置为auto:margin: auto;
行内元素和行内块,让父亲text-align: center;
外边距塌陷:父元素有上边距同时子元素也有,此时父元素会塌陷较大的外边距。
解决:
1.给父元素一个上边框border: 1px solid transparent;
2.父元素设置内边距:padding: 1px;
3.为父元素overflow: hidden;溢出
清除内外边距:
- {
padding: 0;
margin: 0;
}
行内元素尽量只设置左右的内外边距,上下不起效果
li前面的小圆点去掉: list-style: none;
圆角边框:border-radius:length;
让盒子变为圆形:border-radius: 50%;圆角矩形:宽的一半
四个角分别加:border-radius: 10px 20px 30px 40px; 左上,右上,右下,左下
分开写:border-top-left-radius:10px
盒子阴影:box-shadow:h-shadow v-shadow blur spread color inset;
水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色 将外部阴影改为内部
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
文字阴影:text-shadow:h-shadow v-shadow blur color
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
CSS浮动
传统网页布局三种方式:
CSS摆盒子,标准流(普通流/文档流),浮动,定位。
标准流:
1.块级元素独占一行,从上到下,div,p,h1-h6,ul,ol,form,table…
2.行内元素会按照顺序,从左到右,碰到父元素边缘自动换行。span,a,i,em
多个div在同一行
行内块会有间隙
浮动float,用于创建浮动框,直到碰到边缘。
float:none,left,right
网页布局第一准则:多个块级元素纵向排列找标准流,横向排列找浮动。
浮动特性:
1.浮动元素会脱离标准流,脱标。不保留浮动盒子。
2.浮动的元素会一行内显示并且元素顶部对齐。每个盒子都要设置float
3.浮动的元素会具有行内块元素的特性。inline-block,行内元素也是行内块。
浮动元素经常和标准流父元素一起用,先用父元素排列上下,
再用子元素浮动左右排列。
网页布局第二准则:先设置盒子大小,之后设置盒子的位置。小米官网为例
常见网页布局:
top,banner,main,footer
浮动盒子只会压到后面的标准流,要一起浮动 74-浮动注意点.html
父盒子不给高度,让子盒子撑开。
清除浮动,父盒子不方便给高度,子盒子不占位置,父盒子变为0,影响下面的子盒子。
清除浮动元素的影响,清除浮动之后就随着子高度。clear:left,right,both
闭合浮动,只限制在父元素内。
清除浮动方法:
1.额外标签法,隔墙法。优点通俗易懂,书写方便。缺点添加无意义标签,结构差。
最后一个子元素后新增块级元素,属性clear: both;
2.给父元素添加overflow:hidden,auto,scroll
3.:after伪元素法,父盒子后加了盒子,直接复制调用。百度,网易
.clearfix::after {
content: “”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
4.双伪元素清除浮动,小米,腾讯
.clearfix::before,
.clearfix::after {
content: “”;
display: table;
}
.clearfix::after {
clear: both;
}
学成在线案例
CSS书写顺序:
布局定位:display position float clear visibility overflow
自身属性:width height margin padding border background
文本属性:color font text-decoration text-align vertical-align white-space break-word
其他属性:content cursor border-radius …
页面布局整体思路:
1.确定版心,可视区,测量可得知
2.分析行模式,以及每个行中的列模式,是页面布局第一准则。
定位,可以让盒子压住其他盒子。
定位组成:将盒子定到某个位置,也是摆盒子,按照定位方式移动盒子。
定位 = 定位模式 + 边偏移。
1.定位模式:静态 相对 绝对 固定
position: static relative absolute fixed
2.边偏移
定位的盒子移动到最终位置,有top,bottom,left,right,4个属性,到四边的偏移量。
静态定位:默认无定位,position: static
按照标准流特性摆放位置,它没有边偏移,很少用到。
相对定位:相对于原来的位置说的(自恋型),不脱标,继续保留原理位置。
人已走,魂还在,position:relative
绝对定位:相对于祖先元素来说的(拼爹型),position:absolute;
1.如果没有祖先元素或祖先元素没有定位,则浏览器Document为准。
2.如果祖先元素有定位(相对,绝对,固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
3.不占用原来的位置。
子绝父相的由来,子用绝对对位,父用相对定位。
固定定位:固定于浏览器可视区位置,滚动时位置不会改变。
1.以浏览器可视窗口为参照点移动元素,跟父元素没有任何关系,不随滚动条滚动。
2.不占有原来位置。
小技巧:固定在版心右侧,left:50%,margin-left:版心宽度一半
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
left: 50%;
top: 20%;
margin-left: 400px;
width: 50px;
height: 150px;
background-color: skyblue;
}
粘性定位,sticky:相对定位和固定定位混合。
position:sticky;top:10px;
1.以浏览器可是窗口为参照点移动元素,固定定位特点。
2.占有原来位置,相对定位特点,必须添加top,left,right,bottom其中一个才有效。
定位叠放次序:z-index:1;数值越大盒子越靠上
不能加单位,只有定位盒子才有z-index属性
绝对定位水平垂直居中:
position: absolute;
/* 1.left走50% 父容器宽度的一般 /
left: 50%;
/ margin 负值 左边走自己盒子的一半 */
top: 50%;
margin-left: -100px;
margin-top: -100px;
定位特殊特性:行内元素绝对定位,可设置宽高
块级元素不设置宽高,宽高是内容宽高。
淘宝焦点图布局综合案例
1.大盒子类名:tb-promo 淘宝广告
2.里面放一张图片
3.左右两个按钮用链接,左箭头prev,右箭头next
4.底侧小圆点ul继续做,类名promo-nav
元素显示与隐藏,不再占有原来的位置。用的更多
display:none;隐藏对象
display:block;显示元素
visibility 可见性,隐藏后还占有原来位置
visibility:visible;元素可视
visibility:hidden;元素隐藏
overflow溢出,
overflow:visible;默认
overflow:hidden;超出部分隐藏,有定位超出盒子,就不要用了。
overflow:scroll;溢出的部分显示滚动条,不溢出也显示滚动条。
overflow:auto;在需要的时候添加滚动条。
P249-P259
CSS高级技巧
精灵图:有效减少服务器接收和发送的次数,提高页面加载速度,CSS精灵技术,CSS Sprites.
核心原理:将网页中的小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。
使用精灵图(sprites)的使用
1.针对背景图片,多个小背景图片整合到一张大图片中。
2.background-position
字体图标:轻量级,比图像小,并不能替代精灵技术.
1.下载字体图标
icommon字库:https://icomoon.io/
阿里iconfont字库:https://www.iconfont.cn/
把下载包中得fonts文件夹放入到页面根目录下,
2.引入,打开刚才iconmmon中的style.css中复制到block.
@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?m69ae5’);
src: url(‘fonts/icomoon.eot?m69ae5#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?m69ae5’) format(‘truetype’),
url(‘fonts/icomoon.woff?m69ae5’) format(‘woff’),
url(‘fonts/icomoon.svg?m69ae5#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;
}
3.追加字体图标
把压缩包里面的selection.json重新上传,重新替换。
P266-P273
常见布局技巧:
1.margin负值的运用
float: left;margin-left: -1px;
2.文字围绕浮动元素
.pic {
float: left;
width: 200px;
height: 113px;
margin-right: 5px;
}
3.行内块的巧妙运用
4.css三角强化
属性选择器:input[value],权重10
input[type=text]
div[class^=icon]
以某些元素结尾
section[class$=data]
包含某些值就选择出来
div[class*=ico]
伪类选择器
/* 1.选择li里面的第一个孩子, */
ul li:first-child {
background-color: pink;
}
/* 最后一个孩子 */
ul li:last-child {
background-color: pink;
}
/*第n个 */
ul li:nth-child(6) {
background-color: pink;
}
/* 选择奇 odd,偶even*/
ul li:nth-child(odd) {
background-color: #ccc;
}
/* 从0开始 ,n表示所有,2n是偶数*/
ol li:nth-child(2n) {
background-color: pink;
}
ol li:nth-child(2n+1) {
background-color: skyblue;
}
品优购项目规划
整体介绍
项目名称:品优购
移动端Web开发之流式布局
p391-p402
移动端基础
浏览器
国产浏览器Webkit内核,就像手机操作系统基于Android修改开发的一样。
手机屏幕现状
分辨率越来越大,常见尺寸5,6,7英寸
移动端调试方法
谷歌浏览器模拟手机调试
搭建本地web服务器,手机和服务器同一局域网,通过手机访问服务器。
使用外网服务器,直接IP或域名访问
视口,浏览器显示页面内容的屏幕区域
分为:布局视口、视觉视口、理想视口。
布局视口layout viewport
解决了早期PC端页面在手机上显示的问题,分辨率980px,PC网页多数能呈现,字很小。
视觉视口:visual viewport
可以缩放来看
理想视口:ideal viewport
对设备来讲,最理想的视口尺寸,根据网页宽度而设定。
需要添加meta视口标签,布局视口宽度与理想视口宽度一致。
meta视口标签
完美写法,缩放1,不允许用户缩放
二倍图
准备的图片比实际大一倍
背景缩放 background-size
图片的尺寸
background-size
移动端主流方案
1.单独制作,京东,淘宝
通过打开设备判断,显示移动端。
2.响应式,三星。
移动端初始化CSS用normalize.css
box-sizing: border-box;
/* 有了这句话,盒子模型变成了css3,padding和border不会撑大盒子了 /
去除高亮
a {
-webkit-tap-highlight-color: transparent;
}
加上如下属性才能给按钮和输入框自定义样式
input {
-webkit-appearance: none;
}
禁用长按页面的弹出菜单
img,a{-webkit-touch-callout:none;}
移动端页面布局
技术选型
单独制作
流式布局(百分比布局)
通过盒子宽度设置成百分比来根据屏幕宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
移动web开发使用的比较常见的布局方式。
max-width最大宽度(max-height最大高度)
min-width最小宽度(min-height最小宽度)
案例:京东移动端首页
1.技术选型
方案:单独制作移动页面方案
技术:布局采取流式布局
设置视口标签
flex弹性布局(强烈推荐)
传统布局:兼容性好,布局繁琐,局限性,不能在移动端很好的布局
flex布局:操作方便,布局极为简单,移动端应用很广泛,PC端支持差,IE11以后不支持。
布局原理:flexible Box弹性布局,任何一个容器都可以指定为flex布局
当父元素设为flex布局以后,子元素float,clear和vertical-align属性将失效。
flex容器,flex项目,总结,给父盒子添加flex属性来控制子盒子位置和排列方式。
给父亲添加属性
flex-direction:设置主轴的方向
主轴,侧轴,也就是行和列
row row-reverse column column-reverse
水平向右,垂直向下
justify-content:设置主轴的子元素排列方式
flex-start,从头开始
flex-wrap:设置子元素是否换行
默认是不换行的 nowrap
换行wrap
align-content:设置侧轴上子元素的排列方式(多行),单行无效
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头,再平分剩余空间
stretch设置子项元素高度平分父元素高度
align-items:设置侧轴上的子元素排列方式(单行),多行无效
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中(垂直居中)
stretch 拉伸(默认值)
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
/ 把设置主轴方向和是否换行(换列)简写 /
flex-flow: column wrap;
子项常见属性
flex子项目占的份数,子项目分配剩余空间,flex表示占多少份数
flex: 1;
align-self控制子项自己在侧轴的排列方式
div span:nth-child(3) {
align-self: flex-end;
}
order属性定义子项的排列顺序(前后顺序)
order: -1;//默认是0,要靠前写负数
携程网移动端首页
m.ctrip.com
搭建相关文件夹结构
css,images,upload,index.html
背景线性渐变
background:linear-gradient(起始方向,颜色1,颜色2,。。。)
默认方向是上下
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(top left, red, blue);
less+rem+媒体查询布局
em相对于父元素字体大小来说:width: 10em;
rem适配布局
rem单位:(root em)是一个相对单位,类似于em,em是父元素字体大小。
不同的rem的基准是相对于html元素的字体大小。
比如,根元素html设置font-size=12px非根元素设置width:2rem;则换成px表示就是24px.
rem的优点就是可以通过修改html中的文字大小来改变页面元素大小
媒体查询
Media Query是CSS3新语法
使用@media查询,可以针对不同的媒体类型定义不同的样式。
@media可以针对不同的屏幕尺寸设置不同的样式。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
目前针对很多苹果手机,android手机,平板等设备都用得到多媒体查询。
语法规范
@media mediatype and|not|only (media feature) {
CSS-Code;
}
用@media开头 注意@符号
mediatype 媒体类型
all用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕,平板电脑,智能手机等
关键字 and not only
and:可以将多个媒体特性连接到一起,相当于且的意思
not:排除某个媒体类型,相当于非的意思,可以省略
only:指定某个特定的媒体类型,可以省略
media feature 媒体特性 必须有小括号包含
width定义输出设备中页面可见区域的宽度
min-width定义输出设备中页面最小可见区域宽度
max-width定义输出设备中页面最大可见区域宽度
案例:根据页面宽度改变背景颜色
/ 1.媒体查询一般按照从大到小或者从小到大的顺序来 /
/ 2.小于540px 页面的背景颜色为蓝色 */
@media screen and (max-width:539px) {
body {
background-color: blue;
}
}
/* 3.540 - 970 我们的页面颜色改为绿色 and (max-width:969px) */
@media screen and (min-width:540px) {
body {
background-color: green;
}
}
/* 4.大于等于970 我们的页面颜色改为红色 */
@media screen and (min-width:970px) {
body {
background-color: red;
}
}
5.screen还有and必须带上
6.单位不能省略
案例:媒体查询+rem实现元素变化
引入资源:
Less基础
css的弊端,没有变量,函数,scope作用域等概念。
需书写大量没有逻辑的代码,冗余度较高
不方便维护拓展,不利于复用
没有很好的计算能力
非前端工程师,缺少css编写经验很难写出组织良好,易于维护的css代码项目
Leaner Style Sheets,是一门css拓展语言,也称为css预处理器。
Less中文网址:http://lesscss.cn/
常见的CSS预处理器:Sass,Less,Stylus
Less使用
Less变量
没有固定的值,可以改变的,颜色和数值经常使用。
@变量名:值;
1.变量命名规范,不能数字开头,不包含特殊符号,区分大小写
Less编译
Easy Less插件,可以直接编译。
Less嵌套
子元素直接写在父元素里面
.header {
width: 200px;
height: 200px;
background-color: pink;
a {
color: red;
}
}
伪类,伪元素,加&
a {
color: red;
&:hover {
color: blue;
}
}
Less运算,运算符左右两侧必须敲空格隔开
两个数有一个有单位,以此单位为主。
都有单位,以第一个单位为主。
@border: 5px+5;
div {
width: 200px - 50;
height: 200px * 2;
border: @border solid red;
}
img {
width: (82 / 50)rem;
height: (82 / 50)rem;
}
rem适配方案
技术方案1
less,引入其他less文件
@import url(“./common.less”);
//link是引入到html中
媒体查询
rem
技术方案2(推荐)
flexible.js
rem
响应式开发原理
针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。
bootstrap
布局容器,内置container类
container-fluid,宽度100%,流式布局,占据全部视口,适合单独做移动端开发。
栅格系统:grid systems,将页面布局划分为等宽的列
不满12行,空白,超出12行,多余一列另起一行
列偏移:两边对齐
.col-md-offset-*
列排序:col-md-push-* 和 col-md-pull-*
VW/VH
相对单位,相对于视口尺寸计算结果
vm:viewport width 1/100视口宽度
vh:viewport height 1/100视口高度
FlexibleJS
要是横屏,将vw替换为vh
原文地址:https://blog.csdn.net/qq_36324341/article/details/140725994
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!