重抓基础CSS+HTML入门知识

382 阅读34分钟

入坑前需要了解的知识点

能够说出网页的基本组成

  • 前端的工作是开发网页,那什么是网页呢?
    • 网站是指的因特网上根据一定规则,使用HTML等制作的,用于展示特定内容相关的网页集合。
    • 网页是网站中的一页,通常是HTML格式的文件,它要通过浏览器来阅读。
    • 网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成,通常我们看到的网页常以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件。
  • 什么是HTML?
    • HTML指的是超文本语言,他是用来描述网页的一种语言
    • HTML不是一种编程语言,而是一种标记语言
    • 标记语言是一套标记标签
    • 所谓的超文本有两层含义
      • 它可以加入图片、声音、视频、动画、多媒体等内容(超越了文本限制)
      • 它可以从一个文件跳转到另一个文件,与世界各地主机的文件链接
  • 网页的形成?
    • 网页是由网页元素组成的,这些元素是利用HTML标签描述出来的,然后通过浏览器解析来显示给用户。
  • 网页总结
    • 网页是由图片、视频、文本、音频等元素组成的,其实就是一个HTML文件
    • 网页生成制作,有前端人员进行书写HTML文件,然后用浏览器打开解析渲染,最终我们就能看见网页了。

能够说出常用的浏览器

  • 浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Poera,平称五大浏览器。
  • 浏览器内核(渲染引擎):负责网页内容、整理讯息、计算网页显示方式并显示网页。 | 浏览器 | 内核 | 备注 | | --- | --- |---| |IE | Trident | IE、百度 | |firefox | Gecko | 火狐浏览器内核 | |Safari | Webkit | 苹果浏览器内核 | |chrome/Opera | Blink | 谷歌和跑欧朋浏览器内核,其实Blink是Webkit的分支 |

能够说出Web标准的三大组成部分

  • Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合,W3C(万维网联盟)是国际最著名的标准化组织。
  1. 为什么需要Web标准?
    • 浏览器不同,他们显示页面或者排版就会有些许差异。开发者常常需要为多版本的开发而艰苦的工作。
    • 遵顼Web标准除了可以让不同的开发人员写出的页面更加标准,更统一外,还有一下的优点。
      • 让Web的发展前景变得更广阔
      • 内容能被更广泛的设备访问
      • 更容易被搜索引擎搜索
      • 减低网站流量费用
      • 使网站更容易维护
      • 提高页面的浏览速度
  2. Web标准的构成。
    • 主要包括结构、表现和行为三个方面。
标准说明
结构结构用于对网页元素进行整理和分类,现阶段主要学的是HTML
表现表现用于设置网页元素的版式、颜色、字体等外观样式,主要是指css
行为行为是指网页模型的定义及交互的编写,现阶段主要学的是JavaScript

HTML标签

说出HTML标签的书写注意规范

HTML的语法规范

  1. 基本语法概述
    • HTML标签是由尖括号包围的关键词,例如<html>
    • HTML通常是成对出现的,例如<html></html>,我们称为双标签。标签中的第一个标签我们称为开始标签,第二标签是结束标签。
    • 有些特殊的标签必须是单标签(极少数情况下),例如<br />,我们称为单标签。
  2. 标签的关系
    • 双标签的关系可以分为包含关系和并列关系。
    包含关系
    <head>
        <title></title>
    </head>
    并列关系
    <p></p>
    <div></div>
    

HTML基本结构标签

  1. 第一个HTML网页
    • 每一个网页都会有一个基本的结构标签(也成为骨架标签),页面内容也是在这些基本标签上书写,HTML页面也称为HTML文档
    骨架标签
    <html>
        <head>
            <title>标题</title>
        </head>
        <body>
            存放内容
        </body>
    <html/>
    
    • html是页面中最大的标签,我们称为跟标签
    • 文档头部,注意在head中我们必须要设置的标签是title标签
    • 文档的标题,让页面有一个属于自己的网页标签
    • 文档主体,元素包含文档的所有内容,页面内容基本都是放在body里面。

HTML常用标签

  1. 文档类型声明标签
    • <!DOCTYPE html>文档类型声明标签,作用就是告诉他们浏览器使用哪种HTML版本来显示网页。这句话的意思是,当前页面采取的是HTML的页面来显示的。
    • <!DOCTYPE>声明位于文档中最前面的位置,处于html标签之前。
    • <!DOCTYPE>不是一个HTML标签,它只是文档类型声明标签。
  2. <html lang = en >,lang用来定义当前文档显示的语言
    • en定义语言种类为英文
    • zh-CN定义语言种类为中文
    • fr定义语言种类为法语
    • 简单来说就是en为英文文档,zh-CN就是中文文档,但是这两个并不影响显示英文或者中文,这个属性对浏览器是有作用的,翻译功能的切换。
  3. <meta chartset = 'UTF-8' />字符集,字符集是多个字符的集合,以便计算机能够识别和存储各类文字,在head标签内,可以通过meta标签的chartset属性来规定HTML文档应该使用哪种字符编码。
    • chartset常用的值有:GB2312(简体中文)、BIG5(繁体中文)、GBK(简繁体)和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。
    • meta标签规定的字符集是必须要写的,否则可能引起乱码的情况,一般情况下统一使用UTF-8,尽量携程标准的UTF-8,不要写成utf-8或UTF8
  4. 标题标签<h1>-<h6>
  5. 段落标签和换行标签
    • 在网页中,要把文字有条理的显示出来,就需要将这些文字分段显示。在HTML标签中,

      标签用于定义段落,它可以将网页分成若干个段落。

    • 若需要文本强制换行显示,可以使用换行标签
  6. 文本格式化标签
    • 在网页中,有时需要为文本设置粗体、斜体和下划线等效果,使文本以特殊的方式显示。
