@font-face {
font-family: "myFont";
src: url("myFont.ttf");
}
/*
在资源文件中放置你的字体,在开头的时候就声明字体名字和路径
浏览器就会下载运用,在其后可以设置运用它
*/
#fontAttribute{
font-family: myFont,Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: lighter;
text-transform:capitalize;
text-decoration: overline;
text-shadow: 1px,1px,1px,yellow;
text-align: left;
line-height: 2;
letter-spacing: 1px;
word-spacing: 2px;
font-kerning: none;
text-indent: 2px;
word-break: keep-all;
text-align: center;
hyphens: auto;
}
/*
font-family 字体栈,将按照一个个字体进行检索,使用被匹配的哪个字体
font-size 字体大小,其中em为相对于父元素的字体大小,1em表示与父元素一致 rem是相对于根元素,不是父元素 px是像素
font-style 字体样式,normal代表如果是斜体则取消斜体,italic斜体,oblique倾斜(斜体不作用,用普通文字的倾斜版)
font-weight border比父元素的粗体更粗一些,lighter更细点
text-transform 转化为小写 capitalize: 转换所有单词让其首字母大写。 lowercase,uppercase
full-width: 将所有字形转换成固定宽度的正方形,类似于等宽字体,允许对齐。拉丁字符以及亚洲语言字形(如中文,日文,韩文)
text-decoration line-through 线穿过字体中间 overline underline decoration还有color等选项
text-shadow 文字阴影,水平垂直偏移以及模糊半径 颜色 可设置多个阴影,用逗号隔开
text-aligh 文本对齐方式 justify: 使文本展开,改变单词之间的差距,使所有文本行的宽度相同。你需要仔细使用,它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个,你也应该考虑一起使用别的东西,比如 hyphens,打破一些更长的词语。
line-height 行高,纯数字以倍数呈现
letter-spacing 字母的间距
word-spacing 单词的间距
font-kering 开关字体的间距
text-indent 指代第一行空留多少空间
word-break 是否打断单词
text-aligh-last:最后一行的对其方式
hyphens 开启或关闭连字符
*/
/*
list 存在有序和无序,时常用它来做一些导航栏之类的东西,移动显示不同的等等,因为它有很多子项
*/
#ulAttribute{
list-style-type: disc;
list-style-image: url('../images/picture.png');
list-style-position: outside;
background-image: url("../images/picture.png");
background-position: 100% 50%;
background-size: 10px 10px;
background-repeat: no-repeat;
background-color: aqua;
}
/*
list-style-type 选择一些前缀 如果设置了背景,可以通过none来关闭
list-style-image 可以选择图片前缀,但是无法修改很多参数,因此不推荐,改为调背景
list-style-position inside则看作是文本的一部分,对其文本。 而outside则作为单独的一部分,对其自己
background-image 设置背景图片
background-position 设置图片位置,上面是设置在左上角 如果第一值是100%,则在右侧
background-size 设置背景大小
background-repeat 一般设置的背景会一值重复,直到填充完毕,因为只需前面表示,则不填充
在html中可以设置一些参数:
<ol start="4" reversed>
<li>Toast pitta, leave to cool, then slice down the edge.</li>
<li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li>Wash and chop the salad.</li>
<li value="3">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>
从4开始计数,反着记,上面输出为4323
也可以指定value,但是一定要是数字,道理我应该很容易理解
*/
a:link {
color: #265301;
}
a:visited {
color: #437A16;
}
a:focus {
border-bottom: 1px solid;
background: #BAE498;
}
a:hover {
border-bottom: 1px solid;
background: #CDFEAA;
}
a:active {
background: #265301;
color: #CDFEAA;
}
/*
链接的五种状态:
Link (没有访问过的): 这是链接的默认状态,当它没有处在其他状态的时候,它可以使用:link 伪类来应用样式。
Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。
Hover: 当用户的鼠标光标刚好停留在这个链接,它可以使用 :hover 伪类来应用样式。
Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候,或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。
Active: 一个链接当它被激活的时候 (比如被点击的时候),它可以使用 :active 伪类来应用样式。
可以通过设置不同状态来提示用户
*/
/*
与盒子有关的
*/
#boxAttribute{
min-width: 200px;
max-width: 600px;
display: block;
flex: 1 300px;
box-sizing: border-box;
}
/*
盒子概要:
设置最大和最小宽度,当父容器的大于1280px时,则显示为1280px,小于480px时,则显示480px,拖动查看,其余则保持和父容器一直
max-width 理解应该是和图片本身有关,当父容器小于图片本身宽度时,图片保持和父容器一致
display:
block box 块盒 独占一行,和前后内容不连续
inline 随文档文本流堆放,可能会对自身产生影响
inline-block 也会随文本流堆放,但是不会影响其内部,且该盒不会被分成两行显示
flex 锁定在一行,每个框的大小和最大的框height和width保持一致,平均分配,给每一个盒子
flex:
当在父元素设置的时候无任何用处,默认为1,可以特殊定义子元素,flex 2,会按照比例分配宽度给每一个盒子
box-size设定和没设定border-box
未设定的框的宽度和高度等于content + padding + border。
设定的框的宽度和高度等于通过CSS设置在 content 的宽度和高度, padding 和 border 并没有添加到总宽度和高度上; 反而,他们占用一些内容的空间,使内容更小,并保持总体尺寸相同。
*/
#bkgrdAttribute{
background-image: linear-gradient(to bottom right,white,rgba(255, 255, 255, 0.534) 50%,black);
background-attachment: fixed;
background: url(image.png) no-repeat 99% center,
url(background-tile.png),
linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;
background-repeat: no-repeat,no-repeat,repeat;
}
/*
设置背景为渐变色:
to right,to top,to bottom是渐变颜色的方向,起始颜色和终点颜色,如果颜色设置3个值的话,则会在由A-B-C
颜色可设置为多个值,同时也可指定颜色站点的位置如上
background-attachment:
scroll 自身内容框滑动和所有父元素,背景跟着一起动,显示的内容不变
fixed 当自身内容框滑动,背景不变,但是父元素滑动,自身不动,就在滑动看他这个图,想想知乎那个背景
local 自身滑动,跟着一起滑动,父元素滑动,本身不滑,整体一起动
设置多个背景,背景将按照顺寻进行层叠,例如上面的,最开始的图片将会叠到最上面,
同时相应的repeat也要设置多个值,其余设置顺序一样
*/
#borderAttribute{
border-radius: 10px;
border: 2px solid black;
width: 600px;
padding: 20px;
margin: 10px auto;
line-height: 3;
background-color: #f66;
text-align: center;
/* border-related properties */
border: 20px solid black;
background-clip: padding-box;
border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
border-image-slice: 40;
border-image-repeat: round;
}
/*
border-radius 创建边框圆角:
如果是两个值 10px / 20px则创建的是椭圆圆角
/* 1st value is top left and bottom right corners,
2nd value is top right and bottom left
border-radius: 20px 10px;
/* 1st value is top left corner, 2nd value is top right
and bottom left, 3rd value is bottom right
border-radius: 20px 10px 50px;
/* top left, top right, bottom right, bottom left
border-radius: 20px 10px 50px 0;
使用图片对边框进行修饰
首先对引入头像进行切片,slice以像素为单位,如上述图片为160*160
stretch:默认;侧面的图像被拉伸来填满边界。这通常看起来很糟糕和像素化,所以不推荐。
repeat:边图像被重复,直到边界被填满。根据具体情况,这可能看起来不错,但您可能会看到一些难看的图像片段。
round: 边的图像被重复,直到边界被填满,它们都被稍微拉伸,这样就不会出现碎片。
space:边图像被重复,直到边界被填满,每个拷贝之间添加了少量的间隔,这样就不会出现任何片段。这个值只在Safari(9+)和Internet Explorer(11+)中得到支持。
*/
button {
width: 150px;
font-size: 1.1rem;
line-height: 2;
border-radius: 10px;
border: none;
background-image: linear-gradient(to bottom right, #777, #ddd);
box-shadow: 1px 1px 1px black,
inset 2px 3px 5px rgba(0,0,0,0.3),
inset -2px -3px 5px rgba(255,255,255,0.5);
}
button:focus, button:hover {
background-image: linear-gradient(to bottom right, #888, #eee);
}
button:active {
box-shadow: inset 2px 2px 1px black,
inset 2px 3px 5px rgba(0,0,0,0.3),
inset -2px -3px 5px rgba(255,255,255,0.5);
}
/*
第一个长度值是水平偏移量(horizontal offset )——即向右的距离,阴影被从原始的框中偏移(如果值为负的话则为左)。
第二个长度值是垂直偏移量(vertical offset)——即阴影从原始盒子中向下偏移的距离(或向上,如果值为负)。
第三个长度的值是模糊半径(blur radius)——在阴影中应用的模糊度。
颜色值是阴影的基本颜色(base color)。
*/
.multiply{
background-blend-mode: multiply;
}
/*
background-blend-mode 背景混合模式,叠加!
*/