后盾人教程
2020-05-14 01:30 cascle 阅读(1921) 评论(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读取属性