语义标签说明
加粗<strong></strong><b></b>推荐使用<strong>标签,语义更强烈
倾斜<em></em>或<i></i>推荐使用<em>,语义更强烈
删除线<del></del><s></s>推荐使用<del>,语义更强烈
下划线<ins></ins>或<u><u>推荐使用<ins>,语义更强烈
  1. <div><span>标签 ,<div><span>是没有语义的,它们就是一个盒子,用来装内容的。
  2. 图像标签介绍
    • 标签介绍<img src='图像路径URL' />
属性属性值说明
src图片路径必须属性,图像路径
alt文本在图像不能成功加载时,显示
title文本提示文本,鼠标移到图片上时,显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框线的粗细
  1. 超链接<a />标签,作用是从一个页面到另一个页面,既可以跳转外部链接,也可以跳转至内部链接,例如,两个属性的作用如下
    • 链接分类
      • 外部链接<a href="跳转目标url" target="目标窗口的弹出方式"></a>
      • 内部链接<a herf="index.html">跳至首页</a>
      • 空连接<a herf="#">空链接</a>
      • 下载链接<a herf="img.zip">下载</a>如果href里面地址是一个文件或压缩包则会下载这个文件
      • 网页元素的链接<a herf="http://www.baidu.com"><img src="img.png" /></a>点击这个图片元素就会跳转到百度首页,文本、图片、视频、音频等都可以加
      • 锚点链接,点击我们的链接,可以快速定位到页面中的某一个位置。用法:第一步,在链接href中设置属性值为#+名字,例如<a href="#one">第一季</a>;第二步,找到目标位置标签,在里面添加一个id属性= 刚刚设置的名字,如<h3 id='two'>第二季介绍</h3> | 属性 | 作用 | | --- | --- | | href | 用于超链接目标的url,必须属性 | | target | 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开 |

特殊字符

  • 在HTML页面中,一些特俗的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代
特殊符号描述字符代码
空格符&nbsp;
<小于号&lt;
大于号&gt;
&和号&amp;
人民币&yen;
°摄氏度&deg;
×乘号&times;
÷除号&divide;
²平方2上标&sup2;
³立方3上标&sup3;
©版权&copr;
®注册商标&reg;

表格标签

  • 表格的作用;主要用于显示、展示数据;它可以让数据展示的非常规整。
  • 表格的基本语法
<table>
    <thead>
          <tr>
                <th></th>
           </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
  • <table></table>用于定义表格的标签;为了更好的表示表格的语义化,可以将表格分为表格头部和表格主体两大部分。<thead>表示表格头部部分,<tbody>代表表格主体部分;<tr></tr>行标签;<th></th>标题标签,<td></td>单元格的标签
  • 常用的表格属性
属性名属性值描述
alignleft、right、center规定表格相对周围元素的对齐方式
border1、""规定表格是否有边框,默认为"",表示没有边框
width像素或者百分比规定表格的宽度
cellpadding像素值规定单元格边缘border和内容之间的距离,默认是1像素
cellspacing像素值规定单元格之间的距离,默认是2像素
height像素规定单元格的高度
  • 合并表格的单元格
    • 合并表格的方式
      • 跨行合并:rowspan = "合并行单元格的个数"
      • 跨列合并:colspan= "合并列的单元格个数"

列表标签

  • 无序列表<ul><li></li></ul>
  • 有序列表<ol><li></li></ol>
  • 自定义列表
<dl>
    <dt>名词</dt>
    <dd>名词解释</dd>
