后盾人教程
2020-05-14 01:30 cascle 阅读(1946) 评论(0) 编辑 收藏 举报CSS 3 系列课程开课了，老铁快上车吧
一 引用CSS差别
link标签：外部
style标签：内联
style属性：嵌入式
注释：/* */
结尾：分号，不能省略
css导入其他css样式：
@import url（“path”）；
适合组件化设计
vscode支持less：安装easy less插件，写less自动生成css
vscode同步更新浏览器：按照live server插件，html文件里右键选择open with live server
玩透 CSS 3 选择器，网页元素任意操作
选择网页某个元素
选择器名 {
}
一 标签选择器
*：通配符，全部选择
h1：选择h1标签
h1,h2：并列选择h1和h2标签
一般用的少
二 类选择器：
.success：class属性为success的标签
三 ID选择器：
#content ：id属性为content的标签
id属性不仅给css用，也给js用
标签元素使用多类样式声明：属性中的各个选择器用空格分开
四 结构选择器：
h1 p：指定标签位置范围，h1标签里的后代p标签，空格代表每一层所有后代（所有选择器没有分隔符）
h1>p：h1的子元素p
h1 p~a：h1后代里p标签的兄弟a标签
h1 p+a：h1后代里p标签紧挨着的兄弟a标签
五 属性选择器
h1[title][id]：h1标签要含有title/id属性，类似jq的选择器使用
h1[title="a"]：h1标签要含有title属性，值要是a
内容值筛选：
title这样的属性，可以跟着^这样的符号，代表值开头要是什么，类似正则表达式
^：开头包含
$：结尾包含
*：含字符串
~：含单词
|：字符串开头或者用-连接
六 伪类选择器
选择元素的不同状态或者不确定存在的元素
a:link：a标签元素被点中后
目标：:target伪类，当元素被跳转到后则选中
根伪类：:root伪类，根元素
空元素：:empty伪类，没有内容的标签
七 结构伪类选择器
首尾元素伪类：:first-child, last-child，所有元素里的第一个/最后一个，是每一层级的；:first-of-type，:last-of-type，某类型元素的第一个/最后一个
唯一子元素伪类：:only-child，only-of-type
元素编号：:nth-child(索引)，索引为n代表所有，从1开始；even代表奇数，odd为偶数；-n+2：某类型前两个；nth-of-type
从元素尾部伪类：:nth-last-child；:nth-last-of-type
not排除选择器：h1>p:nth-child(-n-3):not(1)，排除元素。
八 表单伪类
比如input:disabled等，代表状态，enabled，focus，checked，required
九 文本伪类
::first-letter：第一个字符
::first-line：第一行
::after：在之后添加内容，定义内容属性
::before：在之前添加内容，定义内容属性
搞定CSS 3权重，写CSS样式更流畅
层叠样式，是不同的选择器效果附加到元素上。如果有冲突，要使用权重排列
一 id与class权重
id权重：100
class权重：10
二 权重计算
同类权重，后出现的覆盖前面的
标签/伪元素：1
属性权重：10
行内：1000
三 强制权重优先级
对属性的配置里后加!important
四 元素继承权重
子元素继承父级元素的样式规则
继承没有权重，是NULL
不是所有规则都可以继承，比如边框
五 通配符与继承博弈
通配符权重是0
0 > NULL
六 预处理器
less
sass
带你玩转 CSS 3 文本，打牢前端开发基础
一 字体
font-family：用逗号分隔多个字体类型
@font-face：定义字体，引入自带字体
二 字重与字号
font-weight：字重，粗细
font-size：字号，相对值是父级字体
em：相对单位，父级元素的font-size
三 颜色与行高
color：
line-height：一般是1.5em
四 组合定义与倾斜风格
font-style：italic
组合：用font：来写，有顺序要求
五 字符大小写转换
font-variant，text-transform控制
六 文本线条
text-decoration来添加上划线或者下划线
七 文本阴影
text-shadow
八 文本溢出与空白处理
white-space：pre，保留原样式空白
溢出：white-sapce：nowrap，加上overflow：hidden，text-overflow：ellipsis，溢出部分隐藏
九 文本对齐与缩进
对齐：text-align指定水平方向对齐，vertical-align指定垂直方向对齐，可以是数值也可以是枚举
缩进：text-indent：em单位比较好
十 排版模式
letter-spacing：字符间距
word-spacing：单词间距
排版方向：writing-mode指定从哪里开始写
word的排版基本都可以实现
CSS3 盒子模型全面掌握
指定顺序：上右下左
auto：自动值
外距：margin
居中定义：块级元素左右设为auto。margin ： 0，auto
边距合并：向上边距和向下边距，取最大的
负值：外边距负值，溢出，左边的向右边动
宽高：width，height
内边距：padding
尺寸限制：box-sizing：border-box，固定大小
元素边框：border-style：边线样式，border-width：粗细，border-color：颜色，border-top：联合设立上部
圆角控制：border-radius，可以是数值也可以是百分数
轮廓线：outline-style等，不占据空间
元素显示：display：none，隐藏；block：块元素，inline-block，行级块（可以定宽高）；inline：文本行
visibility：hidden，不可见但是占位置
overflow控制溢出：scroll，滚动条；auto，自动，hidden：隐藏
尺寸控制：width，height，min-width，max-height，可以是数值和百分数
fill-available：属性值，块级元素自动充满高度或者宽度，要加--webkit这样的前缀
fill-content：块级元素根据内容设定大小
max-content：自适应，自动设为最大大小属性
min-content：自动设为最小大小属性
全面掌握 CSS 3 背景与渐变应用技巧
背景颜色：background-color
背景图像：background-image：url（）
背景裁切：background-clip，content值为背景应用于内容区
背景重复：background-repeat，no-repeat不重复，repeat-x在x轴重复
滚动：background-attachment，fixed为固定，比如应用于水印图片
位置：background-position，top right center等值，也可以是百分数，也可以是100px之类的数，也可以是负值
尺寸定制：background-size，可以是百分数，auto数值，cover，contain（会有留白）
多图：backg-image用逗号间隔多个图片
组合：background一句话定义多个属性
盒子阴影：box-shadow，
背景色激变：保存一像素图片，然后重复；linear-gradient()这个是线性渐变函数，可用于background
径向渐变：用函数radial-gradient（）
镜像标志位：标志位指定渐变开始结束的点，在渐变函数的颜色部分后边直接指定，控制渐变的范围
颜色渐变中间阈值：渐变过渡中间点，隔在颜色之间，控制渐变色占的比例
渐变重复：repeat-linear-gradient()
使用 CSS 3 操作数据内容样式，CSS没那么简单哟
数据使用表格或者列表展现
section，ul，li可以用display指定为table-header-group，table-row-group，table-row，table-cell
表格标题：caption标签
对齐：文本用文本对齐，表格用块对齐方式
表格颜色：与div差不多
表格背景：与div差不多
细线表格：border-collapse，设置collapse
间距：border-spacing
空白单元格：empty-cells：可以是hide
细线无边框：table标签的border：none
数据表格：tr：hover，鼠标放在表格上，cursor：pointer，鼠标形状
列表符号：list-style-type，list-style-image
列表符号多图背景：li等标签可以直接使用background-image
after，before
：：after
：：before
content指定内容，attr读取属性
