1. 字体相关样式属性
第一章:字体与文本相关样式
font:这是一个复合属性,其属性值是形如 font-style font-variant font-weight font-sizeline-height font-family 的复合属性值。
font-size在font复合属性中使用的比较多,该属性用于设置文字的字体大小
没用font-size之前
用了font-size:50px之后
font-style:该属性用于设置文字风格,是否采用斜体等。该属性的常用属性值有normal、italic、oblique,这些属性值依次表示设置文字正常、斜体、倾斜字体。
font-style:normal:
font-style: italic;
font-style: oblique;
用的最多的还有
text-decoration
下划线text-decoration: underline
中划线 text-decoration: line-through
上划线text-decoration: overline
font-variant:该属性用于设置文字的大写字母的格式。该属性支持normal、small-caps两个属性值,分别对应于正常的字体、小型的大写字母字体。
当你输入的是小写字母时,加入font-variant:small-caps系统会将小写字母设置为大写的字母
上面讲了font-variant,下面讲一个跟它很像的
text-transform:该属性用于设置文字的大小写。
text-transform: capitalize;(代表首字母大写)
text-transform: uppercase;(代表字母全部大写)
text-transform:lowercase(代表字母全部小写)
2. 颜色表示方式
1.最简单的就是直接使用red(红色),blue(蓝色),green(绿色)等等,这些颜色比较单一
2.就是rgb(r,g,b)就是使用三色混合来形成其他的颜色,例如红色=255,蓝色=0,绿色=255这三种颜色就会混成黄色。
3.rgba与rgb(r,g,b)三色混合的原理相同,就是多了一个a,a就是透明度,a可以取0-1的值,0就是透明的。
3. 文本相关样式属性
text-indent:用于设置段落文本的缩进,默认值为0。当设置为其他值为就会缩进
text-align:用于设置目标元素中文本的水平对齐方式。
其作用为让块级元素里面的文本或行内元素对齐。
如果此块级元素里面含有块级元素,那么这个被含有的块级元素不会被控制居中
left(左对齐)
right(右对齐)
center(居中对齐)
justify(两端对齐)
white-space:用于设置目标元素对文本内容中空白的处理方式。
normal:默认属性值。浏览器忽略文本中的空白。
pre:浏览器保留文本中的所有空白
nowrap:文本不会换行,文本会在同一行上继续,直到遇到换行<br>标签为止
pre-wrap:保留空白符序列,但可以正常地进行换行。 文本不会换行,文本会在同一行上继续,直到遇到<br.>标签为止。包装前:保留空白符序列,但可以正常地进行换行.
pre-line:合并空白符序列,但保留换行符。
word-break:用于设置目标元素中文本内容的换行方式。
word-wrap:用于设置目标元素中文本内容的换行方式。
4. 服务器字体(重点)
1、服务器字体定义方式:
一般使用的@font-face,记住要使用相对的路径,url("把你想要的字体放在这里面然后引用"),
2、服务器字体使用方式:
我这里用的是Blazed字体,在官网上就能直接下载
第二章:背景、边框、边距相关样式属性
1、background复合属性定义
background-color:用于设置背景色。background-color:+颜色。
background-image:用于设置背景图片。
background-repeat:该属性有repeat,no-repeat、 repeat-x. repeat-y这4个值,分别代表平铺、不平铺、仅在横向平铺、仅在纵向平铺。我们使用比较多的是repeat和no-repeat。background-repeat还有两个新增的值,round和space,round会自动调整图片的的大小,而space不会调整.
background-size的两个常用值:cover和contain
cover不顾图片是否完整,把容器铺满为止;
contain在保证图片完整的前提下,尽量把容器给铺满
2.渐变背景颜色
linear-gradient(方向,颜色)
to top:代表从下到上
to bottom:代表从上到下
to left:从右到左
to right:从左到右
to left top :从右下到左上 (一样的)
Deg:代表着角度值。
2. 边框样式
border:这个是一个复合属性,用于设置目标元素的边框元素,可设置粗细,颜色,大小。
1、边框样式
none:无边框
hidden:隐藏边框
dotted:点线边框
dashed:虚线边框
soild:实现边框
2、圆角边框
border-radius:该属性用于指定圆角边框的圆角半径(半径越大,圆角的程度越大)。
border-left-top-radius:该属性指定左上角的圆角属性。
border-right-top-radius:该属性指定右上角的圆角属性。
border-left-botton-radius:该属性指定左下角的圆角属性。
border-right-bottom-radius:该属性指定右下角的圆角属性。
3. 透明度
opacity:该属性代表着透明度,值由0-1,0代表值透明,而1代表着不透明。
4. 内边距
padding代表着内边距,代表着上,下,左,右4个边的内填充距离。该属性可以设置4个值,3个值,2个值以及一个值,4个值就上,下,左,右的值。3个值就是,第一个值和第3个值代表着上下的距离,而第二个值代表着左右的内填充的距离,若是2个值,则第一个值代表着上下,第二个值代表着左右的内填充距离。
padding-top;设置上填充的距离
padding-bottom;设置下填充的距离
padding-left;设置左填充的距离
padding-right;设置右填充的距离
5. 外边距
margin该属性跟padding属性差不多,不过代表的是外边距,代表着跟外边4条边的外边距距离。也可以设置4,3,2,1个值,跟padding差不多,可以参考padding
margin-top:上边距
margin-left:左边距
margin-right:右边距
margin-bottom:下边距
第三章:表格、列表、鼠标、响应式布局相关属性
1. 表格相关属性
border-collapse:该属性控制两个单元格的边框是合并在一起,还是按照标准的HTML样式分开。该属性有两个值,即 seperate(边框分开,使得单元格的分隔线为双线)和collapse(边框合并,使得单元格的分隔线为单线)。
border-spacing:当设置 border-collapse为 seperate时,该属性用于设置两个单元格边框之间的间距。
caption-side:用于设置表格标题位于表格哪边。该属性必须和<caption...l>元素一起使
用。该属性有4个值,即 top、bottom、left、right,分别对应于将表格标题放在表格的上、下、左、右4处。一般使用top和bottom比较多
empty-cells:该属性控制单元格内没有内容时,是否显示单元格边框。只有当border-collapse属性设置成 seperate时,该属性才有效。该属性支持 show(显示)和hide(隐藏)两个属性值。
table-layout:用于设置表格宽度布局的方法。该属性支持auto和 fixed两个属性值,其中 auto是默认值,也就是平时常见的表格布局方式: fixed则指定使用固定布局方式。
代码示例:
<!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>
table {
border-collapse: separate;/*使边框分开*/
border-spacing: 20px;/*两个单元格之间的间隔*/
caption-side: bottom;/*把标题设置在表格的下面*/
empty-cells: hide;/*将单元格没有的给他隐藏起来,这样页面也不会很难看*/
}
</style>
</head>
<body>
<table border="1">
<caption>表格</caption>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td></td>
<td>05</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
</table>
</body>
</html>
2. 列表相关属性
list-style代表着我们写在前面的点
使用较多的是list-style:none 代表把前面的点去掉
3. 鼠标相关样式
all-scroll:代表十字箭头光标。
col-resize:代表水平拖动线光标。
crosshair:代表十字线光标。
move:代表移动十字箭头光标。
help:代表带问号的箭头光标
no-drop:代表禁止光标。
not-allowed:代表禁止光标。
pointer:代表手形光标。
progress:代表带进度环的箭头光标。
row-resize:代表垂直拖动线光标。
这个看你个人喜欢,决定使用哪个光标,然后设置光标。
4. 响应式布局media query(重点)
1、media query语法
@media not|only 设备类型{ and 设备特征}*
2、media query使用
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
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;
}
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<h2>lsh</h2>
asdfghjkl
</div>
<div id="main">
<h2>lsh2</h2>
qwertyuiop
</div>
<div id="right">
<h2>lsh3</h2>
zxcvbnm
</div>
</div>
</body>
</html>
3、media query使用时需要设置viewport
因为手机屏幕跟浏览器的屏幕是不一样的,在使用时会产生差别,所以我们设置viewport来让他们的屏幕是一样的
<meta name="viewport" content="width=device-width,initial-scale=1.0">
第四章:变形与动画相关属性
1. 变形相关属性
1、基本属性
translate(tx [,ty]):该函数设置元素html元素沿x轴移动tx距离,沿y轴移动ty距离。
translate3d(tx, ty,tz):该函数设置html元素沿x轴移动tx距离,沿y轴移动ty距离,沿z轴移动z距离。
translate X(tx):表示该元素沿x轴移动tx的距离。
translate Y(ty):表示该元素沿y轴移动ty的距离。
translate Z(tz):表示该元素沿z轴移动tz的距离。
scale(sx, sy,sz):该函数设置HTML元素沿X轴方向缩放比为sx,沿Y轴方向缩放比为sy,沿z轴方向缩放sz。
scale(sx, sy):该函数设置HTML元素沿X轴方向缩放比为sx,沿Y轴方向缩放比为sy。
scale(sx):相当于沿y轴缩放sx的比例即等于scale(sx,1)。
scale(sy):相当于沿x轴缩放sy的比例即等于scale(1,sy)。
scale(sz):相当于scale(1,1,sz);
rotate3d(x,y,z,angle):该函数设置HTML元素绕指定轴(x、y、z参数代表旋转轴的方向)顺时针转过angle角度。 即
rotateZ(angle):该函数设置HTML元素绕z轴顺时针转过angle角度
rotateX(angle):该函数设置HTML元素绕x轴顺时针转过angle角度。
rotateY(angle):该函数设置HTML元素绕y轴顺时针转过angle角度。
skew(sx,[sy]):该函数设置HTML元素沿着X轴倾斜sx 角度,沿着Y轴倾斜sy角度。
skewX(angle):该函数设置HTML元素沿着X轴倾斜angle角度。
2、设置变形中心点
transform-origin: left top;
中心点为左上,围绕着左上来旋转。
3、3D效果相关属性
如果要设置3D的效果,就必须要要设置perspective
注意:perspective值越小,3D效果越明显
4、3D嵌套效果
transform-style 属性指定是否在3D空间正确呈现元素的“遮挡”等嵌套关系。如果希望正常看到HTML元素之间的嵌套关系,就需要设置transform-style属性。该属性支持如下两个属性值。
flat:不保留子元素的3D位置。
preserve-3d:子元素将保留3D位置。
<!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>
div {
position: absolute;
border: 1px solid #000;
}
div#a {
padding: 60px;
background: #eee;
transform: rotateY(30deg);
transform-style: preserve-3d;
}
div#b {
padding: 40px;
background: #aaa;
transform: rotateY(20deg);
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
</div>
</body>
</html>
2. 动画相关
1、transtion(过渡)动画相关属性
Transition动画通过transition属性来指定。transition属性的值包括如下4个部分。
transition-property:指定对html元素的哪个css属性进行平滑渐变处理。该属性可以指定background-color、width、height等各种标准的css属性。
transition-duration:指定属性平滑渐变的持续时间。
transition-timing-function:指定渐变的速度。该部分支持如下几个值。
ease:动画开始时较慢,然后速度加快,到达最大速度后再减慢速度。linear:线性速度。动画开始时的速度到结束时的速度保持不变。
ease-in:动画开始时速度较慢,然后速度加快。
ease-out:动画开始时速度很快,然后速度减慢。
2、transtion动画同时变化多个属性
transition: transform 3.5s ease, background 3.5s ease, width 3.5s ease;
transtion:all 3.5 ease
*{
margin:0;
padding:0
transtion:all .5s ease
}
13、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>