</dl>
  • 在HTML标签中<dl>标签用于定义描述列表或(定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
  • 列表总结
标签名定义说明
<ul></ul>无序标签里面只能包含li,没有顺序,使用较多,li里可以包含任何标签
<ol></ol>有序列表里面只能包含li,有顺序,使用相对较少,li里面可以包含任何标签
<dl></dl>自定义列表里面只能包含dt和dd,dt和dd里面可以包含任何标签

表单标签

  • 表单标签的目的是为了收集用户的信息,在HTML中,一个完整的表单通常由表单域、表单控件(也成为表单元素)和提示信息3个部分组成。

image.png

  • 在HTML中,<form>标签会定义表单域,以实现用户信息的收集和传递。<form>表单会把它范围内的表单元素信息提交给服务器。
<form action="utl地址" method="提交方式" name="表单域名称">
    各种表单控件
</form>
  • 表单常用属性如下
属性属性值作用
actionurl地址用于指定接受并处理表单数据的服务器程序的url地址
methodget/post用于设置表单数据的提交方式,其值为get或者post
name名称用于指定表单的名称,以区分同一个页面中的多个表单域
  • 表单控件(表单元素)

    • input输入表单元素,用于手机用户信息,其中包含了type属性,输入不同的字段可以拥有很多形式的控件类型(可以是文本输入框、复选框、单选按钮、按钮);
      • type属性的属性值如下 | 属性值 | 描述 | | --- | --- | | button | 定义可以点击的按钮 | | checkbox | 定义复选框 | | file | 定义输入字段和浏览按钮,供文件上传 | | hidden | 定义隐藏的输入字段 | | image |定义图像形式的提交按钮 | | password | 定义密码字段,该字段中的字符被掩码 | | radio | 定义单选按钮 | | reset | 定义重置按钮。重置按钮会清除表单中的所有数据 | | submit | 定义提交按钮,提交按钮会把表单数据提交到服务器 | | text |定义单行的输入字段,用户可以在其中输入字段 |
  • input标签中的常用属性

属性属性值描述
name由用户定义定义input元素的名称,在定义单选按钮和复选框时,必须给input表单控件添加一样的name值
value由用户定义规定input元素的值
checkedchecked规定input元素首次加载时应被选中
maxlength正整数规定输入字段中的字符的最大长度
  • <lable>标签为input元素定义标注(标签);当点击lable标签时,input标签鼠标会自动聚焦;语法如下
<label for="sex">男</label>
<input id="sex" type="radio" name="sex" />
核心:input中的id属性值等于for属性值。
  • select下拉表单元素,语法如下
    • select中必须包含至少一个option标签
    • option标签中的selected属性 = "selected"时,表示当前项默认选中
<form>
<select>
    <option selected="selected" value="one">选项一</option>
    <option value="two">选项二</option>
</select>
<form>
//选中选项一时,返回值是one,选中选项二时,返回值是two
  • textarea表单元素,用于输入较多的多行文本。语法如下
<form>
    <textare>
        文本
    </textarea>
</form>

相对路径的三种形式

  • 路径介绍 | 相对路径 | 符号 |说明| | --- | --- | ---| | 同一级路径 | |图像文件位于HTML文件同一级| |下一级路径|/|图像位于HTML文件的下一级| |上一级路径|../|图像位于HTML文件的上一级|

  • 绝对路径:是指目录下的绝对路径,直接到达目标位置,通常是从盘符开始的路径,例如,"D:\web\logo.png"或完整的网络地址,"www.baidu.com/images/logo…"

CSS层叠样式表

css的简介

  • css是层叠样式表的简称,主要使用场景就是美化网页、页面布局的,css是一种标记语言,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

css语法规范

  • css规则主要由两个部分构成:选择器以及一条或者多条声明
    • 选择器是用于指定css样式的HTML标签,花括号内是对该对象设置的具体样式
    • 属性和属性值是以键值对的形式出现,属性是对指定的对象设置的样式属性;例如文本大小、字体颜色;属性和属性值之间用英文的:分开,多个属性之间用英文的;分开。 image.png
  • css代码风格
    • 样式格式书写;建议使用第二种格式更加的直观。
      • 紧凑格式
       h3 { color: red; font-size: 16px }
      
      • 展开格式
      h3 {
          color: red;
          font-size: 16px;
      }
      
    • 样式大小写,建议使用第二种。
      • 大写
      h3 {
          COLOR: RED;
      }
      
      • 小写
      h3 {
          color: red;
      }
      
    • 空格规范
      • 属性值的前面,冒号的后面,保留一个空格
      • 在选择器和大括号之间留有一个空格
      h3 {
          color: red;
      }
      

CSS选择器

css基础选择器

  • 选择器的作用是根据不同的需求把不同的标签选择出来,就是选择标签用的。
  • 在css中,可以根据选择器的类型把选择器分为基础选择器和符合选择器,符合选择器就是建立在基础选择器之上,对基本选择器进行组合形成。
  • 基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器
    • 标签选择器指的用HTML作为选择器,按标签名称分类,为页面中的某一种标签指定统一的css样式。
    • 类选择器是当我们想要差异化选择不同的标签,单独选一个或者几个标签,可以选择类选择器。
    • id选择器可以为标有特定id选择器的HTML元素指定特定的样式,HTML中的id属性不允许有相同的属性值,不能重复。
    • 通配符选择器使用*定义,他表示选中页面中的所有元素。
      • 代码如下
      h3 {
          color: red;
      }
      .class {
          color: pink;
      }
      #id {
          color: black;
      }
      * {
          padding: 0;
      }
      
  • 类命名规则如下
