学习web前端之css第三天-CSDN博客

本文链接：https://blog.csdn.net/ysn121101/article/details/98178976

css 语法规则

字体样式(可以被继承)

字体

 font-family:"微软雅黑","Microsoft YaHei","宋体",serif;

  font-size:12px;

字体粗细

font-weight:bold;	//加粗
font-weight:normal; //正常
font-weight:bolder; 
font-weight:122;

是否开启斜体

font-style:normal;	//正常
font-style:italic;	//开启斜体

行高【使文本垂直居中】

line-height:2em;

速写格式：
font:font-style font-weight font-size/line-height font-family;

font:italic bold 12px/2em 'Microsoft YaHei',serif;

网络字体
主要用于字体图标库（iconfont/fontawesome）
使用步骤：
1) 在iconfont网站中选择图标，加入项目，产生代码
2) 将产生的代码在html中通过link引用 http://at.alicdn.com/t/font_1328534_f3dyyeuoew.css
3) 应用css中定义好的类，来使用对应的图标

文本样式(可以被继承)

字体颜色

 color:#333;

文本水平居中

text-align:center;

text-decoration-line 属性规定文本修饰要使用的线条类型

text-decoration-line:underline;//下划线 
text-decoration-line:line-through;//删除线
text-decoration-line:overline;//上划线
text-decoration-line:none;//无划线

text-decoration-style 属性用于规定线条如何显示

text-decoration-style:solid; //线条为实线
text-decoration-style:dotted; //线条为点状线
text-decoration-style:double; //线条为双实线
text-decoration-style:dashed; //线条为虚线
text-decoration-style:wavy; //线条为波浪线

text-decoration-color 属性用于规定线条颜色

text-decoration-color:pink;

text-decoration文本修饰

text-decoration:none;

文本缩进

text-indent:2em;

文本阴影

text-shadow:12px 2px 3px #ccc;

列表样式

列表项标记的样式

list-style-type:circle;  //空心圆
list-style-type:square;   //实心矩形

列表项标记以图片形式

	list-style-image:url('');

在何处放置列表项标记

list-style-position:outside; //默认值，保持标记位于文本的左侧，列表项标记放在文本以外，且环绕文本不根据标记对齐
list-style-position:inside; //列表项目标记放在文本以内，且环绕文本根据标记对齐

列表项样式

list-style:none;

盒子样式

width
height
margin
- margin-top
- margin-right
- margin-bottom
- margin-left

margin:10px; 上右下左
margin:0 10px; 上下为0，左右10px
margin:0 5px 10px; 上0，左右5px，下10px
margin:0 5px 10px 15px; 上右下左
margin：0 auto；居中（针对块元素）

border
- border-top
- border-right
- border-left
- border-color
- border-style
- border-width
速写：

 border:1px solid #ededed;

padding
- padding-top
- padding-right
- padding-bottom
- padding-left
box-shadow: 5px 5px 10px #ccc;

盒子外侧阴影，前两个是盒子外右、下侧阴影，最后一个是盒子外四周阴影

box-shadow:inset 0 0 3px lightblue;

盒子内侧阴影，前两个是盒子内上、左侧阴影，最后一个是盒子内四周阴影。

border-radius 圆角半径

background-origin 背景铺设的起点

 	border-box 		边框下
 	padding-box 	内边距下
 	content-box 	内容下

background-image 背景图片

background-repeat 背景重复方式

 	repeat-x //以x轴铺设
 	repeat-y //以y轴铺设
 	no-repeat //取消铺设

background-color 背景颜色
background-position 背景位置
```
 	center
 	top left
 	10px 20px
```

background-clip 背景裁切方式

 	border-box 		边框下
 	padding-box 	内边距下
 	content-box 	内容下

background 速写

 	background:url('') no-repeat center;
 	background-size:cover;
 	=>
 	background:center/cover padding-box url('') no-repeat ;

盒子计算方式

box-sizing:content-box;内容盒子（传统盒子）
width = 内容宽
height = 内容高
所占的宽 = border + padding + width
所占的高 = border + padding + height

box-sizing:border-box;边框盒子（怪异盒子）
width = 边框以内所有的和
width = border + padding + 内容宽

单位

颜色

#333333 => #333

#ededed

rgb(0,0,0) =>#000000

rgba(0,0,0,0.3) 渐变

长度

绝对单位 px

相对单位

		    em 	当前元素上的font-size的值
				font-size:12px ;
				1em = 12px;
				2em = 24px;
			rem
				html{font-size:14px;}
				1rem = 14px;
			%
				width 相对于父元素
				border-radius 	相对于当前元素的width

思维导图

css规则思维导图