CSS(cascading style sheets)
是一种标记语言,层递样式表。
选择器 |属性 |值(键值对)
选择器 键值对 中间保留空格
p{color: red;}
css选择器的作用:
选择器的分类:基础选择器和复合选择器
基础选择器:标签选择器、类选择器、id选择器、通配符选择器
- 标签选择器
html标签名称 - 类选择器
单独选择其中一个或者几个标签 可指定多个类名
(样式点定义 结构类调用 一个或多个 开发最常用)
class=.
类名{属性:值;} - id选择器(只能调用一次 经常和JavaScript一起使用)
html 以id
属性来设置id选择器,css中的id选择器用#
来定义 - 通配符选择器
用*
来定义选中页面所有元素 特殊场景使用
* { margin: 0; padding: 0;}
CSS font(字体) 字体系列
font-family: '微软雅黑',Ariel;
font-family: 'Times New Roman', Times, serif;
字体大小
font-size: 20px; 像素一定有单位
字体粗细
font-weight: bold;粗体
font-weight: normal;正常
font-weight: bolder;ie+特粗体
font-weight: lighter; ie5+细体
提倡:number数值 ie5+ 100 200 300 400 不要单位
文字样式-风格
font-style: italic;斜体 em斜体
font-style: normal;正常
字体复合属性
( 节约代码 不能随意更换顺序 ,必须保留 font-size 和font-family)
font: font-style font-weight font-size/line-height font-family;
font: italic 700 15px 'Microsoft yahei';
CSS文本属性 外观
文本颜色
color: yellow; 英文
color: #f00;
color: #ff0000; 十六进制 最常用
color: rgb(255, 255, 255);RGB代码
对齐文本
水平调整位置
text-align: center;
text-align: right;
text-align: left;
装饰文本
text-decoration: none;默认 没有装饰线 最常用
text-decoration: underline; 下划线 a链接自带下划线 常用
text-decoration: overline; 上划线
text-decoration: line-through; 删除线
文本缩进
首行缩进
text-indent: 2em; 2个文字大小
text-indent: 10px;
行间距
上间距 文本高度 下间距 = 行高
line-height: 26px;
CSS引入方式
- 行内样式
内部样式表 嵌入式引用 也可以放到body中,控制整个页面中的样式 并没有完全分离
<style>
样式
</style>
- 行内样式表
用于修改简单样式 控制当前标签 行内式引入
<div style="color: red;"></div>
- 外部样式表(推荐)
单独写CSS样式文件 外部引用 控制多个页面
新建一个demo1.css
引入:
<link rel="stylesheet" href="demo1.css">
CSS 第二天
- Emmet语法
快速生成html结构
- div +tab 生成
<div></div>
- div*3 生成3个div
- 3.父子级的关系 用ul>li
- 兄弟级的用 div+p
- 如果生成类或者id名字 直接写 .demo 或者#two tab键
- 如果生成div有顺序 可以用 自 增 符 号 ‘ . d e m o 自增符号 `.demo 自增符号‘.demo*6`
- 生成标签默认显示几个文字
div{我喜欢}*3
- 快速生成css
- 缩写生成
w100px +enter width:100px;
h200px +enter height:100px;
ti2em +enter text-indent:2em;
lh24px +enter line-height:24px; - 格式化代码
shift+alt+F / 右键单击 选择格式化代码
用户下面的setting.json 设置
"editor.formatOnType": true,
"editor.formatOnSave": true
CSS的复合选择器
包括:后代选择器、子选择器、并集选择器、伪类选择器等
- 后代选择器(重要)
元素1 元素2 { }
空格隔开 父亲加孩子/孙子/重孙子 - 子选择器
元素1>元素2{ 样式声明 }
最近一级子元素 亲儿子 - 并集选择器(重要)
元素1,元素2 {样式声明}
英文逗号分隔 和的意思 用于集体声明 - 伪类选择器
a:link
选择未被访问的链接
a:visited
选择所有已被访问的链接
a:hover
选择鼠标指针位于其上的链接
a:active
选择活动链接(鼠标按下未弹起的链接)
顺序按照 LVHA
:focus
用于选择选取获得焦点 input:focus
CSS元素显示模式
html元素一般分为块元素和行内元素两种。
块级元素:div h1-h6 p ul ol li
1.比较霸道自己占一行
2.高度宽度以及内边距 都可以控制
3.宽度默认是容器的100%
4.是一个容器盒子,里面可以放行内或者块级元素
注意:文字类元素不能再使用块级元素 p h1-h6
行内元素:span a strong em i del s ins u
1.一行可以显示多个
2.高度宽度 设置无效
3.默认宽度是他本身的高度
4.行内元素只能容纳文本或者其他行内元素
注意:链接里面不能再放链接了 a里可以放块级元素 a转换块级元素更安全
行内块元素:img input td 同时具有行内元素和块级元素的特点
1.和相邻行内元素在一行,但是会有空白缝隙 一行显示多个(行内)
2.默认它本身内容的宽度(行内)
3.高度 行高 外边距及内边距都可以控制(块级)
元素显示模式转换
display: block; 转换为块级元素
display: inline; 转换为行内元素
display: inline-block; 转换为行内块元素
截图小工具 Snipaste
1.F1截图 同时测量大小 书写文字
2.F3桌面置顶显示
3.点击图片 alt可以取色 按下shift可以切换取色模式
4.按esc取消图片显示
电脑自带:shift+win+s
垂直居中的代码
line-height:文字行高等于盒子的高度;
文字小于盒子高度偏上
文字大于盒子高度偏下
CSS的背景
背景颜色 背景图片 背景平铺 背景图片位置 背景图像固定
背景颜色
background-color:transparent ;
(透明)
background-color:pink;
背景图片
装饰性背景图片
background-image:none | url(地址);
小的话默认平铺的效果, none无背景
背景平铺
background-repeat: repeat ;
平铺默认
background-repeat: no-repeat ;
不平铺
background-repeat:repeat-x ;
X轴平铺
background-repeat:repeat-y ;
Y轴平铺
页面元素可以添加背景图片也可以添加背景颜色 只不过背景图片会压住背景颜色
背景图片位置
x,y坐标 可以使用方位名词或者精确单位
background-position: x y;
方位名词 前后两个值顺序无关
background-position: left top; == background-position: top left;
background-position: center right; == background-position: right center;
指定一个方位名词 第二个默认居中
background-position: right; 第一个右对齐 第二个垂直居中
background-position: top; 第一个顶部对齐 第二个水平居中
可以是数值 第一个是x 第二个是y (一个不设置 另一个居中)
background-position:20px 50px;
背景图像固定
background-attachment:fixed | scroll(默认)
背景复合写法
background:transparent url(imahe.jpg) no-repeat fixed top;(无固定要求顺序)
背景的透明写法
background:rgba(0,0,0,0.3);
background:rgba(0,0,0,.3);
0-1之间 透明度越高越厚
CSS三大特性
层叠性 、继承性、优先级
层叠性 : 就近原则,覆盖前面重复的样式;
继承性 : 子承父业,简化代码(text-、 font-、 line-、color);
body{
font:12xp/1.5 'Microsoft YaHei';
//1.5 就是当前元素文字大小 font-size的1.5倍 里面的子元素可以根据自己的文字大小自动调整行高
}
优先级:
继承/* (0,0,0,0) <元素选择器(0,0,0,1)<类选择器,伪类选择器(0,0,1,0)< ID选择器(0,1,0,0)<行内样式 style=““(1,0,0,0) <!important 重要的(无穷大)
范围越大优先级越小
复合选择器权重叠加问题 需要计算权重
0,0,0,1+0,0,0,1=0,0,0,2
0,0,0,1 +0,0,1,0=0,0,1,1
div ul li ---->0,0,0,3
CSS盒子模型
1.盒子模型(Box Model)组成
*border: 边框
border:border-width || border-style || border-color (顺序无规定)
border-width 边框粗细 PX
border-style 边框样式 (solid实线 dashed虚线边框 double 双实线 dotted 点线 none hidden)
border-color 边框颜色
注意:一个(四边) 二个(上下 左右) 三个(上 左右 下) 四个(分别设置)
边框会影响实际大小
padding:内间距
padding-top 上内边距
padding-right 右内边距
padding-left 左内边距
padding-bottom 下内边距
复合型写法:
padding:5px;
padding:10px 10px;
padding:10px 5px 6px;
padding: 12px 19px 5px 10px;
注意:一个(四边) 二个(上下 左右) 三个(上 左右 下) 四个(分别设置)
padding 会撑大盒子
如果说盒子本身没有指定width/height(不会继承)的属性 则此时不会撑大盒子大小
margin:外边距
margin-top 上外边距
margin-right 右外边距
margin-left 左外边距
margin-bottom 下外边距
margin 外边距典型应用:
让块级盒子水平居中: 1.盒子必须指定宽width 2. 盒子左右外边距设置为auto
常见写法:
margin-left:auto;
margin-right:auto;
margin:auto;
margin:0 auto;
**注意:**以上是块级元素书水平居中,行内元素或者行内块元素居中给其父元素添加text-align:center;
即可。
外边距合并
1.相邻块元素垂直外边距的合并
两个相邻的盒子 一个设置margin-top 一个设置 margin-bottom 最后取最大的值
尽量给一个盒子添加margin
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的边缘值。
解决方案:
为父元素定义一个上边框
为父元素定义一个内边距
为父元素添加overflow:hidden;
比如还有其他方法,浮动、固定、绝对定位、盒子不会有塌陷。
清除内外边距
list-style:none;去除圆点
不同网页元素有很多自带的默认的内外边距,不同浏览器也不一致。
* {
padding: 0; //清除内边距
margin: 0; //清除外边距
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级元素和行内元素就可以了。
PS基本操作
- 文件->打开 我们要测量的图片
- Ctrl+R 打开标尺,或者视图->视图
- 右击标尺,把里面的单位改为像素
- Ctrl++ 放大 Ctrl±缩小
- 移动图片 按住空格键 抓手工具
- 矩形选取 可以测量大小
- Ctrl+D可以取消选取 或者在旁边空白处点击 也可以取消选取
- 吸管工具 可以看颜色
CSS新增
圆角边框
盒子变成圆角
border-radius:length;
后面加数值(px)或者百分比
如果是正方形,想要设置为一个圆,把数值设置为宽带或者高度的一半即可,或者直接写50%
如果是个矩形,设置高度为一半就可以做圆角矩形
该属性是个简写属性,分别代表左上角 右上角 右下角 左下角
也可分开写 border-top-left-radius、 border-top-right-radius 、border-bottom-right-radius 、border-bottom-left-radius
盒子阴影
不占空间 不会影响其他盒子排列
box-shadow:h-shadow v-shadow blur spread color inset ;
h-shadow 必需 水平阴影的位置 x
v-shadow 必需 垂直阴影的位置 y
blur 可选 模糊距离 影子是模糊的还是实的
spread 可选 阴影尺寸 影子大小
color 可选 阴影颜色 rgba(0,0,0,0.3)
inset 可选 外部阴影outset(不能写 会无效) 改为inset
文字阴影
用于文本
text-shadow:h-shadow v-shadow blur color;
h-shadow 必需 水平阴影的位置 允许负值
v-shadow 必需 垂直阴影的位置 允许负值
blur 可选 模糊的距离
color 可选 阴影的颜色
CSS浮动
传统网页布局三种方式 普通流 、浮动、 定位
** 普通流(标准流/文档流)**
按照标签规定默认方式排列,最基本的排列方式
1.块级元素会独占一行,从上往下顺序排列
常用元素:div hr p h1-h6 ul li ol dl form table
2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则会自动换行。
常用元素:span a i em
浮动 float
可以改变元素标签默认的排列方式 可以让多个块级元素一行内排列显示
网页排列第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
选择器 { float : 属性值;}
属性值:
none 元素不浮动(默认)
left 元素左浮动
right 元素右浮动
浮动重难点
1.浮动元素会脱离标准流(不保留原先的位置)
2.浮动元素会一行内显示并且元素顶部对齐(中间不会有缝隙)
3.浮动的元素会具有行内块元素的特性
浮动元素经常和标准流父级搭配使用
小米布局案例
常见网页布局形式
样式布局案例
浮动布局中的注意点:
1.浮动和标准流的父盒子搭配
2.一个元素浮动了 理论上其余的兄弟元素也要浮动(浮动的盒子会对后面的盒子有影响 对前面的盒子没有影响)
思考:
1.有些父盒子 不给高度让子盒子自己撑开
2.父盒子没添加高度 浮动会导致无高度 影响下面的标准流 排版
解决办法:可以清除浮动
清除浮动
选择器 { clear:属性值 ;}
left 不允许左侧有浮动元素
right 不允许右侧有浮动元素
both 同时清除左右两侧浮动(最多只用)
清除浮动方法:
- 额外标签法 也称隔墙法 W3C推荐
在浮动元素末尾添加一个空的标签。<div style="clear:both;"></div>
或者其他标签<br/>
**注意:**最后一个标签必须是块级元素
- 父级添加overflow属性
父级overflow:hidden;
将其父级属性值设置为hidden auto scroll
切除漏出的部分
- 父级添加 :after伪元素(高级隔墙法)
.clearfix:after {
content: ""; //必须有
display: block; //必须转换
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
//ie6,7专有
*zoom: 1;
}
- 父级添加双伪元素
.clearfix:before,.clearfix:after {
content: "";
display: table;//模式转换成表格
}
.clearfix:after{
clear:both;
}
.clearfix {
*zoom: 1;
}
PS切图
-
jpg/jpeg 色彩效果好 产品类经常用
-
png 透明背景图片 png
-
gif 小动画
-
psd photoshop专用格式 直接从上面复制文字,获得图片还可以测量大小和距离
-
图层切图:1.选中图层 -> 右键导出为png 2.将两张或多张图层 ctrl+e 合并图层 ,然后右键导出为png
-
切片切图:1.直接用切片工具选中切图 ->选择存储为web所用格式-> 存储为jpg或者别的格式
-
PS插件切图:cutterman是photoshop插件 (要去PS必须是完整版不能是绿色版)
cutterman官网下载地址:https://www.cutterman.cn/zh
选择你要输出的图片格式,输入路径设置 ,选择图层直接导出。
如果图层多可以直接勾选合并图层导出。
CSS属性书写顺序
先定位,再大小,定文字,后特效。
学成在线案例
CSS定位
定位 = 定位模式 + 边偏移
1.定位模式:position属性
static | 静态定位 |
---|---|
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
2.边偏移
top | 顶端偏移量 px |
---|---|
bottom | 底边偏移量 |
left | 左边偏移量 |
right | 右边偏移量 |
static 静态定位(了解)
无定位方式 默认定位position:static;
按照标准流摆放位置,没有边偏移。 布局很少使用。
相对定位 relative (重要)
position:relative; top:200px; left:200px;
自恋型定位 按照自身原来位置为准,原来的位置保留不脱标,给绝对定位当爹。
绝对定位 absolute (重要)
相对于祖先元素来说(拼爹型)没有父元素 参照body 浏览器为准
position:absolute; top:200px; left:200px;
绝对定位脱离标准流,不保留原来位置,参照最近带有定位的元素。
子绝父相
父亲一定要保留位置,所以用相对定位。
孩子不需要保留位置,用绝对定位。
hotnew
固定定位 fixed(重要)
position: fixed; top: 20px; right: 200px;
固定于浏览器可视窗口内不变, 浏览器滚动时滚动元素位置不会改变。
脱离标准流不随滚动条滚动,跟父元素没有任何关系。
小技巧:如何固定在版心右侧位置。
left:50%走浏览器宽度的一半;:margin-right:往右走版心宽度的一半
粘性定位sticky(了解)
可视窗口为参照点移动元素。
粘性定位占有原先的位置。必须要添加top left right bottom其中的一个才有效。
与页面滚动搭配使用,兼容性差,ie不支持。
定位总结
定位:叠放次序
z-index:1
可以为正整数 也可以实负整数 ,默认auto 数值越大越靠上。
如果是属性值相同,后来者居上。数字后面不加单位。只有定位的盒子才有z-index属性。
如何给绝对定位的盒子实现水平居中(同理推出垂直居中):
margin:0 auto;不可以居中,需要用小算法:
left:50% ;浏览器宽度的一半。 margin-left:—盒子宽度的一半。
定位的特殊用法
1.行内元素添加固定或者绝对定位,可以直接设置高度和宽度。
2.块级元素添加绝对或者固定,如果不给宽度或者高度,默认大小是内容的大小。
浮动元素、绝对定位(固定定位) 元素都不会触发外边距合并的问题。
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)。
但是绝对定位或者固定定位会压住标准流所有的内容包含文字。
浮动最初是为了做文字环绕效果的,文字会围绕浮动元素。
元素的显示与隐藏
display
搭配js可以做网页特效
display:none; 隐藏对象(重点) 不保留原来位置
display:block;显示元素
visibility 可见性
inherit 继承
visible 可见
hidden 隐藏 保留原来位置
collapse 表格合并
overflow 溢出
溢出部分直接截除,不显示
visible 显示 默认 不剪切内容不添加滚动条,clip属性将失效
auto 此为body和textarea的默认值。剪切内容时在需要时添加滚动条
hidden:不显示超过对象尺寸的内容
scroll:溢出部分总是显示滚动条
如果有定位的盒子请慎用overflow:hidden;它会隐藏多余部分
CSS高级技巧
精灵图
减少服务器压力 有效减少服务器接收和发送次数,,提高网页加载速度。CSS精灵技术(CSS Sprites 、CSS雪碧),将网页中小图片整到一张大图片上这张图就是精灵图或者雪碧图。
移动背景图片位置,使用background-position
默认左上角
移动的距离就是这个目标图片的X与Y轴 注意网页中的坐标有所不同。
缺点:图片文件较大,图片放大缩小会失真。一旦图片制作完毕想更换十分复杂。
字体图标 iconfont
轻量级:比图像小很多,一旦字体加载了,图标会马上渲染出来,减少服务器压力。
灵活性:本质属于字体:可以换颜色,字体,变换大小与位置,透明效果、旋转。
兼容性:几乎支持所有浏览器。
无法替代 只是提升和优化。结构样式简单用字体图标。
字体图标下载:
iconmoon字体库:http://iconmoon.io
阿里iconfont字体库:http://www.iconfont.cn/
下载完毕后 我们保存好压缩包 解压 使用,引入。
把fonts文件夹放到HTML的旁边
用css引入 字体文件
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?ylz1cb');
src: url('fonts/icomoon.eot?ylz1cb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?ylz1cb') format('truetype'),
url('fonts/icomoon.woff?ylz1cb') format('woff'),
url('fonts/icomoon.svg?ylz1cb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
字体图标的追加
在压缩包中找到selection.json文件重新上传。
CSS三角
width: 0;
height: 0;
border-top: 10px solid pink;
border-bottom: 10px solid blue;
border-left: 10px solid skyblue;
border-right: 10px solid greenyellow;
border: 10px solid transparent;
border-bottom-color: greenyellow;
CSS用户界面样式
鼠标样式
cursor:pointer; 小手
default:默认小白
move:移动
text:文本
not-allowed:禁止
轮廓线outline
取消input和textarea的轮廓蓝色线
outline:none;
outline:0;
防止文本域拖拽resize
textarea:最好在一行上来写 要不然会有空格
resize:none;
vertical-align属性应用
图片和文字垂直居中 textarea行内块都可以用
解决图片底部空白缝隙:
1.给图片添加vertical-align:middle top bottom 等 (提倡使用)
2.把图片转为display:block; 不过会破坏布局。
溢出的文字省略号显示:
单行文本溢出怎么用省略号:
1.强制一行内显示文本:white-space:nowrap;(默认normal自动换行)
2.超出的部分隐藏:overflow:hidden;
3.文字用省略号替代超出的部分:text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
多行文本怎么用省略号:
有较大的兼容性问题,适合于webkit 浏览器或移动端 。
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
弹性伸缩盒子模型显示:display:-webkit-box;
限制在一个快元素显示的文本的行数:-webkit-line-clamp:2;
设置或检索伸缩盒对象的子元素的排列方式:-webkit-box-orient:vertical;
margin负值的运用:
margin-left:-1px;把边框盒子解决掉
鼠标经过某个盒子 需要提高当前层级使用relative ,如果有其他定位需要使用z-index来提高层级。
文字围绕浮动元素
左侧加浮动 文字围绕图片
行内块元素巧妙运用
见案例
css 三角强化
见案例
CSS初始化
每个网页都必须进行css初始化。也称为css reset
新增 HTML5 和CSS特性
如何创建BFC
body 根元素
- 浮动元素:float 的值不是none*
2.position 的值不是static 或者时relative — position (absolute、fixed)
3.display 的值时inline-block、 flex 或者是inline-flex*
4.overflow 除了 visible 以外的值 (hidden、auto、scroll) (好用) 溢出盒子边框内容隐藏padding 还存在。
作用:1.取消盒子margin塌陷 2.阻止元素被浮动元素覆盖