[CSS]一文掌握
基础认识
CSS全称层叠样式表, 用来给HTML标签设置样式
语法规则
- CSS标点符号都是英文状态;
- 每一个样式键值对都要分号结尾;
引入方式
内嵌式: 写在style标签中, 通常写在head标签中
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red;}</style></head><body><p>随便一个标签</p></body></html>
外联式: 写在单独的.css文件中, 通过link标签在网页中引入
p {color: red;
}
行内式: 写在标签的style属性中
<p style="color: red;">随便一个标签</p>
基础选择器
选择器的作用就是选择标签, 然后设置样式
/* 标签选择器 */
标签名 {css属性:属性值;
}/* 类选择器 */
.类名 {css属性:属性值;
}/* id选择器: */
#id值 {css属性:属性值;
}/* 通配符选择器: */
* {css属性:属性值;
}
字体样式
字体大小:font-size (数字+px)
字体粗细:font-weight (正常400/加粗700)
字体样式:font-style (正常normal / 倾斜 italic)
字体系列:font-family ("Microsoft YaHei", 黑体, 宋体, 楷体, sans-serif)
文本样式
文本缩进:text-indent (数字+px / 数字+em)
文本水平对齐方式:text-align (left/ center/ right)
文本装饰:text-decoration
文本垂直对齐方式:
文本类型元素的垂直方向的排版根据基线调整
.box {/* 设置文本为基线对齐(默认) */vertical-align: baseline;/* 设置文本为顶部对齐*/vertical-align: top;/* 设置文本为中部对齐 */vertical-align: middle;/* 设置文本为底部对齐 */vertical-align: bottom;
}
可以解决:
- 文本框和表单按钮无法对齐的问题
- input和image无法对齐的问题
- div中的文本框, 无法贴顶的问题
- div不设置高度由image撑开, 此时image标签下面会存在额外间隙的问题
- 使用line-height让image标签垂直居中的问题
文本行高:line-height
- 作用: 控制一行的上下间距
- 取值: 数字+px 或 数字(当前字号的倍数)
- 单行文本垂直居中: line-height: 文字父元素高度
- 取消上下间距: line-height: 1
文本阴影:text-shadow
- h-shadow(必须, 水平偏移量,可以负值)
- v-shadow(必须, 垂直偏移量,可以负值)
- blur (可选,迷糊度)
- color (可选,阴影颜色)
- 阴影可以叠加设置, 每组阴影取值之间用逗号分隔
超出文本变点:
- 浮动布局:
- text-overflow:ellipsis; 文本超出变点
- white-space:nowrap; 文本超出不换行
- overflow:hidden; 超出部分隐藏
- 弹性布局:
- 给容器的父级设置:flex:1; width:0;
- 或者给容器设置具体宽度,
- 再给子级盒子设置三行代码;
- 多行文字
.ellipsis-2 {overflow:hidden; text-overflow:ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}
调式工具
使用调试工具可以帮我们快速调试样式或者定位样式问题
进阶选择器
复合选择器
/* 后代选择器(空格) */
/* 找后代 */
选择器1 选择器2 {css属性:属性值;
}/* 子代选择器 */
/* 找儿子 */
选择器1 > 选择器2 {css属性:属性值;
}/* 并集选择器(逗号) */
/* 谁和谁 */
选择器1 , 选择器2 {css属性:属性值;
}/* 交集选择器(紧挨着) */
/* 既是又是 */
选择器1选择器2 {css属性:属性值;
}
伪类选择器
/* 作用: 选中鼠标悬停在元素上的状态 */
div:hover {设置鼠标悬停时元素的状态
}
链接伪类选择器
/* 作用: 选中元素的不同状态 */
a:link {选中a链接未访问过的状态
} a:visited {选中a链接访问之后的状态
} a:hover {选中鼠标悬停的状态
} a:active {选中鼠标按下的状态
}
焦点伪类选择器
input:focus {用于选中元素获取光标时的状态,常用于表单控件
}check:checked {用于选中被勾选的复选框
}
属性选择器
通过元素上的html属性来选择元素,常用于input标签
例子: input[type="text"] { } 选中页面中所有的文本框
例子: input[value='123'] { } 选中页面中的文本框并且该文本框的value值是123
深度选择器:
父组件的样式需要影响子组件的样式时, 需要用到深度选择器, 达到样式穿透的效果
原生css: >>>
less写法: /deep/
scss写法: ::v-deep
emmet语法
帮助我们快速生成标签和选择器代码
背景属性
1.背景颜色:
代码:background-col
取值:关键字,rgb,rgba,十六进制
2.背景图片:
代码:background-image
取值:图片路径
3.背景平铺:
代码:background-repeat
4.背景位置:
代码:background-position: 水平方向 垂直方向;
取 值:
- 方位名词:(left center right) (top center bottom)
- 数字+px: 10px(水平向右) 10px(垂直向下)
5.背景图片大小:
代码:background-size:宽度 宽度;
取值:
- 数字px
- 百分比(相当于设置盒子自身的宽高百分比)
- contain(将背景图片等比缩放,直到不会超出盒子的最大)
- cover(将背景图片等比缩放,直到刚好填满整个盒子没有空白)
元素显示模式
1.块级元素
属性:display:block
特点:独占一行,宽度默认是父元素的宽度,高度有内容撑开。可以设置宽高。
例如:div、h、ul、ol、li、p
2.行内元素
属性:display:inline
特点:独占一行,宽度默认是父元素的宽度,高度由内容撑开。可以设置宽高。
例如:span、i、b、strong、em、tt、del、u、s、sub、sup 、a、img、select>option、input
3.行内块元素
属性:display:inline-block
特点:一行显示多个,可以设置宽高。
例如:input, textarea,button,select
说明:img标签具有行内块元素的特点
4.元素显示模式转换
display:block 转换为块级元素
display:inline-block 转换为行内块级元素
display:inline 转换为行内元素
5.嵌套规范
- 块级元素一般作为大容器使用, 可以嵌套任意标签,但是p标签不要嵌套块级元素
- a标签可以嵌套任意标签, 但是不要重复嵌套
CSS特性
继承性
子元素默认继承父元素的样式的特点。
可继承的常用属性:
1,color
2, font字体系列
3,text文本系列
4,行高
层叠性
1, 给一个标签设置不同的样式,样式会层叠,共同生效。
2, 给一个标签设置相同的样式,样式会覆盖,下方生效。(排除优先级问题)
优先级:
不同的选择器有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
公式: 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意:!important写在属性值前面,分号后面。
!important不能提升继承的优先级。
权重:( 0 , 0 , 0 , 0 )
行内 id 类 标签
PxCook
使用像素大厨测量设计图的尺寸和颜色, 方便的从psd文件中获取数据
- 通过软件打开设计图
- 打开软件
- 拖拽入设计图
- 新建项目
- 常用快捷键
- .放大设计图:ctrl 和 +
- 缩小设计图:ctrl 和 -
- 移动设计图:空格按住不放,鼠标拖动
- 常用工具
- 量尺寸
- 吸颜色
- 从psd文件中直接获取数据
- 切换到开发界面,直接点击获取数据
盒子模型
盒子模型由内容(conten),内边距(padding),边框(border),外边距(margin)组成
组成部分
内容:
- width和height属性设置内容区域的大小,取值为数字+px。
边框:
- border-width设置边框粗细,(数字+px)
- border-style设置边框样式,(实线solid/虚线dashed/点线dotted)
- border-color设置边框颜色,
内边距:
- padding: 数字px
- 常见取值:1个值对应四边,2个值为对应上下/左右,3个值对应上/左右/下,4个值对应上/右/下/左。
外边距:
- margin:数字px
- 常见取值 :1个值对应四边,2个值为对应上下/左右,3个值对应上/左右/下,4个值对应上/右/下/左。
- 单独设置: margin-left/right/top/bottom,分别设置盒子的对应移动。
自动内减
- 使用 box-sizing: border-box; 属性可以切换为IE模型
- IE盒模型的padding或者border不会撑大盒子, 而是自动在内容中减去
特殊现象
1.外边距折叠---合并现象:
场景1:垂直布局的块级元素,上下的margin会合并。
造成:两者之间的距离为2个margin中的最大值
解决:只给一个盒子设置margin值。
2.外边距折叠---塌陷现象:
场景2:互相嵌套的块级元素,子元素的margin-top会作用在父元素上。
结果:父元素一起往下移动。
解决:
1,给父元素设置border-top或者padding-top(分割父子元素的margin-top)
2,给父元素设置overflow:hidden
3,转换为行内块元素
4,设置浮动
3.内外边距失效---行内元素
- 水平方向的margin和padding生效
- 垂直方向的margin和padding失效
4.不会撑大盒子---块级元素
- 如果子盒子没有设置宽度, 默认宽度是父元素的100%
- 此时给子盒子设置左右的padding或者左右的border, 不会撑大盒子
结构伪类选择器
常用于查找某父级选择器中的子元素。
n的常见取值
伪元素
使用伪元素也可以创建网页内容, 一般页面中的非主体内容可以使用伪元素
语法
- 元素 :由html标签渲染的内容。
- 伪元素:由css模拟出的标签效果。
- 伪元素必须设置content属性才能生效
- 伪元素默认是行内元素
标准流
标准流又称文档流, 是浏览器在渲染内容时, 默认的排版规则
排版规则:
- 块级元素, 从上往下, 垂直布局, 独占一行
- 行内或行内块元素, 从左往右, 水平布局, 空间不够自动换行
浮动
浮动早期用来实现文字环绕图片效果, 后来逐步用于网页布局, 浮动的特点就是让垂直布局的盒子变成水平布局
属性名:float
属性值:
特点:
- 脱标: 脱离标准流
- 层级: 浮动元素比标准流元素高半级, 会覆盖标准流元素
- 浮动找浮动: 下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果:一行显示多个,可以设置宽高
- 居中:浮动元素无法通过text-align:center或margin:0 auto让元素本身水平居中
清除浮动:
浮动元素会脱标. 所以浮动元素就无法撑开标准流的块级父元素, 清除浮动就是为了解决这种影响
网页布局中, 父元素通常需要有高度, 不然会影响其他的元素
- 设置高度法:
- 给父元素设置固定高度, 但有些布局中不能固定父元素高度。
- 额外标签法:
- 给父元素的末尾添加一个块级元素, 给该元素设置 clear: both; 属性
- clear 是用于清除浮动属性, 取值为both(清除全部) 或 left(清除左浮动)或 right(清除右浮动)
- 单伪元素清除法:
- 用伪元素替代了额外标签, 可以视为固定写法, 直接给标签添加类名即可清除浮动
clearfix::after {content:'';display:block;clear:both;height:0;visibility:hidden;
}
- 双伪元素清除法:
- 能够应对复杂的浮动布局, 并且兼容性更好
.clearfix::before,
.clearfix::after {content:'';display:table;
}
.clearfix::after {clear:both;
}
- overflow清除法:
- 给父元素设置 overflow:hidden;属性, 原理是开启一个BFC
- BFC是块级格式化上下文, 是一块独立的渲染区域
- BFC 在计算高度时,内部浮动元素的高度也计算在内,所以BFC 的高度不会发生塌缩,就达到了清除浮动的效果。
定位
通过定位属性, 可以让元素自由的摆放在任意位置, 常用于盒子之间层叠的场景
定位:position
取值: static 静态定位 (标准流,不能通过方位属性进行移动)
relative 相对定位(根据自己之前的位置移动,用于小范围移动,不脱标)
absolute 绝对定位(默认相对浏览器可视区移动或最近的有定位的祖先元素移动。脱标)
fixed 固定定位(根据浏览器可视区域移动,用于屏幕固定)
偏移: 水平 left左 数字px
水平 right右 数字px
垂直 top上 数字px
垂直 bottom下 数字px
子绝父相
让子元素相对于父元素进行自由自动, 父元素使用相对定位, 子元素使用绝对定位
- 如果布局时, 父元素已经有了定位方式, 直接设置子元素绝对定位即可, 而不用修改父元素的定位方式
元素的层级:
1,不同元素的层级:定位 > 浮动 > 标准流
2,不同定位的层级:
- 相对定位, 绝对定位, 固定定位默认层级相同,
- 此时浏览器根据html结构显示元素,
- 下面的元素覆盖上面的元素 (下面的代码覆盖上面的代码))
3,更改元素层级:
- 属性名:z-index
- 属性值:数字,数字越大层级越高。
光标
通过css设置鼠标光标在元素上显示的样式
属性名: cursor
属性值
边框圆角
通过 border-radius 属性, 让盒子的角变得圆润, 支持数字+px 或者 百分之
溢出隐藏
控制盒子内容超出盒子的区域, 可以设置为隐藏/滚动条效果等
属性名: overflow
属性值
元素隐藏
让元素本身在屏幕中不可见
常见属性:
- visibility:hidden; (隐藏元素,在网页中占位置)
- display:none/block; (隐藏元素,在网页中不占位置)
- opacity: 0-1; (0表示完全透明,1表示完全不透明) (内容会一起变透明)
三角形
用css设置三角形, 利用盒子边框完成
步骤:
1,设置一个盒子 (可以是正方形)
2,设置四周不同颜色的边框
3,将盒子宽高设置为0
4,保留其中一个三角形,其他设置为透明
5, 通过调整不同边框的宽度, 调整三角尺的形态
精灵图
精灵图就是多张小图片合并成的一张大图片, 目的是减少请求次数, 提高网页加载速度
步骤
1,创建一个盒子
2,量取图片尺寸,将图片的尺寸设置给盒子
3,将精灵图设置为盒子背景照片
4,量取精灵图左上角坐标,分别 取负值 设置给盒子的背景坐标(background-position:x y;)
盒子阴影
给盒子添加阴影效果,
属性:box-shadow
取值:
例子: box-shadow: 0px 0px 10px #c3c3c3;
过渡属性
让元素的样式慢慢发生变化, 常配合hover使用
属性名:transition
取值:
- 过渡属性(all:全部可过渡属性过渡 或者 具体属性名:指定属性过渡)
- 过渡时长( 数字+s)
注意:
- 过渡需要:默认状态与hover状态有不同,才能用过渡效果。
- transition属性要给需要过渡的元素添加。
- 设置在不同状态中, 效果不同
- 给默认状态设置, 鼠标移入移出都有过渡效果
- 给hover状态设置, 鼠标移入有过渡效果, 鼠标移出没有过渡效果
开发规范
网站和网页
网页相当于纸, 网站相当于一本书, 多个网页整合在一起, 称之为网站
骨架结构
1.文档声明
<!DOCTYPE html>用于声明文档的类型, 告诉浏览器该网页的HTML版本, 不同版本的HTML遵循的标准不同,浏览器渲染的方式就所有不同
- DOCTPYE必须写在页面的第一行, 并且它不属于HTML标签
2.网页语言
<html lang="en">用于指定网页的语言环境, 可以帮助搜索引擎对网页进行归类
常见语言: zh-CN 简体中文 / en 英文
3.字符编码
<mete charset="UTF-8">用于设置网页的字符编码格式
- 作用: 不同的国家有不同的语言, 要让所有的语言在网页中都能正常显示, 就需要大家遵循同一套编码规范
- 原则: 保存和打开的字符编码要统一, 否则可能出现乱码
- 万国码: 开发中统一使用UTF-8字符编码, 这是国际化的字符编码, 收录了全球的语言文字
SEO标签
SEO全称搜索引擎优化, 旨在让网站在搜索引擎的排名靠前
1.网页标题标签:
<title>膏贴系列 | 外用膏贴 | 膏贴贴牌 | 膏药贴牌 | 膏贴OEM_河南裕海医药科技有限公司官网</title>
2.网页描述标签:
<meta name="description" content="河南裕海医药科技有限公司是一家集医疗器械、生物诊断试剂、高分子材料研发、医疗器械企业培训于一体的大型企业。公司旗下的贴膏主营产品包括消痛贴敷类、儿科功能类、妇科类等产品。公司坚持走科技创新之路,依靠我们创立的知识产权的高科技产品,来保证公司具有持续的发展潜力,公司高度重视以市场为导向,具有前沿领先技术的研发能力,公司有专业科研机构和人员从事创新的研究和开发工作,销售业务覆盖全国各地,经过10年的发展壮大,已成为全国销量第一的贴膏生产基地。">
3.网页关键词标签:
<meta name="viewport" content="河南裕海医药科技有限公司官网,医用冷敷贴,膏药贴膏贴牌,膏药贴牌,膏贴OEM">
ico图标
显示在标签页左侧的小图标, 一般使用.ico格式的图标
<link rel="shortcut icon" href="url" type="image/x-icon">
- ico图片放在根目录里面
- 快捷选中: link:favicon;
版心
版心就是设置一个宽度, 把页面内容约束在网页的中间, 使不同尺寸的屏幕都能完整的看到网页内容
/* 版心 */
.container {width:1240px;margin:0 auto;
}
补充:版心其他常用类名container, wrapper, w等
css书写顺序
不同的CSS书写顺序会影响浏览器的渲染性能, 推荐养成专业的书写顺序
- 基本原则就是从大到小的书写CSS代码, 先布局, 再外观, 再细节
- 推荐多用类+后代,选择器的总个数尽量不要超过3个
目录结构
完整的项目目录及文件结构, 良好的目录结构帮助我们高效的管理项目
- 新建项目根目录(英文命名)
- 根目录下新建images文件夹(固定使用的图片素材)(logo, 精灵图, 装饰图片)
- 根目录下新建uploads文件夹(临时使用的图片素材)(商品图, 占位图, 宣传图)
- 根目录下新建css文件夹
- 新建base.css文件(基础公共样式)(样式初始化)
- 新建common.css文件(重复使用的样式)(头部,底部)
- 新建index.css文件(首页样式)
- 根目录下新建index.html文件
- favivon.ico文件(一般放在根目录)
- 样式初始化代码
/* 样式初始化 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {margin: 0;padding: 0;
}* {box-sizing: border-box;
}body {/* 字体默认16px,行高1.5倍 */font-size: 16px/1.5;color: #333;
}ol,
ul {list-style: none;
}em,
i {list-style: none;
}a {text-decoration: none;color: #333;
}img {vertical-align: middle;
}input {border: none;outline: none;color: #333;
}/* 用clearfix类名清除浮动 */
.clearfix::before,
.clearfix::after {content: "";display: table;
}.clearfix::after {clear: both;
}.fl {float: left;
}.rl {float: right;
}