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

第一章 Html+Css使用总结（下）的更多相关文章

  1. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  2. 第一章 HTML+CSS(中)

    4.域元素(form表单.textarea文本域.fieldset域集合.input使用) 案例 表单 用户名: 密码: 昵称: 你喜欢的水果有? 苹果 黄瓜 香蕉 请选择性别 男 女 请选择你要的网 ...

  3. PHP第一章学习——了解PHP（下）

    继续昨天的部分! —————————————————————————————— 首先Ubuntu下安装Apache软件: ubuntu更新源有问题,又要解决半天! 我现在很冷静! 安装Apache教程 ...

  4. 第一章 HTML+CSS(上)

    HTML 网页的组成 HTML简介 HTML的语法 HTML的常用标签 HTML中的表格和表单 CSS的简单应用 我们这里使用WebStorm开发工具 配置浏览器 常用插件: CodeGlance 代 ...

  5. 第一章 什么是SQL Server Integration Services （ssis) 系统。

    note:我也是刚入门的菜鸟,让我们大家一块学习SSIS系统,工作中需要用到SSIS.您的浏览是我更新的最大动力,谢谢!  SSIS是Microsoft SQL Server Integration ...

  6. MVC 第一章（下）

    继续第一章 用Javascript and jQuery调用Web API 在上一节,我们用浏览器直接调用web API.但是大多数web API被客户端应用以编程的方式调用.那么我们写一个简单的ja ...

  7. (linux shell)第一章--小试牛刀(下)

    文章来源: (linux shell)第一章--小试牛刀(下) 1.6 数组和关联数组 1.6.1 预备知识 Bash同一时候支持普通数组和关联数组.普通数组仅仅能使用整数作为数组索引,而关联数组能够 ...

  8. 《Django By Example》第一章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...

  9. Nova PhoneGap框架 第一章 前言

    Nova PhoneGap Framework诞生于2012年11月,从第一个版本的发布到现在,这个框架经历了多个项目的考验.一直以来我们也持续更新这个框架,使其不断完善.到现在,这个框架已比较稳定了 ...

随机推荐

  1. Spring中 @Autowired标签与 @Resource标签

    spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. @Autowired ...

  2. 使用Rancher和私有仓库快速搭建Kubernetes集群

    来来来,先出题:Rancher可以快速部署Kubernetes,但其使用的gcr.io上的镜像无法下载怎么办?使用Rancher可以快速部署Kubernetes,但我们需要下载哪些镜像?Rancher ...

  3. 使用pm2 管理node服务后台运行

    npm run dev的服务想放在服务器上,但是putty一断服务就没了. 网上差了下forever和pm2用的比较多,尤其是pm2 简直太好用了.. 具体操作如下 安装 npm install -g ...

  4. English trip V2 - A 1. Fastival Teacher:Julia Key:

    In this lesson you will learn to talk about dates and times. 课上内容(Lesson) Tell your tutor about a fe ...

  5. HTML辅助方法

    顾名思义,HTML辅助方法(HTML Helper)就是用来辅助产生HTML之用,在开发View的时候一定会面对许多HTML标签,处理这些HTML的工作非常繁琐,为了降低View的复杂度,可以使用HT ...

  6. flask请求上下文

    先看一个例子: #!/usr/bin/env python # -*- coding:utf-8 -*- import threading # local_values = threading.loc ...

  7. [sgu P155] Cartesian Tree

    155. Cartesian Tree time limit per test: 0.25 sec. memory limit per test: 65536 KB input: standard i ...

  8. java截取字符串，第4位以后的字符串用*代替

    public class F { public static void main(String[] args) { /**截取字符串,第4位以后的字符串用*代替*/ String s = " ...

  9. Linux c 从文件当中读取任意一行的数据

    代码如下 #include <stdio.h>#include <stdlib.h>#include <sys/stat.h>#include <sys/ty ...

  10. Learn how to use git

    Git配置 $ git config --global user.name "Your Name" $ git config --global user.email "e ...