H5全栈_规则

最新推荐文章于 2019-10-21 22:50:12 发布

AKIRAZXX

最新推荐文章于 2019-10-21 22:50:12 发布

阅读量372

点赞数

分类专栏： html/css 文章标签：样式

本文链接：https://blog.csdn.net/AKIRAZXX/article/details/98381560

版权

html/css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

样式规则

字体样式

可继承
字体应该加在html内
color 颜色
关键字
十六进制
RGB、RGBA
font-famliy 字体
serif 有衬线
sans-serif 无衬线
monospace 等宽
Microsoft YaHei 微软雅黑
font-size 大小
font-weight 粗细
bold 粗
thin 细
bolder 比bold更粗一些
100~900
font-style 是否为斜体
normal 正常字体
italic 斜体
oblique 模拟斜体
font：style_weight_size_hight_family速写格式
line-height 行高
网络字体 字体图标库(iconfont、fontawesome)
1、选择图标添加到购物车，添加项目
2、生成代码，并且应用在线css
3、在html中引用css
4、应用样式即可

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_1327468_ylyyg8dnmhc.css">
	/*引入阿里巴巴字体图标库*/
	<style>
		.iconfont {
			color: pink;
			margin-right: 1em;
		}
	</style>
</head>
<body>
<ul>
	<li><i class="iconfont icon-icon-test"></i>111</li>
</ul>
</body>

<head>
	<meta charset="UTF-8">
	<title>字体样式应用</title>
	<style>
		div:nth-child(1){
			color: red;		/*颜色*/
			font-family:serif;		/*字体、有衬线*/
			font-size: 1em;/*12px=1em*/
			font-weight: bold;/*加粗*/
			font-style: normal;/*是否为斜体，正常字体*/
		}
		div:nth-child(2){
			color:#333;
			font-family:sans-serif;  /*无衬线*/
			font-size: 14px;
			font-weight: bolder;/*必bold更粗一些*/
			font-style: italic;/*斜体*/
		}
		div:nth-child(3){
			color:rgba(134,27,85,30%);	/*红、绿、蓝、透明度*/
			font-family: monospace;  /*等宽*/
			font-size: 2rem;/*2倍浏览器默认字体大小:16x2=32;*/
			font-weight: thin;/*细*/
		}
		div:nth-child(4){
			color: #ffcc99;
			font-family: 'Microsoft YaHei';/*微软雅黑*/
			font-weight: 900;
			line-height: 300px;/*行高*/
		}
	</style>
</head>
<body>
	<div>0 zero 零</div>
	<div>1 one 一</div>
	<div>2 two 贰</div>
	<div>3 three 叁</div>
</body>

文本样式

text-align 文本在容器中的排列方式
left 靠左
right 靠右
center 居中
text-indent 文本在容器中的缩进
text-decoration 文本装饰线（速写）
text-decoration-line 位置
none 无
underline 下划线
overline 上划线
line-through 中划线
text-decoration-style 类型
solid 实线
double 双实线
dotted 点线
dashed 虚线
wavy 波浪线
text-decoration-color 颜色
text-shadow 文本阴影
text-shadow：5px 5px 1px #333（右、下、模糊度、颜色）

<head>
	<meta charset="UTF-8">
	<title>文本样式应用</title>
	<style>
		p {
			text-align: left;
			/*文本靠左*/
			text-align: right;
			/*文本靠右*/
			text-align:center;
			/*文本居中*/
			text-indent: 2em;
			/*缩进*/
			text-decoration-line: none;
			/*文本装饰线位置 无*/
			text-decoration-line: underline;
			/*下划线*/
			text-decoration-line: overline;
			/*上划线*/
			text-decoration-line: line-through;
			/*中划线*/
			text-decoration-style: solid;
			/*文本装饰线类型 实线*/
			text-decoration-style: double;
			/*两条实线*/
			text-decoration-style: dotted;
			/*点线 .......*/
			text-decoration-style: dashed;
			/*虚线 _ _ _ _*/
			text-decoration-style: wavy;
			/*波浪线*/
			text-decoration-color: pink;
			/*文本装饰线的颜色*/
			text-shadow: 5px 5px 1px #333;
			/*文本阴影，右、下、模糊度、颜色*/
		}
	</style>
</head>
<body>
	<p>0123456789,qwertyuiop,橘猫加菲布偶</p>
</body>

列表样式

