第一章 Html+Css使用总结(下)
1 开场
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。 -->
<meta charset="UTF-8">
<!-- 自适应屏幕尺寸 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789,那么就调用高版本的那个也就是IE9。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 页面的简短描述(限150个字符)在某些情况下这个描述作为搜索结果中所示的代码片段的一部分。下面给出淘宝和京东的写法-->
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
<title>Document</title>
</head>
<body>
</body>
</html>
2 常用标签
- img图片标签
<img src="图片路径" alt="图片显示失败时的说明" title="鼠标移动到图片上的说明">
- h标题标签
<h1>----<h6>
- p段落标签
<p></p>
- 换行标签
<br/>
- 注释标签
<!--...-->
- 斜体字标签
<i></i>
- 加重粗体字标签
<strong></strong>
- 上标字标签
<sub></sub>
- 下标字标签
<sup></sup>
- 文本容器标签
<span></span>
3 a跳转标签
<a href="连接地址 | 如果#haha 那么就会跳转到有name='haha'属性的元素处"---- target="_self(默认)在当前页面打开 | _blank在新窗口打开"></a>
text-decoration:none;
取消下划线text-decoration:underline;
设置下划线cursor:pointer;
鼠标移动上去光标变成手- a标签伪类事件()
a:link{ css样式 }
未被点击a:visited{ css样式 }
已被点击a:hover{ css样式 }
鼠标划过a:active{ css样式 }
正在点击- 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的
- 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的
4 table表格标签
<table>
定义表格- 属性
border
设置表格边框大小,样式 - 属性
cellpadding
设置表格内单元格内容和单元格的间距 - 属性
cellspacing
设置表格内单元格间距 - 属性
border-collapse: collapse;
合并边框(separate
:分散)
- 属性
<tr>
定义表格的行<th>
定义表格的表头<td>
定义表格单元- 属性
colspan
设置合并多少列 - 属性
rowspan
设置合并多少行
- 属性
<caption>
定义表格标题<thead>
定义表格的页眉<tbody>
定义表格的主体<tfoot>
定义表格的页脚
5 列表标签
<ol>
定义有序列表- 属性
type
值:1->(默认)数字列表 A->大写字母列表 a->小写字母列表 I->大写罗马数字列表 i->小写罗马数字列表 - 属性
start
值:10->如果时数字列表那就是从10开始
- 属性
<ul>
定义无序列表- 属性
list-style-type
值:disc->(默认)实心圆列表 circle->空心圆列表 square->正方形列表 none->无
- 属性
<li>
定义列表项<dl>
定义列表<dt>
自定义列表项目<dd>
定义自定列表项的描述list-style-image: url("图片地址");
设置li图片list-style-type: georgian;
修改li前的标记图片list-style-position: inside;
li离屏幕左边远一点list-style-position: outside;
li离左边屏幕近一些
6 div块级标签
padding
内边距padding="0 0 0 0"
(上右下左)padding="0 auto"
(上下0,左右自动)margin
外边距margin="0 0 0 0"
(上右下左)margin="0 auto"
(上下0,左右自动)padding-botton
设置内低边距;left
设置内左边距;right
设置内右边距;top
设置内上边距border:1px red dashed
设置div边框为1px 红色 虚线 solid 实线- 针对超出div范围的内容
overflow: hidden;
隐藏超出的区域overflow: scroll;
显示滚动条overflow: auto;
自动设置是否显示滚动条
box-shadow: 10px 10px 5px #FF00FF;
阴影效果(宽,高,清晰度 值小清,颜色)- 布局
position: relative;
相对布局(占据空间)position: absolute;
绝对布局(不占据空间相当于浮动)position: fixed;
固定布局 (不占据空间相当于浮动 会随着页面移动--小广告)position: static;
静态布局(左右偏移无用)left:20px;rigth:20px;
左右偏移z-index: 2;
值大的更靠近用户(覆盖效果呈现)float: left
左浮动clear: both
清除浮动
display:inline;
变成行内元素了display:block;
变成块级元素了display:none;
隐藏标签不占用位置visibility:hidden;
隐藏并占用原位置- 设置文字效果
text-decoration:overline;
上划线text-decoration:line-through;
中划线letter-spacing:10px;
间距文字
- 滚动图片
<marquee width="250px"><img src="images/login_box.png"></marquee>
默认右滑出左 从DIV中间滑出左<marquee behavior="slide"><img src="images/login_box.png"></marquee>
默认右滑出左(设置不出div)<marquee behavior="alternate"><img src="images/login_box.png"></marquee>
在DIV中左右摆动<marquee direction="right"><img src="images/login_box.png"></marquee>
从DIV左滑出右<marquee scrollamount="20"><img src="images/login_box.png"></marquee>
默认右滑出左 速度为20<marquee scrollamount="20" loop="2"><img src="images/login_box.png"></marquee>
默认右滑出左 滑出2次
7 from表单
<input type="text"/>
文本域<input type="password"/>
密码域pattern="[0-9]{6}"
可以设置密码格式为0-9的6位数字 如果不对提示(正则)
<input placeholder="绰号"/>
隐藏提示<input type="checkbox" checked="true">黄瓜
复选框按钮 一开始显示为✔ 如果前面也有 都会显示为✔- 单选框按钮 name必须一样 一开始显示为✔ 如果前面也有以后面为准
<input type="radio" name="sex" checked="true">男
<input type="radio" name="sex" checked="true">女
- 下拉选项框 option具体的选项
multiple
属性设置下拉菜单是否有滚动条<select name="xx" id="xxx">
<option value="1">www.baidu.com</option>
<option value="2">www.google.com</option>
</select>
- 按钮
<input type="button" value="按钮">
普通按钮<input type="submit" value="确定">
确定按钮<input type="reset">
重置按钮(重置域里面的文件)<input type="file">
文件域
<textarea cols="20" rows="10">请填写个人信息</textarea>
可以拖拽的文本域rows
是现实多少行cols
是现实多少列readonly
是设置只读不能写入<fieldset><legend>地址信息</legend></fieldset>
有左上标题的文本域legend
就是左上标题
8 通用属性
align=“center”
表示水平位置 居中 right右对齐 默认为left左对齐bgcolor
body部分背景颜色(其他一些div等元素的背景颜色属性为background-color)background-img(src="")
背景图片("这里面放图片地址")(图片可以用width,和height设置大小)background-color
设置背景颜色color: blue;
字体颜色font-family: 楷体;
字体font-size: 50px;
字体大小text-align: center;
内文本居中text-indent: -2em;
首行退进2字符text-indent: 2em;
首行缩进2字符(em就是一个字体的高度和宽度)line-height:61px;
设置字体的行高,一般用来调整字符的垂直方向的位置,当行高跟块级元素高度一致是,字体就会垂直居中font-weight: normal;
设置字体粗细(普通 bold加粗 900粗细)text-transform: capitalize;
首字母大写text-transform: lowercase;
全部小写text-transform: uppercase;
全部大写text-shadow: 20px 20px 0px #FF00FF;
阴影效果 居左 居上 清晰度(值小清) 颜色text-wrap: normal;
自动换行 不会拆分英文border-radius:50px;
边框设置圆角 边框四角弧度width: 100px;
设置宽height: 50px;
设置高- 背景图片
background-size: 500px 500px;
设置图片大小background-repeat: no-repeat;
设置图片不允许重复background-attachment: fixed;
设置滚动页面的时候图片不滚动background-repeat: repeat;
设置图片允许重复(默认)background-repeat: repeat-x;
设置图片X轴可以重复background-repeat: repeat-y;
设置图片y轴可以重复background-repeat: no-repeat;
设置图片不允许重复background-position: right center;
设置图片起始位置 可以写入 100px 100px (背景定位方式;第一个值的取值范围:left center right; 第二个 top center bottom)opacity:0.1
设置透明度 0.0-1.0
- 如果字体超出标签要变成...
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
!important
优先级display:inline;
变成行内元素了display:block;
变成块级元素了display:none;
隐藏标签不占用位置visibility:hidden;
隐藏并占用原位置vertical-align:10px;
文本和图片的对其方式
9 Css选择器
- 类选器:定义标签
class值
引用样式需要用.值{ 样式 }
- ID选择器:定义标签
id值
引用样式需要用#值{ 样式 }
- 派生选择器:如
a
标签 引用样式需要用a{ 样式 }
- 属性选择器:
[属性名"]
- 属性值选择器:
[属性名="属性值"]
- 分组选择器:
div,p,span{ 样式 }
- 并列选择器:
div.属性
- 伪元素选择器如:(往div前面加图片)
- 前伪类
div::before{countent:""; display:inlineblock;}
- 后伪类
div::after{content:""; display:inlineblock;}
- 前伪类
10 补充 权重及选择器选择顺序
选择 | 权重 |
---|---|
!important | Infinity(正无穷) |
行内样式 | 1000 |
id | 100 |
class-属性-伪类 | 10 |
标签-伪元素 | 1 |
通配符 | 0 |
- 浏览器在用各种父子选择器的时候是自右向左选择的!
- 权重一样执行后面的:在计算机里权重无穷+1>无穷
| idDiv .classP div |
| 100 10 1 |
结果为111的权重```
![](https://images.cnblogs.com/cnblogs_com/ttzzyy/1217900/o_11.png)
您的资助是我最大的动力!
金额随意,欢迎来赏!