2021-05-26 Day03-css选择器+属性

回顾

1.表格
	table>tr*3>td*3
	table的属性：
		border="1"
		width="100"
		height="200"
		cellspacing=""外边距
		cellpadding=""内边距
	tr的属性：
		height="200"高度
		align="center居中/left左/right右"
		valign="top上/bottom下/middle居中"
	td的属性：
		width="100"
		height="200"
		align="center居中/left左/right右"
		valign="top上/bottom下/middle居中"
		***向右合并/跨列合并colspan="3"
		***向下合并/跨行合并rowspan=""
2.表单
	<form action="" method="post" name="">
		<input type="text" name="username" value="请输入">
		<input type="password" name="pwd">
		<input type="submit" value="">
		<input type="reset" value="">
		<input type="button" value="">
	</form>
3.css使用方法
	css层叠样式表、级联样式表、样式表
	- 内部样式表
	- 外部样式表
	- 内联、行内

4.选择器


5.css特征
	层叠性：浏览器处理样式冲突的能力，不重复的属性会层叠在一起，重复的以后定义？的为准(权值相同的时候以后定义的为准，权值不同以权值大的为准)
	就近原则

选择器/选择符

1.元素选择器
	a{去掉下划线}
	img{去掉基线对齐}
	li{去掉列表标识符}
2.类选择器
	<div class="box"></div>
	命名规则：可以包含数字、字母、_、-,小写字母开头，见名知意
	<div class="box wrap"></div>
	一个元素可以起多个类名，同一个类名可以被多个元素使用
	.box{}
3.id选择器
	<div id="box"></div>
	#box{}
	一个板块的最大容器一般起一个id名
	一个元素只能有一个id名，一个id能只能被使用一次
	快速生成一个class="box"的div：div.box然后按tab键
	快速生成一个id="box"的div：div#box然后按tab键
4.通配符选择器
	*{
		margin:0; 外边距
		padding:0; 内边距
	}
	*代表页面中所有的元素,统一去掉内外边距
	有内外边距的元素：body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,input
5.群组选择器
	<div class="box"></div>
	<div class="wrap"></div>
	.box,.wrap{
		height: 200px;
		background-color: red;
	}
	- 两个不同的元素用同一套代码,逗号隔开,逗号前后没有任何关系
6.子代选择器
	通过父元素的名字找到子元素,统一添加样式
	.box>li{	}
	>前后一定是父子关系,选择器越长运行效率越低,因为选择器是被浏览器倒着解析的
7.后代选择器
	.box a{	}
	空格隔开
8.伪类选择器
	:link 访问前的状态
	:visited 访问后的状态
	:hover 鼠标移入状态
	:active 激活状态(鼠标按下去但未松开)
	书写顺序：love-hate
		a{
			color: #000;
		}
		a:hover{
			color: red;
		}

选择器权值

元素 1
类 10
id 100
内联 1000
- 手动调整样式优先级 !important
	background-color: yellow !important;
- div.box{} 
	div和.box之间没有空格,代表选择的是类名为box的div元素

ps

1.ps快捷键
	放大 ：alt+鼠标滚轮
	移动图片 ：空格+鼠标左键
	快速恢复全屏 ：ctrl+0
2.更改尺寸为像素px
	菜单中编辑 - 首选项 - 单位与标尺 - 把厘米改成像素
3.标尺
	调用标尺：菜单栏中的视图 - 标尺打对钩
	清除标尺线：视图 - 清除参考线
4.切片工具
	切过的切片重新调整：按住ctrl键点击
	文件-导出-存储为web所用格式-左下角100%保存为6%-右上角选择保存格式-存储-文件名改为英文-最下方选择所有用户切片

文本属性

1.***字体颜色
	color:rgb(0-255,0-255,0-255);
	color:#996ad4;
		六位十六进制表示法每一位范围：0-9,a-f
	黑色:
		color:rgb(0,0,0);
		color:#000000;
		color:#000;
	白色:
		color:rgb(255,255,255);
		color:#fff;
	红色:
		color:rgb(255,0,0);
		color:#f00;
2.***字体大小
	font-size:16px;
	浏览器默认字体大小为16px,浏览器支持的最小字体12px
3.字体
	font-family:"楷体","microsoft yahei",arial;
	- 可以指定多个字体,浏览器先查找是否安装了第一个字体,如果没有安装则向后查找,如果都没找到则采用浏览器默认字体。
	- 当字体是中文或者两个及以上单词组成的,需要加""
4.文本粗细
	***font-weight:bold;加粗
	font-weight:lighter;细体
	font-weight:normal;正常粗细
	font-weight：100-900;不带单位,数值越大越加粗
5.文本倾斜
	font-style:italic;
6.文本线条修饰
	***text-decoration:underline;下划线
	text-decoration:line-through;删除线
	text-decoration:none;无线条
7.首行缩进
	text-indent:32px;
8.***行高
	line-height:24px;
	单行文本的垂直居中:文本的行高设置为父元素高度即可
9.***文本和图片的水平对齐方式
	text-align:center居中/right右/left左;
	img的居中属性不能给img,而是给img的容器

属性的继承性

https://blog.csdn.net/weixin_43846403/article/details/84591706
比较常用的：
	font-size
	font-family
	font-weight
	font-style
	text-indent
	text-align
	line-height
	color(a除外)

列表属性

1.列表标识符
	去掉标识符
	li{
		list-style-type:none;
	}
2.列表图片
	li{
		list-style-image:url();
	}
3.标识符位置
	li{
		list-style-position:inside;
	}
***去掉列表标识符li{list-style:none;}

边框属性

四个方向边框的设置
	border:粗细(1px) 线型(solid直线/dashed虚线/dotted点状线/double双线) 颜色;
单方向边框设置：
	上边框border-top:1px solid #f00;
	下边框border-bottom:1px solid #f00;
	左边框border-left:1px solid #f00;
	右边框border-right:1px solid #f00;
面试题：用边框制作一个三角形
	.box{
		width: 0px;
		border-top: 10px solid transparent;
		border-right: 10px solid yellow;
		border-bottom: 10px solid transparent;
		border-left: 10px solid transparent;
	}