字体样式
字体样式
字体样式
font-family 字体类型 可以显示操作系统上安装的字体
英文的字体 ，只影响英文
中文的字体，即影响中文，又影响英文
设置混合字体时，英文在前，中文在后
*建议不要去设置罕见的字体，读者可能没有这个形式的字体。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体样式</title> <style> p{ font-family:"楷体"; } </style> </head> <body> <p>hello 你好</p> </body> </html>
，就会显示楷体。
字体大小
font-size 字体大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体大小</title>
<style>
#ha{
font-size: 50px;
}
</style>
</head>
<body>
<p id="ha">你好呀！</p>
<p id="haha">你好吗？</p>
</body>
</html>其运行结果为：
我们可以看到，对id=ha的字体进行调整，他的字体变大了
字体颜色
1.color 英文单词 有限
2.三原色 红绿蓝 rgb
十进制0-255 （0，0，0）是黑 （255，255，255）白
透明度a（0-1） rgba（0，0，0，0.5） 1完全不透明，0完全透明
十六进制0-FF #00B==#0000BB
拾色器 取色器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体颜色</title>
<style>
#first{
color: red;
}
#second{
color:rgba(50,10,10,0.5);
}
#third{
color:#0000BB;
}
</style>
</head>
<body>
<p id="first">你好呀</p>
<p id="second">你好呀</p>
<p id="third">你好呀</p>
</body>
</html>其运行结果为：
可以发现，所对应的三种颜色都出现了相应的颜色。
#second 中颜色的透明度，当为0时就完全遮盖。
字体粗细
font-weight 字体粗细 normal=400 bold=700 他的范围为：（100-900）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体粗细</title>
<style>
#first{
font-weight:bold;
}
</style>
</head>
<body>
<p id="first">hello</p>
<p>hello</p>
</body>
</html>其运行结果为：
这样他的字体就加粗了。
字体风格
font-style 字体风格 italic（更常用）斜体 oblique 斜体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体风格</title>
<style>
p{
font-style: italic;
}
</style>
</head>
<body>
<p>你好</p>
<p>你好</p>
<p>你好</p>
</body>
</html>其运行结果为：
符合属性
符合属性 font:font-style font-weight font-size font-family
文本样式
text-align 水平对齐方式
text-align
水平对齐方式 设置在块元素上 水平居中center 左边left 右边right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平对齐方式</title>
<style>
p{
text-align: center;
}
span{
text-align: right;
}
a{
text-align: center;
}
</style>
</head>
<body>
<p>今天星期天</p>
<span>现在时2020年</span>
<br />
<a href="#">10月25日</a>
</body>
</html>其运行结果为：
可以发现只对p 标签有作用，对于行内元素均没有作用
text-indent 缩进
text-indent
- 缩进 px
- em{
相对单位，相对font-size
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缩进</title>
<style>
p{
text-indent: 2em;
}
h3{
text-indent: 2px;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<h3>嘿嘿嘿和嘿嘿嘿嘿嘿额嘿嘿额欸黑额和黑恶黑恶黑呵呵嘿额黑恶和嘿嘿欸和嘿嘿和</h3>
</body>
</html>
其运行结果为：
可以发现em是缩进两个字的大小。
line-height 行高
line-height 行高 多行--行间距 单行--竖直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行高</title>
<style>
p{
line-height:30px;
background: red;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
其运行结果为：
这个是行间距
这个是行高
text-decoration 文本装饰
text-decoration
文本装饰 line-through（删除线） underline（下划线） none（取消a标签的下划线）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本装饰</title>
<style>
a{
text-decoration: none;
}
p{
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="#">文本装饰</a>
<p>你好呀</p>
</body>
</html>其运行结果为：
竖直对齐 vertical-align
文本阴影 text-shadow
text-shadow
文本阴影 CSS3新增
red 10px 10px 10px 阴影颜色 X轴偏移量 Y轴偏移量 模糊半径
X轴偏移量 正值 右
Y轴偏移量 正值 下
模糊半径 值越小越清晰，越大越模糊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>竖直对齐</title>
<style>
span{
text-shadow: red 10px 10px 3px;
}
</style>
</head>
<body>
<p>中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐中秋节快乐</p>
<span>国庆节快乐</span>
<br />
<a href="hhh">a标签</a>
</body>
</html>其运行结果为：
列表样式
去掉ul前面的小圆点
不好看 不好控制标记和文字的间距
list-style:none;
list-style-type:none;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<style>
ul li{
list-style-type: circle;
}
</style>
</head>
<body>
<ul>
<li>你好呀！</li>
<li>你好呀！</li>
<li>你好呀！</li>
</ul>
</body>
</html>其运行结果为：
可以发现无序列表黑色的小圆点被去掉了，而且还换成了白色的空心小圆点。
超链接
超链接的状态伪类
link visited hover active
a:link 未点击的状态
a:visited 访问后
a:hover 鼠标悬浮 不限于a标签
a:active 鼠标按下不松开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
<style>
/*字体大小*/
a{
font-size: 30px;
}
/*未点击的状态*/
a:link{
color: black;
text-decoration: none;
}
/*访问后*/
a:visited{
color: gold;
}
/*鼠标悬浮*/
a:hover{
color: red;
}
/*鼠标按下不松开*/
a:active{
color: pink;
}
</style>
</head>
<body>
<a href="index.html">快来领取礼品</a>
</body>
</html>span和div
span 行内元素 没有任何样式
div 是一个块元素 本身没有任何样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--span 行内元素 没有任何样式-->
<style type="text/css">
p{
font-size: 30px;
}
span{
color: red;
}
/*div 是一个块元素 本身没有任何样式*/
/*div + css*/
div{
background-color: greenyellow;
}
</style>
</head>
<body>
<p>今天是<span>国庆节</span>，又是<span>中秋节</span></p>
<div>
我是div
</div>
</body>
</html>
login按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.btn{
background: url(img/qi.png);
width: 50px;
height: 30px;
background-size: 100% 100%;
border: none;
}
</style>
</head>
<body>
<input type="button" class="btn" value="登录" />
</body>
</html>
背景
背景
背景色 background-color
背景图片
背景图是否重复 background-repeat:no-repeat
背景图位置：background-position
px X--右为正 Y--下为正
百分比 95% 40%
英文单词 水平 left center right
竖直方向 top center bottom
。
background
各属性值，则需而用，没有顺序
background-size
图片大小
px 可能会压缩或者拉伸
百分比 基于控件 可能会压缩，拉伸，留白
cover 不会压缩拉伸 不会留白 会虚 但是会剪裁
contain 不会压缩或拉伸，但是会有留白
建议：背景图大点，比例和控件比例一致
渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
width:300px;
height: 40px;
/*background-color: yellow;*/
background-image: url("img/PX4S@}X_NJ7)5KS14IS`TLK.png");
background-repeat:no-repeat;
background-position:right bottom;
}
/*线性渐变 CSS3新增*/
div{
width: 200px;
height: 200px;
border: 1px solid red;
/*linear-gradient 线性渐变 CSS 新增*/
background: linear-gradient(to left top,red,pink,green);
}
</style>
</head>
<body>
<p>今天天气真好</p>
<div></div>
</body>
</html>
其运行结果为：
把p标签的img图片，先通过background-repeat：no-repeat；使他不重复 即只有一个这样子的图片
再用background-position 确定方向 使其控制在右下
background：linear-gradient（to left top ,red,pink,green）:
从左上角出发，渐变颜色依次为绿 粉 红 （中间的颜色也可以增多）
盒子模型
border 边框
border:1px solid red; 复合属性 没有顺序
border-width 边框宽度 上 右 下 左
缺省的话，找对边
border-style 边框类型
dashed 虚线
solid 实线
dotted 点线
none 不显示
border-color 边框颜色
margin 外边距
auto 自动
水平居中
块元素
width
左右间距
padding 内边距
。
width,height
box-sizing
border-radius
box-shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
margin: 20px auto;
/*border-width: 1px 20px ;
border-left-width: 2px;
border-right-width: 5px;
border-top-width: 0px;
border-style: solid;
border-color:red blue green pink;
*/
}
/*span行内元素 可以用内边距把他撑起来*/
span{
border: 1px solid green;
padding: 20px;
}
/*div 是块元素*/
p{
border: 1px solid red;
padding: 20px;
}
</style>
</head>
<body>
<p>
p
</p>
<div>
div
</div>
<span>
span
</span>
</body>
</html>
其运行结果为：
边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边距</title>
<style>
*{
background-color: yellowgreen;
border: 1px solid red;
margin: 0;
padding: 0;
}
li{
list-style: none;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p</p>
<ul>
<li>li</li>
</ul>
<a>a</a>
<div>div</div>
</body>
</html>他没有设置内外边距为0时的图片为：
当对margin外边距 和padding内边距设置后的图片表示为;
可以发现他的每个标签都有边距。
边框半径
border-radius CSS3新增
边框半径
值越大，角度越大
左上，右上，右下，左下
缺省的话，找对角
。
圆形
块元素，宽高一致，半径等于宽高的一半
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框半径</title>
<style>
div{
width: 100px;
height: 100px;
background-color: orange;
border-radius: 5px 10px 15px 20px;
}
span{
width: 20px;
height: 20px;
/*display:inline-block 铺平*/
display: inline-block;
background-color: gray;
border-radius: 50%;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body>
<div></div>
<span>1</span>23456798
</body>
</html>
其运行结果为：
盒子尺寸
width,height
块元素设置有效，行内元素设置无效
box-sizing 盒子尺寸
contend-box width 内容的宽 ，不包括padding，边线
border-box width 指的是盒子的宽 包括边线，边距 推荐使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子尺寸</title>
<style>
div{
border: 1px solid red ;
width: 100px;
height: 100px;
padding: 10px;
box-sizing: border-box;
}
span{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
其运行结果为：
我们可以发现盒子的尺寸设计只对块元素div有效，对行内元素span无效。
盒子阴影
盒子阴影
box-shadow
inset 内阴影 （外阴影就不写）
box-shadow：inset 10px(左右) 10px（上下） 10px（模糊宽度）green（模糊颜色）；
添加多个阴影 中间用【,】连结
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid red;
box-shadow: inset 10px 10px 10px green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>其运行结果为：
。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.plist{
width: 240px;
background-color: gainsboro;
}
.plist h3{
color: white;
line-height: 40px;
font-size: 20px;
text-indent: 15px;
background: red url(img/jiant.png) no-repeat 95% center;
}
.plist ul li{
list-style: none;
line-height: 30px;
font-size: 16px;
background: url(img/down.png) no-repeat 95% center;
}
.plist ul li a{
text-decoration: none;
color: black;
}
.plist ul li a:hover{
text-decoration: underline;
color: orange;
}
</style>
</head>
<body>
<div class="plist">
<h3>全部商品分类</h3>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音响</a>
<a href="#">数字产品</a>
</li>
<li>
<a href="#">图书</a>
<a href="#">音响</a>
<a href="#">数字产品</a>
</li>
<li>
<a href="#">图书</a>
<a href="#">音响</a>
<a href="#">数字产品</a>
</li>
<li>
<a href="#">图书</a>
<a href="#">音响</a>
<a href="#">数字产品</a>
</li>
</ul>
</div>
</body>
</html>
其运行结果为：
竖直对齐方式
vertical-align
middle 居中 top 顶部 bottom 底部
middle 图文竖直对齐 在图片上添加vertical-align：middle;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>竖直对齐</title>
<style>
img{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="../../Day02/登录图片.png" width="200px" />
请点击登录按钮
</p>
</body>
</html>
其运行结果为：
竖直对齐方式的默认对齐为：下
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>美容产品</title>
<style>
/*display :inline-block;
元素是行内元素，行内不换行，块元素的特征
* */
*{
margin: 0px;
padding: 0px;
}
body{
background-color: oldlace;
padding: 15px;
}
.plist{
background-color: white;
width: 240px;
}
.plist dt{
background-color: red;
padding: 10px;
color: white;
font-weight: bold;
font-size: 20px;
}
.plist dd{
line-height: 30px;
font-size: 15px;
border-bottom: dashed 1px gray;
}
.plist dd a{
color: gray;
text-decoration: none;
}
.plist dd a:hover{
color: red;
}
.plist dd a span{
width: 20px;
height: 20px;
display: inline-block;
background-color: grey;
border-radius: 50%;
color: white;
text-align: center;
line-height: 20px;
}
.plist dd a:hover span{
background-color: red;
}
</style>
</head>
<body>
<dl class="plist">
<dt>大家都喜欢买的美容品</dt>
<dd>
<a href="#">
<span>1</span>
雅诗兰黛即时修护眼霜
</a>
</dd>
<dd>
<a href="#">
<span>1</span>
雅诗兰黛即时修护眼霜
</a>
</dd>
<dd>
<a href="#">
<span>1</span>
雅诗兰黛即时修护眼霜
</a>
</dd>
<dd>
<a href="#">
<span>1</span>
雅诗兰黛即时修护眼霜
</a>
</dd>
<dd>
<a href="#">
<span>1</span>
雅诗兰黛即时修护眼霜
</a>
</dd>
</dl>
</body>
</html>
其运行结果为：
扫一扫
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
