返回顶部
扩大
缩小

Heaton

第一章 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的权重```

posted on 2018-08-22 17:55  咘雷扎克  阅读(279)  评论(0)    收藏  举报

导航