list-style-type：列表项标志类型
circle 标记是空心圆
square 标记是实心方块
list-style-image：自定义设置列表项标志
url
list-style-position：列表项标志出现的位置
inside 标志在内容框内
outside 标志在padding内
在这里插入图片描述

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_1327468_ylyyg8dnmhc.css">
	<style>
		ul{
			/*list-style: none;*/
			list-style-position: inside;
			/*list-style-position: outside;*/

		}
		.iconfont {
			color: pink;
			margin-right: 1em;
		}
	</style>
</head>
<body>
<ul>
	<li><i class="iconfont icon-icon-test"></i>111</li>
	<li><i class="iconfont icon-icon-test"></i>222</li>
	<li><i class="iconfont icon-icon-test"></i>333</li>
</ul>
</body>

list-style
list-style:none（使列表项标志消失）

盒子样式

盒子模型：

传统盒子(标准W3C盒子)：(width=内容宽)
市绝大多数浏览器的默认盒子
width：100px
表示内容区域的宽为100px

边框盒子(IE盒子)：(边框以内所有元素的宽)
width:100px
表示边框内全部的宽为100px
width=border+padding+内容

width
height
margin:外边距（上下外边距会重叠，eg:第一个元素margin-bottom:20px;第二个元素margin-top:10px;他们的外边距为20px）
margin：0 auto;(auto可以通过分配左右边距平等地占据元素容器中的可用水平空间)
margin-top/right/bottom/left(上右下左)
margin:10px; 上右下左都为10px
margin:0 10px; 上下为0，左右为10px
margin:0 5px 10px; 上0,下10px,左右5px
margin:5px 10px 15px 20px;上右下左
padding:内边距（用法同margi）
padding-top/right/bottom/left(上右下左)
padding:10px; 上右下左都为10px
padding:0 10px; 上下为0，左右为10px
padding:0 5px 10px;上0,下10px,左右5px
padding:5px 10px 15px 20px;上右下左
image:image默认为行内元素
border:边框
border：（速写形式）
border-width（-top-、-right-、-bottom-、-left-）
（thin、medium、thick、px、em）
border-style（-top-、-right-、-bottom-、-left-）
（none、hidden、dotted、dashed、solid、double、groove、inset、outset）
border-color（-top-、-right-、-bottom-、-left-）
border-radius 圆角边框
border-shadow 阴影(加inset内发光)
background
background 速写
background:【background:url(’’) no-repeat center;或
background:center/cover padding-box url(’./image/lianjia_08.png’) no-repeat ;】

-origin(背景铺设起点）
border/padding/content-box
-clip(对已经铺好的背景裁剪)
border/padding/content-box
-repeat(重复方式)
-x/y、no-、space(背景图不会产生缩放，会被裁切)、round(缩放背景图至容器大小（非等比例缩放））
-image(设置背景图片）
url、none
-size（contain包含、cover填充放大铺满）
-position(初始位置)
center/top/left…
-color
box-sizing设置盒子模型样式
box-sizing:content-box(固定为W3C盒子）
box-sizing:border-box(固定为IE盒子)

背景图与图片的区别

1、图片img为行内块,插入图片移动位置通过margin和padding实现；背景图片移动通过background-position移动
2、img是一个子元素可以把高撑起来；background只是背景，不设定高无法显示
3、img：文字在图片旁显示；background文字显示在图片上，且背景图片会自动repeat

<head>
	<meta charset="UTF-8">
	<title>背景图与图片的区别</title>
	<style>
		.two{
			background-image: url(./f723e5290e65e7056cb09aa1b16e9855.jpg);
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="one">
		<img src="./f723e5290e65e7056cb09aa1b16e9855.jpg">
	</div>
	<div>hello world</div>
	<div class="two">
		hello world
	</div>
</body>

img图片块的高度比图片高度大，导致上下有白边的问题：
因为img是一个行内元素，默认情况下行内元素会自动在图片底下添加一个字体的高度
可在style内设置.one{font-size：0;}

AKIRAZXX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5全栈_规则

Day 8样式规则字体样式可继承字体应该加在html内color 颜色关键字十六进制 RGB、RGBAfont-famliy 字体 serif 有衬线 sans-serif 无衬线 monospace 等宽 Microsoft YaHei 微软雅黑font-size 大小font-weight 粗细 bold 粗 thin 细 bolder 比bold更粗一...
复制链接

扫一扫