CSS
初识 css
css 全称 Cascading Style Sheets,层叠样式表
修饰网页样式并不是只有 css,当时有个强力竞争对手 svg,但是css的层叠性让它脱颖而出
目前 css3 只是某些模块升级到3,不是全部,有些模块已经升级到4了
官方文档
https://www.w3.org/TR/CSS22/propidx.html
中文文档
https://developer.mozilla.org/zh-CN/docs/Web/CSS
查看 css 属性可用性
css 属性变成标准 standard需要经过草稿 drafts、备选推荐、推荐这几个步骤;
谷歌一般会在草稿里看看哪些属性好不好用,好用就支持,而别的浏览器可能不怎 么做;
所以有时 css 有些属性出现兼容性问题
css 引入
html 三种引入 css:
- 内联样式
- 文档样式表
- 外部样式表
现代开发网页要结构与样式分离
外部样式表引入
- link 元素
- style 元素里@import
<style>
@import url();
</style>
link 效率高一点
css 引入 css
@import url();
css 文件编码
指定单个 css 文件编码
@charset "utf-8";
选择器
- 通配选择器
- 元素选择器
- 类选择器
- id 选择器
- 属 性选择器
- 组合
- 伪类
- 伪元素
通配选择器
通用属性的设置,比如
{
margin: 0;
padding: 0;
}
通配符 * ,但是一般列出需要使用这些通用属性的元素,因为*内部原理是在网页元素中做个遍历,给每个元素加上这些样式,这样可能影响网页运行效率,因为有些元素是不需要这些属性的
id 选择器
id 名一个页面只能有一个(规范)
类选择器
- 一个元素可以多个类选择器,空格分开
<h2 class="title">123</h2>
.title {
}
伪类选择器
动态伪类
- :link (a:link 未访问的链接)
- :visited (a:visited 已访问的链接)
- :focus (获取焦点时)
- :hover (a:hover 鼠标移动到)
- :active (a:active 点击未松手)
同时存在以上属性时,推荐这个顺序,不然会有很多问题
(女朋友看到lv包包后,haha 大笑)
:hover 和:active 也可以应用到其它元素上
应用
去掉 a 元素的焦点状态
a:focus {
outline: none;
}
或者
<a tabindex="-1"></a>
tabindex 可以调整 tab 选中元素的顺序
结构伪类
- :nth-child() 正着数
- :nth-last-child() 倒着数
- :nth-of-type() (例子:p:nth-of-type(2) 只数 p 元素,且是第 2 个子元素)
- :nth-last-of-type()
- :first-child
- :last-child
- :first-of-type
- :last-of-type
- :root 代表 html
- :only-child(父元素中唯一子元素)
- :only-of-type
- :empty
否定伪类
- :not()
除了()
目标伪类
- :target 用于锚点链接
属性选择器
<style>
[title] {
color: red;
}
</style>
<div title="div">123</div>
<p title="p">111</p>
div 和 p都有title 属性,其它属性同理
元素选择器
<h2>123</h2>
h2 {
}
伪元素选择器
常用伪元素
- ::before
- ::after
- ::first-line
- ::first-letter
::first-line
第一行
::first-letter
第一个字母
::before
在一个元素的内容之前 插入内容
span::before {
content: "123";
color: red;
}
<span>hhh</span>
hhh 前面多出123并且是红色
除了文字,还可以加图片
span::before {
content: url();
color: red;
}
<span>hhh</span>
::after
在一个元素的内容之后插入其它内容
注意:
- 伪元素可以看成是行内元素
- content属性不能少
组合选择器
后代选择器
div sapn {
}
间接后代和直接后代
子选择器
直接子代
div > span {
}
兄弟选择器
div + span {
}
交集选择器
1.同时符合两个条件的元素:div 元素、class="one"
div.one {
}
2.同时符合 3 个条件的元素:div 元素、class="one"、属性值 title="test"
div.one[title="test"] {
}
并集选择器
只要符合任一条件即可:div 元素或class="one"
div,
.one {
}
常用的 css 属性
- color,文字颜色,前景色更严谨
- font-size,文字大小
- background-color,背景颜色
- width/height,宽高
颜色
rgb 颜色空间
red: 0-255
green: 0-255
blue: 0-255
rgba
red: 0-255
green: 0-255
blue: 0-255
alpha: 0-1 透明度,0 完全透明
16 进制
两个一样写一个,缩小 css 体积
div 的 outline 属性
调试技巧
在开发者工具加上这段样式
div {
outline: 2px solid red !important;
}
可以清晰地看出网页的结构,并且可以知道哪一块用的div
line-height
文本的最小行高
行高:两行文字基 线baseline之间的间距
行距会等分
应用:
块级元素垂直居中
display
元素类型是浏览器赋予的,并且可以更改
display 常见 4 个属性可以更改
- block 变成块级
- inline 变成行内级
- inline-block 变成行内块(同时具备块级和行内级特点)
- none 隐藏
巩固练习:
- 邮箱下拉菜单
- 模拟百度分页列表
visibility
控制元素可见性,有 2 个常用值,
- visible
- hidden
区别display: none;
,它还占据空间,display 不占据
overflow
控制内容溢出的行为
- visible
- hidden
- scroll
cursor
鼠标样式
auto
default 跟随操作系统
pointer 小手
text 竖线
文字省略
三条件:
- 内容超出不换行(white-space)
- 内容超出不显示(overflow)
- 内容溢出结尾省略号(text-overflow)
white-sapce
内容超出是否换行
- normal 换
- wrap 不换
text-overflow
设置文字溢出部分行为
- clip 溢出裁剪
- ellipsis 溢出那行的结尾省略号表示
前提是 overflow 不为 visible
white-space: wrap;
overflow: hidden;
text-overflow: ellipsis;
文本属性
text-align
元素内容在元素中的水平对齐方式
- left
- right
- center
text-decoration
装饰文字的装饰线
- none 去除 a 元素默认下划线
- underline 下划线
- overline 上划线
- line-through 中划线(删除线)
letter-spacing
字母间距
word-spacing
单词间距
text-transform
大小写转化
- capitalize 首字母大写
- uppercase 全部大写
- lowercase 全部小写
text-indent
缩进
列表属性
- list-style-type 设置li 元素前面标记的样式(none 值用的多)
- list-style-image
- list-style-position
表格属性
- border-collapse
细线表格
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
</table>
table {
/* 单元格合并 */
border-collapse: collapse;
}
td {
border: 1px solid #000;
padding: 20px;
}
为什么要进行单元格边框合并?
给单元格设置边框时,单元格是紧挨着的,两个单元格会有重叠的部分,本来1px的重叠成2px,因此做出细线表格
border-collapse: collapse;
这个属性很重要
表单属性
去除 input 的 tab 键选中效果
input {
outline: none;
}
textarea 禁止缩放
textarea {
resize: none;
}
字体
font-size
字体大小
font-family
字体类型;
与操作系统有关系;
为了防止设置的字体操作系统不存在,一般设置多个,从左往右,找到为止;
font-weight
字体粗细
normal:400
bold:700
font-style
斜体
- normal
- italic 用字体的斜体显示(前提是这种字体支持斜体)
- oblique 文本倾斜
网络字体
要想使用 os 没有字体,怎么做?
<div class="box">我是是</div>
@font-face {
/* 命名 */
font-family: "zsf";
/* 路径 */
src: url();
}
.box {
font-family: "zsf";
}
常见字体种类
- ttf
- otf
- eof
- svg
- woff
字体图标
阿里巴巴字体图标库
在 font 文件夹里放需要字体
<span>对应字符串</span>
@font-face {
/* 命名 */
font-family: "zsf";
/* 路径,可多个,为了兼容 */
src: url();
}
span {
font-family: "zsf";
}
或者使用附带的css文件 (下载字体图标时有),link进来,就可以省去@font-face了,或者
<span class="iconfont icon-arrow"></span>
(可以去掉那对应字符串了,因为那 css 文件设置了伪元素::after,会自动加上图标对应的字符串编码)
使用图片方式比较
img 元素 | 网站重要组成部分 |
---|---|
background-image | 先加载 css 再解析 url;可以使用精灵图减少请求次数 |
iconfont 字体图标 | 字体图标放大时不会失真;也可以减少请求次数 |
CSS 特性
- 继承
- 层叠
继承性
何为继承?
一个元素要是没有设置某属性值,就继承父元素的值,有的话就用自己的
可继承的属性
不用死记硬背用多了就熟练了,直接查文档
https://developer.mozilla.org/zh-CN/docs/Web/CSS
那有些不支持继承的属性要是想继承呢?
- 100%
- inherit
注意
继承过来的是计算值,而不是字面值,在使用em 为单位就会区别出来了
层叠性
- css 允许多个相同名字的 css 属性层叠在一个元素上
基本层叠
后面覆盖前面(前提是同类型选择器)
带权重的层叠
选择器的权重
方便比较,数值不重要
权重高的生效
- !important 10000
- 内联样式 1000
- id 100
- 类、属性、伪类 10
- 元素、伪元素 1
- 通配符 0
比较的话也是从权重大的开始比较,有一样权重的就比数量
元素类型
根据元素能不能在同一行显示,html 元素主要分 2 类
- 块级元素
- 行内级元素
块级元素
- 独占父元素一行
常见:div、p、h1-h6、table、form、列表等等
行内级元素
- 多个行内 级元素可以在父元素的同一行中显示
常见:a、img、span、input、button 等等
元素之间的空格
只要是行内级元素之间都会有空格,产生的原因是代码的换行符
较好的解决方法:
给元素加 float
另一种分法
根据内容(是否浏览器会替换掉元素)类型,html 元素可以主要分 2 大类元素
- 替换元素
- 非替换元素
替换元素
元素本身没有实际内容,浏览器根据元素类型和属性,来决定元素的具体显示内容
常见:img、input、video 等等
非替换元素
与替换元素相反
宽高由内容决定
注意
"行内级元素不能设置宽高"这种说法是不准确的
比如常见的img 和 input,可以 设置宽高
行内级非替换元素不能生效的属性:
- width
- height
- margin-top
- margin-buttom
对行内级非替换元素特殊的属性
padding的上下(上下多出区域,但不占据空间)
border的上下(上下多出区域,但不占据空间)
盒子模型
每一个元素就是一个盒子
内容 content
min-width 最小宽度,确保内容能正常显示(尽管出现滚动条)
内边距 padding
内边距会撑开盒子
外边距 margin
margin 上下传递
如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素
<div class="box1"></div>
<div class="box">
<div class="inner"></div>
</div>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box {
width: 200px;
height: 200px;
background-color: orange;
}
.inner {
height: 100px;
width: 100px;
background-color: purple;
margin-top: 20px;
}
防止 margin 上下出现传递
- 给父元素设置padding-top/padding-bottom
- 给父元素设置border
- 触发 BFC(最有效)
BFC:block format context,类似于结界
如何触发 BFC?
- float
- 设置一个元素overflow为非 visible
建议
- margin 一般用来设置兄弟元素间
- padding 一般用来设置父子元素间
margin 上下折叠
垂直方向上相邻的 2 个 margin有可能会合并为 1 个 margin,这种现象叫collapse
防止 margin 上下折叠
- 只设置其中一个元素的 margin
段落之间设置 margin 折叠有妙用
边框 border
边框主要有三种属性:
- 宽度 width
- 样式 style
- 颜色 color
当边框远大于内容大小时,会出现一些有趣的形状
圆角 border-radius
值为50%(这里的**%是当前元素的(padding+border+width))时,就是圆**
盒子相关属性
box-shadow
盒子阴影
shadow= inset?&&<length>{2,4}&&<color>?
- <>:表示要具体的值
- {2,4}:2 到 4 位
- &&:且,对顺序没要求
- \?:有或没有
第一个 length:水平方向
第二个 length:垂直方向
第三个 length:模糊半径
第四个 length:延伸距离
阴影练习
text-shadow
文字阴影
类似盒子阴影
box-sizing
盒子尺寸
- content-box内容盒子(设置宽高时只是指定内容的宽高)
- border-box(设置宽高时是内容+内边距+边框的高度)
背景
background-image
设置元素背景图片
会盖在(不是覆盖)background-color 上面
可以设置多张,默认显示前面一张(其它图片按顺序层叠在下面)
img 和 background-image 都可满足需求,开发如何选择?
网页重要组成部分用 img
background-repeat
平铺
-
repeat-x
-
repeat-y
-
no-repeat
-
repeat
background-size
背景图片大小
- cover 覆盖整个盒子(拉伸图片),不保持宽高比
- contain 拉伸到较短一边为止,保持图片宽高比
- 值 1 个%只是水平方向,2 个%才有垂直
background-position
- 第 1 个值是水平方向
- 第 2 个值是垂直方向
- 如果只有 1 个值,另一个默认 center
css-sprite 精灵图(雪碧图)
是一种 css图像合成技术,将各种小图片合并到一张图片上,然后利用 css 的背景图定位来显示对应图片部分
好处
- 减少向服务器请求的数量,加快网页的响应速度,并减少服务器压力
- 减少图片总大小
雪碧图制作:
练习:
京东案例-多快好省
背景居中(无论屏幕大小多少,都能看到中间的主要内容,并且居中显示)
background-attachment
- local 背景会随着 box 内容滚动而滚动
- scroll 滚动浏览器时全部内容会随着浏览器滚动
- fixed 背景是固定的,不会