第一章 Html+Css使用总结（下）

zoukankan html css js c++ java

第一章 Html+Css使用总结（下）
1 开场
```
<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       
    <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; 边框设置圆角边框四角弧度
- 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的权重```
查看全文

相关阅读:
【模板】并查集
 P1063能量项链
 多维动归第一题
 7.14测试
 7.12测试
 7.10测试
 几种display:table-cell的应用
 instanceof和typeof的区别
 右侧悬浮广告
 JavaScript判断浏览器类型及版本

原文地址：https://www.cnblogs.com/ttzzyy/p/9519361.html

选择	权重
!important	Infinity(正无穷)
行内样式	1000
id	100
class-属性-伪类	10
标签-伪元素	1
通配符	0

热门文章
自定义logHelper
简单
 作业十
 第八次作业
 第七次作业
 第六次作业
 第四次作业
 第三次作业
 第二次作业
 第一次作业：编译原理概述

第一章 Html+Css使用总结（下）

1 开场

2 常用标签

3 a跳转标签

4 table表格标签

5 列表标签

6 div块级标签

7 from表单

8 通用属性

9 Css选择器

10 补充 权重及选择器选择顺序

10 补充权重及选择器选择顺序