一、字体与文本相关样式
1. 字体相关样式属性
font：复合属性
color：①颜色的英文②十六进制颜色值③rgb()格式
font-family：可设置多个字体样式，浏览器会依次检索，找到可以用的字体样式
font-size(可以是相对字体大小也可以是绝对字体大小)：length为其中的一个常用属性值
font-size-adjust
font-stretch：横向拉伸
font-style：italic(字体倾斜)
font-weight：字体粗细
text-decoration：none 无下划线 underline 下划线 line-through 中划线 overline 上划线
font-variant：设置字母的格式 normal small-caps 对应的是正常的字体和小型的大写字母
text-shadow
(box-shadow：box-shadow: 2px 2px 4px red;
左右偏量 上下偏量 阴影的模糊度 阴影的颜色)
text-transform：none: 不转换
capitalize: 首字母大写
uppercase: 全部大写
lowercase: 全部小写
line-height：设置字体间的行高，负值可营造阴影效果
letter-spacing：设置字符间的距离
word-spacing：设置单词之间的距离
2. 颜色表示方式
颜色的英文单词
十六进制
rgb(r,g,b) 三原色混合原理
rgba(r,g,b,a) a代表透明度
hsl色调饱和度亮度表示颜色，饱和度：颜色的鲜艳程度
hsla
3. 文本相关样式属性
text-indent : 设置段落缩进 1em=16px
text-overflow：控制文本溢出的处理方法
clip：只是简单裁剪
ellipsis：指定裁剪溢出的文本，并显示溢出标识（...）
前提是在overflow:hidden属性值下
vertical-align：
text-align：
white-space（对空白的处理方式，空格换行都属于空白）
normal：将空格换行合并，不保留
pre：保留空格和换行
nowrap：不换行
pre-wrap：保留空格且换行
pre-line：不保留空格但换行
inherit：听父标签的
word-break（单词和汉字）
normal：
keep-all：
break-all：设置允许在单词中换行
word-wrap
break-word：
word-wrap和word-break的区别
4. 服务器字体（重点）
1.服务器字体定义方式
使用@font-face即可，将字体当成资源引入
2.服务器字体使用方式
3.搜索字体的网站
4.优先使用客户端字体
现在本地查找是否有宋体，如果没有再引入别的地方字体
二、背景、边框、边距相关样式属性
1 背景
background-repeat
repeat：横纵同时平铺
no-repeat：不铺
repeat-x：横向铺
repeat-y：纵向铺
新增（保证图片不裁剪，保证图片完整）
space：只调整图片间的间距，不调整空白
round：自动调整图片大小，从而使整个图片完整显示出来
background-attachment：fixed背景图固定
background-position
background-clip
border-box：指定背景覆盖盒子模型的三个区域
padding-box：内填充、内容
content-box：内容
background-size
cover 不顾图片完整，把容器充满
contain 在保证图片完整前提下保证填满
（内容区填充区边框区）
渐变背景颜色
linear-gradient
边框
none：无边框
solid：实线
dashed：虚线
dotted：点线
圆角边框
border-radius
设置方向
透明度
opacity（范围 0~1）
内边距
padding
外边框
margin
三、表格、列表、鼠标、响应式布局相关属性
1. 表格相关属性
border-collapse：合并单元格，变成单线
border-spacing：当border-collapse:seperate时可以设置该属性，设置两个单元格边框的间距
caption-side：设置表格标题位于哪边
top left bottom right
empty-cells：改属性是设置单元格中没有内容时，是否显示单元格边框（show和hide两个属性）
前提：border-collapse:seperate
col
span设置同样的样式（设置前两行是同样的）
2. 列表相关属性
list-style：none
3. 鼠标相关属性
cursor：default pointer
4.响应式布局 media query
语法：
not或者only
实现代码
<!--html-->
<div id="container">
<div id="left">
<h2>sdfkjksd</h2>
1的开发搭建gdsfgs豆腐干豆腐上公司法定豆腐干豆腐上感受到是大法官
</div>
<div id="main">
<h2>sdfkjksd</h2>
2的开发搭搭建gdsfgs豆腐干豆腐上公司法定豆腐干豆腐上感受到
</div>
<div id="right">
<h2>sdfkjksd</h2>
3的开发搭建gdsfgs豆腐干豆腐上公司法定豆腐干豆腐上感受到电饭锅
</div>
</div>
<!--css-->
* {
padding: 0;
margin: 0;
}
#container {
text-align: center;
margin: auto;
width: 750px;
}
#container>div {
border: 1px solid #aaf;
text-align: left;
box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding: 5px;
}
div#left {
width: 300px;
height: 260px;
float: left;
}
div#main {
width: 450px;
height: 260px;
float: left;
clear: right;
}
div#right {
width: 750px;
float: left;
}
@media screen and (min-width:1000px) {
#container {
text-align: center;
margin: auto;
width: 960px;
}
#container>div {
border: 1px solid #aaf;
box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding: 5px;
}
div#left {
width: 240px;
height: 260px;
float: left;
}
div#main {
width: 460px;
height: 260px;
float: left;
clear: none;
}
div#right {
width: 260px;
float: left;
height: 260px;
}
}
@media screen and (max-width:480px) {
#container {
text-align: center;
margin: auto;
width: 450px;
}
#container>div {
border: 1px solid #aaf;
box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding: 5px;
}
div#left {
width: 450px;
height: 150px;
float: left;
}
div#main {
width: 460px;
height: 260px;
float: left;
clear: both;
}
div#right {
width: 450px;
float: left;
height: 170px;
}
}注意中文空格
5.meidia query使用时需要设置viewpoint（很重要）
<meta name="viewport" content="width=, initial-scale=1.0">四、变形与动画相关属性
1.变形相关属性
transform
XYZ分别沿三个轴实现效果
translate是移动
scale是放大
rotate是旋转
skew是倾斜
二维坐标和三维坐标
可同时使用多种变形
中间不用逗号隔开，用空格
设置变形中心点
3D效果相关属性
perspective作用于父元素
back-visibility属性
flat：不保留
perserve-3d：子元素将保留3d效果
3D背面是否可见
visible：背面可见
hidden：背面不可见
旋转看不到背面
2. 动画相关属性
transition(过渡)动画相关属性（由四个值组成，还有延迟的时间）
transition-property：属性 背景颜色、宽度、高度等
transition-duration：动画持续时间
transition-timing-function：指定渐变的速度
ease
liner
ease-in
ease-out
transition动画同时变化多个属性
transition: transform 3.5s ease, background 3.5s ease, width 3.5s ease;animation动画相关属性
<!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>
* {
margin: 0;
padding: 0;
}
@keyframes javags {
0% {
left: 100px;
background-color: red;
}
50% {
left: 200px;
background-color: yellow;
}
70% {
left: 150px;
background-color: green;
}
100% {
left: 75px;
background-color: blue;
}
}
div {
background: red;
width: 200px;
height: 200px;
margin: 200px;
position: relative;
}
div:hover {
animation-name: javags;
animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: 4;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