类命对应的结构类名
header头部
content/container内容
footer尾部
nav导航栏
sidebar侧栏
column栏目
left/center/right左中右
loginbar登陆条
logo标志
banner广告
main页面主体
hot页面热点
news新闻
download下载
subnav子导航
menu菜单
submenu子菜单

CSS字体属性

  • css使用font-family属性定义文本的字体系列
p {
    font-family: "微软雅黑",Arial;
}
div {
    font-family: "Microsoft Yahei";
}
  • 各种字体之间必须使用英文的逗号分隔开。
  • 一般情况下,多个单词组成的字体需要在单词之间用间隔分隔开,并且用英文的引号包含单词组。
  • 尽量使用系统默认自带的字体,保证在任何浏览器中都能正常的显示。
  • 多个字体的,浏览器会由左到右优先显示,如果第一个字体没有,则显示下一个;以此类推。

css的复合选择器

  • 复合选择器可以更准确、更高效的选择目标元素,复合选择器由两个或者多个基础选择器,通过同的方式组合而成;通常的复合选择器包括:后代选择器、子元素选择器、并集选择器、伪类选择器等等。

后代选择器

  • 后代选择器又称为包含选择器,可以选择父元素里面的子元素,语法就是外层标签写在前面,内城标签写在后面,中间用空格分隔,内层标签为外层标签的后代。
div p {
    color: red;
}

子元素选择器(子选择器)

  • 子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单李健就是只能选亲儿子元素。样式设置孙子及孙子以下是不会生效的。
  • 语法是外层元素>内层亲儿子元素
<div class="ins">
        <p>
            你好
        </p>
        <div>
            <p>换行</p>
        </div>
</div>

.ins>p {
    color:red;
}

并集选择器

  • 并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。
  • 语法;并集选择器是各选择器通过英文的,连接而成,任何形式的选择器都可以作为并集选择器的一部分。
div>p,ul>li {
    color: red;
}

伪类选择器

  • 伪类选择器用于向耨写选择器添加特俗的效果,比如给连接添加特殊效果、或选择第一个,第n个元素;伪类选择器最大的特点是用冒号 :表示,比如:hover:first-child
  • 链接伪类选择器 -a:link;选择所有未被访问的链接。
    • a:visited;选择所有已被访问的链接。
    • a:hover;选择鼠标移上的链接。
    • a:active;选择活动链接(鼠标按下未弹起的链接)
  • 链接伪类选择器注意事项
    • 为了确保生效,请按照LVHA的顺序声明::link,:visited,:hover,:active。口诀也可以用love hate来记。
  • :focus伪类选择器;获取鼠标光标的表单
input:focus {
    background: red;
}

css字体属性

css字体大小

  • css使用font-size属性定义字体大小
p {
    font-size: 16px;
}
  • px(像素)是我们网页最常用的单位。
  • 谷歌浏览器的文字默认大小为16px。
  • 不同的浏览器,可能默认的字号大小不一样,我们给body设置一个默认的大小。例如body { font-size: 16px}

css字体粗细

  • css使用font-weight属性设置文本字体的粗细。
p {
    font-weight: bold;
}
  • font-weight常用的属性值
属性值描述
normal默认值(不加粗)
bold加粗
100-900400等于normal,而700等同于bold,注意数字后面不能加符号

css文本属性

css文本装饰

  • text-decoration属性规定添加到文本的修饰,可以给文本添加下划线、上划线、删除线等
p {
    text-decoration: underline;
}
属性值描述
none没有装饰线,默认值
underline下划线
overline上划线
line-through删除线

css文本缩进

  • text-indent属性用来指定文本第一行的缩进,通常是将段落的首行缩进。
p {
    p {
        text-indent: 15px;
    }
    div {
        text-indent: 2em;
    }
}
// em是一个相对单位,就是当前元素1个中文文字的大小。

行间距

  • line-height属性用于设置行间的距离,可以控制文字与行之间的距离

css文本属性总结

属性表示注意点
color文本颜色我们通常用 十六进制 比如#ffffff
text-align文本对齐可以设定文字水平对齐方式
text-indent文本缩进通常用于段落首行缩进2个字的距离
text-decoration文本修饰添加下划线为underline,取消下划线为none,删除线为line-through
line-heigt行间距用于设置行与行之间的距离

css的引入方式

css的三种样式表

  • 行内样式表(行内式),是在元素标签内部的style属性中设置css样式,适合简单的样式。
<div style="color:red;font-size:25px"></div>
  • 内部样式表(嵌入式),是写在html内部,将所有的css单独放到一个style里面。
<style>
    div {
        color: red;
    }
</style>
  • 外部样式表(外链式);实际开发都是外部样式表,适合样式比较多的情况,核心是样式单独写到css文件中,之后把css文件引入HTML页面中。
<link rel="stylesheet" href="home.css">
  • css引入方式总结
样式表优点缺点使用情况控制范围
行内样式表书写方便,权重高结构样式混写较少控制一个标签
内部样式表部分结构和样式分离没有彻底分离较多控制一个页面
外部样式表完成是心啊结构和样式相分离需要引入最多、吐血推荐可控制多个页面

