cellspacing="0" 空标签:span 横线:<del>5999元</del>
/*鼠标放上去之后变成小手*/
cursor: pointer;
删除li标签的点list-style: none;
图片居中margin: 0px auto;
块元素
选择器
子代选择器 使用>号隔开,只选择后代1代 Div> a{Color:black} Div后所有a标签黑色
后代选择器使用空格隔开,后代所有子孙全部选中Ui a{Color:red} 并集选择器使用,号隔开,兄弟单位之间选中H1,div,a,{Color:rod}
子级: 孙级:> 兄弟级:,
同级别标签选择。
元素转换
• 转换为块元素:·display:block;
• 转换为行内元素:display:inline;
• 转换为行内块元素·:display: inline-block;
颜色变换
a:link{
color: red;
}点前红色
a:visited{
color: green;
}点后绿色
a:hover{
color: blue;
}放上蓝色
a:active{
color: yellow;
}点击时候黄色
背景半透明(盒子透明)
背景颜色透明:
background-color: rgba(0, 0, 0, .3)
盒子透明
opacity
边框
border
border-width 定义边框粗细,单位是px
border-style 边框的样式 盒子样式
• none:没有边框即忽略所有边框的宽度
• solid:实线
• dashed:虚线
• dotted:点线
border-top 边框线选择,(方向 样式 颜色)
top上 bottom下 left左 right右
border-color 边框颜色
表格的细线边框
border-collapse
• collapse 单词是合并的意思
• border-collapse: collapse; 表示相邻边框合并在一起
内边距
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
padding:
1个值 padding:上下左右内边距;
2个值 padding: 上下内边距 左右内边距
3个值 padding:上内边距 左右内边距 下内边距
4个值 padding: 上内边距 右内边距 下内边距 左内边距
border-radius 边框圆角
选择 px , %。
盒子阴影阴影属性
box-shadow
offset-x 阴影的水平偏移量。正数向右偏移,负数向左偏移
offset-y 阴影的垂直偏移量。正数向下偏移,负数向上偏移
blur 阴影模糊距离
Spread 阴影大小
color 阴影的颜色
inset 表示添加内阴影,默认为外阴影 阴影透明度
box-shadow:
文字格式
font-size 字号 通常使用单位 px 像素,设置字号时一定一定带单位
font-family 字体 按照团队约定或者UI设置的字体来写
font-weight 字体粗细 加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字100-900后不要跟单位
font-style 字体样式 倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal 取消倾斜
font 字体连写 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号和字体必须同时出现
text-align
left 左对齐(默认值)
right 右对齐
center 居中对齐
盒子里面的文字对齐方式
text-decoration (装饰文本)字体线
text-decoration: none 取消下线
text-decoration: underline 下横线
text-decoration: line-through 定义穿过文本下的一条线。
text-decoration: overline 定义文本上的一条线。
text-indent(文本缩进)段落首行缩进
text-indent:10px;
2em;
div {text-indent: 10px; }
text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
div {text-indent: 2em; }
line-height (行间距 行高)字体居中
line-height: 42px; 行高设置
align="center"
行高等文字高度 文字居中
行高大于文字高度 文字往下
行高小于文字高度 文字往上
字体横线
下横线text-decoration: underline;
上横线 text-decoration:overline ;
中间线text-decoration:line-through ;
取消下横线text-decoration: none;
取消字体倾斜text-decoration: none;
字体倾斜font-style: oblique;
输入框
:focus选择器
选择获得光标的元素和输入框相关
input:focus
表单控件: <input />
1、属性名:type 设置表单类型
属性值:1、text 文本框
2、password 密码框
3、date 日期
4、file 文件
5、radio 单选
6、checkbox 多选
7、submit 提交按钮
8、reset 重置按钮
9、button 普通按钮
2、属性名:name 设置名称
属性值:自定义
3、属性名:value 设置默认值
属性值:自定义
4、属性名:placehorder 设置提示信息
属性值:自定义
文本域:<textarea></texearea>
下拉框:<select><select>
下拉框中的每一条内容都需要一对<option></option>
<body background="img/王者人物.jpg">
<form>
用户名:<input type="text" placeholder="请您输入用户名" /><br />
密 码:<input type="password" /><br />
日 期:<input type="date" /><br />
文 件:<input type="file" /><br />
单 选:
<input type="radio" name="01" value="A" />A
<input type="radio" name="01" />B
<input type="radio" name="01" />C
<label><input type="radio" name="01" />D</label>
<br />
多 选:
<input type="checkbox" name="001" checked="checked" />A
<input type="checkbox" name="001" />B
<input type="checkbox" name="001" />C
<input type="checkbox" name="001" />D
<br />
提交按钮:<input type="submit" value="立即注册" /><br />
重置按钮:<input type="reset" value="重置信息" /><br />
普通按钮:<input type="button" value="开始游戏" />
<button type="">开始游戏</button>
<br />
文本域:<textarea cols="30" rows="3"></textarea><br />
下拉框:
<select>
<option>开发视图</option>
<option selected="selected">边改边看模式</option>
<option>团队同步视图</option>
</select>
<br />
图片提交按钮:
<input type="image" src="img/btn.png" width="120" />
</form>
</body>
Lmg图片
添加背景图片:
background url(img/logo.png);
background-image: url(img/logo.png);
Back-im url img
设置渐变色
background-image: linear-gradient(red,blue,green);
Back-im li-gr 红色-蓝色-绿
插入图片
图片在框架内的位置
background-position: 40px 10px;
据左边线 上边线
·
所有透明度在0-1之间
背景透明度
background-color: rgba(0, 255, 255,0.6);
Back-col rgba 背景颜色 透明度
盒子全部透明
background-color: green; 背景颜色
opacity: 0.5; 透明度
}
于背景定位区域的百分比percentage
src属性 添加 图片路径 (照片路径)
alt属性 网页 图片加载失败 给用户的一些提示(照片备注)
title属性 用于img图片 鼠标放上 不动 给用户提示 相关信息(鼠标放上显示文字)
背景属性更改
background-color 背景颜色添加
background-image 背景图片
background-repeat (背景平铺)
Repeat 背景图像在纵向和横向上平铺(默认的)
no-repeat 不平铺
repeat-x 上平铺
repeat-y 纵向平铺
background-position 背景照片位置
background-positionl:ength
百分数 | 由浮点数字和单位标识符组成的长度值
background-position:position
top | center | bottom | left | center | right 方位名词
背景半透明(盒子透明)
背景颜色透明:
background-color: rgba(0, 0, 0, .3)
盒子透明
opacity
背景图像固定
滚动
background-attachment:scroll
固定
background-attachment:fixed
背景图像的大小
background-size: length|percentage|cover|contain;
length
设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出
一个值,第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。
如果只给出一个值,第二个是设置为"auto(自动)"
cover
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain
此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
背景简写
背景简写 : 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
文字阴影设置
offset-x 必须,水平阴影位置,允许负值
offset-y 必须,垂直阴影位置,允许负值
blur 可选。阴影模糊距离
color 可选。阴影的颜色
浮动
Float
none 元素不浮动(默认值)
left 元素向左浮动
right 元素向右浮动
超链接 <a></a>
1、属性名:href 设置链接的跳转地址
属性值:1、网址链接(https://www.baidu.com)
2、图片链接(图片的地址)
3、空连接:(#)
4、网页链接(html网页的路径)
5、下载文件
6、锚点