css的元素显示模式

块级元素

  • 常见的块级元素<h1>~<h6><p><div><ul><li>等。
  • 块级元素的特点
    • 比较霸道,独占一行。
    • 高度、宽度、外边距、以及内边距都可以控制。
    • 宽度默认是容器(父级宽度)的100%。
    • 是一个容器及盒子,里面可以放行内元素或者块级元素。
  • 注意事项
    • 文字类的元素内不能使用块级元素。
    • <p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是<div>
      • 同理<h1>~<h6>也是文字标签,里面也不能放块级元素。

行内元素

  • 常见的行内元素:<a><strong><b><i><del><s><ins><u><span>等。
  • 行内元素的特点
    • 相邻的行内元素在一行上,一行可以显示多个。
    • 高、宽直接设置是无效的。
    • 默认的宽度就是它本身内容的宽度。
    • 行内元素只能容纳文本或者其他行内元素。
  • 注意事项
    • 链接里面不能再放链接
    • 特殊情况链接<a>里面可以放在块级元素,但是给<a>转换成块级元素最安全。

行内块元素

  • 在行内元素中有几个特殊的标签<img><input>、`。他们同时具有块级元素和行内元素的特点。
  • 行内块元素的特点
    • 和相邻的行内块元素及行内元素在一行上,但是他们之间会有空白间隙。一行可以显示多个。
    • 默认宽度就是它本身内容的宽度。
    • 宽高、行高、内外边距可以直接设置。

css的三大特性

层叠性

  • 相同的选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突样式。

继承性

  • css继承性,子标签会继承父标签的某些样式,如文本颜色字号。
    • 子元素可以继承父元素的样式(text-、font-、line-)等这些开头的都可以继承,以及color
    • 行高的继承性,语法如下
    body {
        font:12px/15px;
    } 
    div {
        font:14/1.5;
    }
    
    • 注意:
      • 行高可以跟单位也可以不跟单位。
      • 如果子元素没有设置行高,则会继承父元素的行高的1.5倍。
      • 没有单位的写法,行高是当前字体大小的1.5倍。第二种写法的优势是子元素可以根据自己文字大小调整行高。

优先级

  • 选择器相同,则执行层叠性(覆盖)
  • 选择器不同,则根据选择器的权重执行。选择器权重如下表
选择器选择器权重
继承或者*0,0,0,0
元素选择器0,0,0,1
类选择器,伪类选择器0,0,1,0
id选择器0,1,0,0
行内样式1,0,0,0
!important无穷大

css背景图片

  • 背景图片的复合写法
    • background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置。
  • 背景色半透明
    • background:rgba(0,0,0,.3)
    • 注意:背景半透明不会影响到内容。这是css3新增的属性,是IE9+版本浏览器才支持。

css盒子模型

  • 页面布局三大核心,盒子模型、浮动和定位。

css浮动

  • 清除浮动的方法
    • 额外标签法(隔墙法);额外标签法在浮动元素的末尾添加一个空标签,例如<div style="clear:both"></div>

      • 优点:通俗易懂,书写方便。
      • 缺点:添加许多无意义的标签,结构较差。
      • 注意:添加的新标签必须是块级元素,否则不能清除浮动的影响。
    • 父元素添加overflow属性,属性值为hidden、auto、scroll都可以。

      • 优点:代码简洁。
      • 缺点:无法显示溢出的部分。
    • :after伪元素法,给父级元素添加。

      • 优点:没有增加标签,结构更简单。
      • 照顾低版本浏览器。
         .clearfix:after {
              content:'';
              display:block;
              height:0;
              clear:both;
              visibility:hidden;
          }
         .clearfix {
              //IE6 7 专有
              *zoom:1;
          }
      
    • 双伪元素清除元素,也是为父元素添加。

      • 优点:代码更简洁。
      • 缺点:照顾低版本浏览器。
      .clearfix:before,.clearfix:after {
          content:'';
          display:table;
      }
      .clearfix:after {
          clear:both;
      }
      .clearfix {
          *zoom:1;
      }
      

核心阴影

  • box-shadow:h-shadow v-shadow blur spread color inset
描述
h-shadow必需,水平阴影位置,允许负值。
v-shadow必需,垂直阴影位置,允许负值。
blur可选,模糊距离。
spread可选,阴影尺寸大小。
color可选,阴影的颜色。
inset可选,将外阴影改为内阴影。

css书写顺序

  • 布局定位属性:displaypositionfloatclearvisibilityoverflow
  • 自身属性:widthheightmarginpaddingborderbackground
  • 文本属性:colorfonttext-decorationtext-alignvertical-alignwhite-spacebreak-word
  • 其他属性:contentcursorborder-radiusbox-shadowtext-shadow等等。

css定位

  • 相对定位relative(重要)
    • 相对定位的特点
      • 他是相对于自己原来的位置来移动的。(移动位置的时候参照点是自己原来的位置)
      • 原来在标准的位置继续占有,后面的盒子仍然以标准流的方式来对待它。(不脱离文档流,继续保留原来的位置),它最典型的应用是给绝对定位当爹的。
  • 绝对定位absolute,绝对定位是元素在移动位置的时候,是相对于他的祖先元素
    • 绝对定位的特点
      • 如果没有祖先元素或祖先元素没有定位,则以浏览器为准定位。
      • 如果祖先元素有定位(相对、绝对、固定),则以最近一级的有定位的祖先元素为参考点移动位置。
      • 绝对定位不在占有原先的位置,脱离文档流。
  • 固定定位fixed,固定于浏览器可视区域的位置。在浏览器页面滚动时元素的位置不会改变。
  • 粘性定位sticky,粘性定位可以被认为时相对定位和固定定位的混合
    • 语法: div {position: ticky;top: 10px;}
    • 特点:
      • 以浏览器的可视窗口为参照点移动元素(固定定位的特点)。
      • 粘性定位是占有原先的位置(相对定位的特点)。
      • 必须添加topbottomleftright其中的一个才会有效。
  • 定位的拓展
    • 绝对定位的盒子水平垂直居中
      //定宽高
      div {
          width:200px;
          height:200px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -100px;
          margin-top: -50%;
      }
      //不定宽高
      div {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%)
      }
      
    • 定位的特殊性
      • 行内元素添加绝对定位或者固定定位,可以直接设置高度和宽度。浮动也是一样。
      • 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
      • 绝对定位和固定定位会完成压住盒子和文字,但是浮动不会压住文字,浮动产生最初的目的就是为了实现文字环绕的效果。给图片添加一个浮动,就会产生文字环绕效果。
定位模式是否脱标(脱离文档流)参照点
static静态定位否(占有位置)不能使用边偏移
relative相对定位否(占有位置)相对于自身位置偏移
position绝对定位是(不占有位置)带有定位的父级元素
fixed固定定位是(不占有位置)浏览器可视区
sticky粘性定位否(占有位置)浏览器可视区

精灵图

  • 精灵技术的目的:为了有效的减少服务器接受和发送请求的次数,提高页面的加载速度。
  • 精灵图主要是针对背景图片使用,就是把多个小背景图片整合到一张大图片中。这个大图片我们称为sprites 精灵图或者雪碧图。
  • 使用精灵图的核心:移动背景图片的位置,此时可以使用background-position,移动雪碧图到对应的位置即可。
  • 精灵图的缺点:
    • 图片文件还是比较大的。
    • 图片本身放大缩小会失真。
    • 一旦图片制作完毕,想要更换非常的发杂。于是便出现了一种技术,就是字体图标iconfont

字体图标

  • 字体图标展示的是图标,但是本质属于字体。
  • 字体图标的优点
    • 轻量级:一个图标字体要比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少服务器的请求。
    • 灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等。
    • 兼容性:几乎支持所有的浏览器,请放心使用。
    • 注意:字体图标并不能替代精灵技术,只是对工作中的图标部分技术的提升和优化。

css用户界面样式

鼠标样式cursor

属性值描述
default默认
pointer小手
move移动十字架
not-allowed禁止

轮廓线outline

  • 给表单添加outline:0或者outline:none;样式之后就可以去掉默认input表单点击后的蓝色边框线。

input {outline: none;}

  • 如果需要点击以后改变input表单的边框线代码如下
input:focus {
    border: 1px solid red;
}

防止拖拽文本域resize

<textarea> 你好</textarea>

textarea {
    resize: none;
}

vertical-align属性的应用

  • css的vertical-align属性使用场景;经常用于设置图片或者表单(行内块元素)和文字垂直对齐。但是它只对于行内块素或者行内元素有效。 vertical-align: baseline | top | middle | bottom
描述
baseline默认。元素位置放在父级的基线上
top把元素的顶端与行中最高的元素的顶端对齐
middle把此元素的位置放置在父元素的中部
bottom把元素的底端与行中最低的元素的底端对齐

image.png

  • 解决图片底部默认空白缝隙的问题
    • 出现这个问题的原因是:图片底部会有一个空白间隙,原因是行内块元素和文字的基线对齐。主要解决办法有两种
      • 给图片添加vertical-align:middle|top|bottom(提倡使用的)。
      • 给图片转换成块级元素,display:block

文字溢出省略号显示

// 单行文本溢出省略号显示

//1、先强制一行内显示文本
white-space: nowrap;(默认normal,自动换行)
//2、超出部分隐藏
overflow: hidden;
//3、文字用省略号替代超出部分
text-overflow: ellipsis;

// 多行文本溢出省略号显示,有较大的兼容性问题,适合于webkit浏览器或移动端(移动端大部分是webkit内核)
overflow: hidden;
text-overflow: elipsis;
//弹性伸缩盒子模型显示
display: -webkit-box;
//限制在一个块元素显示的文本行数
-webkit-line-clamp: 2;
//设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;

css重置样式表

*{margin:0;padding:0}em,i{font-style:normal}li{list-style:none}img{border:0;vertical-align:middle}button{cursor:pointer}a{color:#666;text-decoration:none}a:hover{color:#c81623}button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}body{-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}.hide,.none{display:none}.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}.clearfix{*zoom:1}

Emmet语法

  • 快速生成HTML结构语法
    • 如果想要生多个相同标签标签加上*个数就可以了;例如li*3就可以快速生成三个li标签。
    • 如果有父子级关系的标签可以用>,例如ul>li就可以了。
    • 如果是兄弟级关系的标签就可以用+,例如div+p。
    • 如果要生成带有属性或者类的标签,直接写.demo或者#nav加回车键就可以了。
    • 如果想要标签类名带顺序可以使用.demo$*5即可。
    • 如果想要生成的标签内部有内同可以用{}包含内容,例如.demo{hello word}
  • 快速生成css样式
    • 比如w200可以快速生成width: 200px
    • lh20px可以快速生成line-height: 20px
    • ti2em可以快速生成text-indent: 2em

HTML5的新特性

HTML新增的语义化标签

  • HTML5的新增特性主要是针对以前的不足,增加了一些新的标签、新的表单和新的表单属性等。
标签元素描述
header头部标签
nav导航栏标签
article内容标签
section某个区域标签,可以理解为大号的div
aside侧边栏标签
footer底部

HTML5新增的多媒体标签

  • 音频:<audio>
    <audio width="200" height="200" controls>
        <source src="movie.mp3" type="video/mp3">
        <source src="movie.ogg" type="video/ogg">
        您的浏览器不支持video标签
    </audio>
    // 视频代码会从上到下执行,如果第一行符合就停止,如果不符合接着往下走,如果都不符合就显示文字部分。
    
  • 音频的常见属性
属性描述
autoplayautoplay如果出现该属性,则音频在就绪后就自动播放
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮
looploop自动循环播放
srcurl播放MP3的地址
  • 视频:<video>
    <video width="200" height="200" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        您的浏览器不支持video标签
    </video>
    // 视频代码会从上到下执行,如果第一行符合就停止,如果不符合接着往下走,如果都不符合就显示文字部分。
    
属性描述
autoplayautoplay视频就绪就自动播放(谷歌添加muted来解决自动播放的问题)
controlscontrols视频播放控件
looploop播放完自动循环
preloadauto(预先加载视频) node(不预先加载视频)规定是否预加载播放该视频,如果设置了autoplay属性则该属性就会被忽略
poster图片src加载等待的画片图片
mutedmuted静音播放

HTML5新增的input表单

  • 必须配合form表单使用才有效果 | 属性值 | 说明 | | --- | --- | | type="email" |限制用户输入必须为邮箱类型 | |type="url"|限制用户输入必须为URL类型| |type="date"|限制用户输入必须为日期类型| |type="time"|限制用户输入必须为时间类型| |type="month"|限制用户输入必须为月类型| |type="week"|限制用户输入必须为周类型| |type="number"|限制用户输入必须为数字类型| |type="tel"|限制用户输入必须为手机号码| |type="search"|搜素框| |type="color"|生成一个颜色选择表单|

HTML5新增的表单属性

属性说明
requiredrequired表单拥有该属性表示其内容不能为空,必填
palceholder提示文本表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
multiplemultiple可以多选文件提交
autocompleteoff/on当用户在字段开始输入时,浏览器基于之前输入过的值,聚焦后显示出在字段中填写的选项,同时加上name属性,并且提交必须成功的才可以哦
  • 可以通过以下方式修改placeholder里面的字体颜色。
input::placeholder {
    color: red;
}

css3的新特性

css3新增的选择器

属性选择器

  • 属性选择器可以根据元素特定的特性来选择元素,这样就可以不用借助于类或者id选择器。
/* 选择所有input中有value属性的表单 */
input[value] {
    color: red;
}
/* 选择input表单中type属性等于submit的表单。重点哦 */
input[type=submit] {
    color: pink;
}
/* 选择属性值开头的某些元素 */
div[class^=icon] {
    color: black;
}
/* 选择属性值以什么结尾的某些元素 */
div[class$=data] {
    cursor: pointer;
}
/* 选择属性值中含有什么的某些元素 */
div[class*=val] {
    color: yellow;
}

结构伪类选择器

  • 结构伪类选择器主要根据文档结构来选择元素,常用于父级选择器里面的子元素。
选择符简介
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中最后一个子元素E
E:nth-child(n)匹配父元素中的第n个子元素E;n可以为even偶数,odd奇数
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E中的最后一个
E:nth-of-type(n)指定类型E中的第n个
  • 其中n可以是数字,关键字和公式,公式如下
公式取值
2n偶数
2n+1奇数
5n5 10 15 20
n+5从第五个开始一直到最后
  • 注意:
    • nth-child对父元素里面所有的孩子排序选择(序号是固定的),先找到第n个孩子看看是否和E匹配,如果不匹配则不生效。
    • nth-of-type对父元素里面的指定元素今昔那个排序选择,先去匹配E,然后再根据E找到第n个孩子

伪元素选择器

  • 伪元素选择器可以帮助我们利用css创建新标签元素,而不需要HTML标签,从而简化HTML结构。
选择符简介
::before再元素内部的最前面插入内容
::after在元素内部的最后面插入内容
  • 注意
    • before和after创建一个元素,但是属于行内元素。
    • 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素。
    • 语法:element::before{}。
    • before和after必须有content属性。
    • 伪元素和标签选择器一样权重为1。

CSS3的其他特性

css3滤镜 filter,将模糊或者颜色偏移等图形效果应用于元素。

  • 语法:filter: 函数();例如filter:blur(5px)模糊处理,blur数值越大越模糊。

css3 calc函数,声明css属性值时执行一些计算

  • 语法:width: calc(100% - 50px)

css3 过渡

  • 过渡在css3中具有颠覆性,当元素从一个样式变换为另一个样式时为元素添加效果。
  • 过渡动画:是从一个状态渐渐的过渡到另外一个状态。
  • 可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持,但是不会影响页面布局。
  • 我们现在经常和:hover一起搭配使用。
  • 语法如下
    • transition: 要过渡的属性 花费的时间 运动曲线 何时开始
      • 运动曲线有linear匀速、ease逐渐减速、ease-in加速、ease-out减速、ease-in-out先加速后减速。默认ease
    • 如果想要写多个属性,利用逗号分割 transition: width .5s, height .5s
    • 如果想要多个属性都变化可以用all transition: all .5s
    • 注意:谁做过渡就给谁加。

2D转换transform

转换(transform),可以实现元素的位移、旋转、缩放等效果,可以简单理解为变形。

  • 2D转换之平移 translate
    • 语法
    transform: translate(x,y);
    /* 或者分开写 */
    tansform: translateX(n);
    transform: translateY(n);
    
    • 重点
      • 定义2D转换中的移动,沿x轴和y轴移动元素
      • translate最大的特点是,不会影响到其他元素的位置;
      • translate中的百分比单位是相对于自身元素的宽度或者高度。
      • 对行内标签没有效果。
  • 2D转换之rotate,让元素在二维平面内顺时针或者逆时针旋转
    • 语法
    tansform: rotate(度数)
    
    • 重点
      • rotate里面的跟度数,单位是deg,比如rotate(45deg)
      • 角度为正时,顺时针,为负时逆时针。
      • 默认旋转的中心点时元素的中心点。
  • 2D转换中心点transform-origin
    • 语法 transform-origin: x y;
    • 重点
      • 注意后面的参数是x和y是用空格隔开的。
      • x y默认转换的中心点是元素的中心点(50% 50%)。
      • 还可以给x y设置像素或者方位词(top bottom left right center)
  • 2D转换之缩放,顾名思义,可以放大和缩小,只要给元素添加上了这个属性就能控制它放大还是缩小
    • 语法 transform: scale(x,y)
    • 注意
      • 注意其中的x和y用逗号隔开
      • transform: scale(1,1)宽高都放大一倍,相当于没有放大。
      • transform: scale(2),宽高都放大了两倍,相当于transform: scale(2,2)。
      • transform: scale(.5),宽高都缩小了0.5倍。
      • scale缩放最大的优势:可以设置转换中心点缩放,默认是中心点缩放的,而且并不影响其他盒子。
  • 2D转换综合写法
    • 同时使用多个转换,其格式为transform: translate() rotate() scale()...等
    • 其顺序会影响转换的效果。(先旋转会改变坐标轴的方向)。
    • 当我们同时又位移和其他属性的时候,记得要将位移放到最前面。

动画(animation)

  1. 用keyframes定义动画
    @keyframes 动画名称 {
        0% {
            width: 200px;
        }
        100% {
            width: 400px;
        }
    }
    
    • 0%和100%叫做动画序列
      • 0%是动画的开始,100%是动画的结束。这样的规则就是动画序列。
      • 在@keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果。
      • 动画是使一种元素逐渐变化到另一种样式的效果,可以改变任意多的样式任意多的次数。
      • 请用百分比来规定变化发生的时间,或用关键词from和to等同于0%和100%。
  2. 元素使用动画
    div {
        /* 动画名称 */
        animation-name:move;
        /* 持续时间 */
        animation-duration:2s
    }
    
    • 动画常用属性
属性描述
@keyframes规定动画
animation所有动画属性的简写属性,除了animation-play-state属性
animation-name@keyframes规定的动画名称。(必须的)
animation-duration规定动画完成的持续时间,可以是秒(s)或者毫秒(ms)
animation-timing-function规定动画的速度曲线,默认是ease
animation-delay规定动画是合适开始
animation-iteration-count规定动画被播放的次数,默认是1,值还可以是infinite(无限循环播放)
animation-direction规定动画是否在下一周期逆向播放,默认是normal,值还可以是alternate(逆向播放)
animation-play-state规定动画初始状态是运行还是暂停,默认是running,暂停时paused
animation-fill-mode规定动画结束后的状态,保持forwards,回到起始backwards