HTML和CSS基础

阅读数:759 发布时间:2016-05-09 10:11:43

作者:zzl005 标签: HTML CSS 朱忠来005

标签

<em><strong>都表示强调,<em> 会变成斜体,<strong>会加粗,推荐用<strong>

<span>,没有语义,只是为了单独添加样式,不用作强调,不能被屏幕阅读器读出来

<q></q>标签,表示引用别人的话(简短文本),默认会加上双引号,但这个标签的重点是语义:引用别人的话

<blockquote>标签,引用大段的文本,注意与<q>标签的区别,一个是简短文本,另一个是大段文本。同时,浏览器会将<blockquote>缩进,并且不会为之加上`""双引号

<br />标签,是一个空标签,用来给内容折行,为什么不用回车和空格呢?因为HTML中是会忽略回车和空格的,同时注意<br />是比<br> 更规范的写法

 作用:空格,因为HTML中输入空格和回车都是没有作用的。

<hr />标签,用来加上分割横线,是一个空标签,<hr />是更规范的写法

<code> 标签,表示单行代码,<pre> 标签,表示可以用来表示多行代码,但是 <pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

<ul><li></li><li></li></ul> 标签,没有先后顺序的信息列表,ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点

<ol><li></li></ol> 标签,有序列表,网页中显示的默认样式一般为:每项 <li> 前都自带一个序号,序号默认从1开始

<div></div>标签,独立的逻辑部分,相当于一个容器

<body>标签,页面内容都放在里面

<p>标签,用来表示文章的段落,标签的默认样式,段前段后都会有空白

<strong></strong><em></em> 都表示强调,<strong></strong>语气更强烈点,<em>默认是斜体,<strong>默认是粗体,<strong></strong>更推荐

<a></a>标签,实现,超链接,<a herf = "目标网址" title = "鼠标滑过显示的文本">链接显示的文本title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。主要方便搜索引擎了解链接地址的内容(语义化更友好)
浏览器默认是在当前窗口打开链接的,而target = "",设置链接打开方式,<a href="目标网址" target="_blank">click here!</a>就是在新标签打开
mailto属性是,用来链接email地址。<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感。&body=你好,对此评论有些想法。">对此影评有何感想,发送邮件给我。

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">标签,用来插入图片

1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。

CSS

认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

css 样式由选择符声明组成,而声明又由(属性和值)组成

  • 选择符:又称选择器,指明网页中要应用样式规则的元素
  • 声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔

注意:
1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内

CSS 注释语句:/*注释*/

三种样式:

三种样式的优先级:内联式 > 嵌入式 > 外部式
前提是:嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。
总的前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下

CSS选择器

选择器:每一条css样式声明(定义)由两部分组成,形式如下:

选择器{ 样式; }

在{ }之前的部分就是“选择器”,“选择器”指明了{ }中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

类选择器.类选器名称{css样式代码;}
注意:

  1. 英文圆点开头
  2. 其中类选器名称可以任意起名(但不要起中文)

ID选择器 与 类选择器的一些重要的区别:

  1. 为标签设置id="ID名称",而不是class="类名称"
  2. ID选择符的前面是井号(#)号,而不是英文圆点(.)
  3. ID选择器只能在文档中使用一次。
  4. 可以使用类选择器词列表方法为一个元素同时设置多个样式。而ID选择器不可以

子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。

包含(后代)选择器,即加入空格,用于选择指定标签元素下的后辈元素。

总结:作用于元素的第一代后代,空格作用于元素的所有后代。

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素

伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:red;}
注意:

现在比较常用的还是 a:hover 的组合

分组选择符(,),当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)

CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。

CSS样式的权值:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

CSS样式的层叠:层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

CSS样式的重要性:有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。

p{color:red!important;}  
p{color:green;}  
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

注意:!important要写在分号的前面
优先级:

浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式

但记住!important优先级样式是个例外,权值高于用户自己设置的样式。

文字排版

字体:font-family: "Microsoft Yahei"
字号、颜色:font-size:12px;color:#666
粗体:font-weight:bold
斜体:font-style:italic;
下划线:text-decoration:underline;
删除线:text-decoration:line-through;
缩进:text-indent:2em;(缩进两个)
行间距:line-height:2em;(行高)
中文字间距、字母间距:letter-spacing(文字间隔、字母间隔);英文单词之间的间距呢?可以使用 word-spacing
对齐:块状元素中的文本、图片设置居中样式,text-align:center;

颜色

字体颜色(color)、背景颜色(background-color)、边框颜色(border)等
设置颜色的方法:

  1. color:red;
  2. RGB颜色:由 R(red)、G(green)、B(blue) 三种颜色的比例来配色,每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:
p{color:rgb(133,45,200);}

或者

p{color:rgb(20%,33%,25%);}
  1. 十六进制颜色(目前比较普遍的方法)
    其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff,
p{color:#00ffff;}

如果每两位的值相同,可以缩写一半, p{color:#000000;} 可以缩写为:p{color: #000;}


长度

px(像素)、em、% 百分比,这三个单位都是相对单位

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
特殊情况:
但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。如下代码:
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)
总之:1em = 1font-size

p{font-size:12px;line-height:130%}

设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)


CSS盒模型

元素分类
在CSS中,html中的标签元素大体被分为三种不同的类型:

  1. 块状元素
  2. 内联元素(又叫行内元素)
  3. 内联块状元素

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有:

<img>、<input>

块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。最常见的就是P和div这两个。
说的简单点,块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。默认情况下块元素,是独占一行的。

内联元素(inline element)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素有a和span

块元素与内联元素的区别?(默认情况下)

  1. 块元素,总是在新行上开始;内联元素,和其他元素都在一行上。
  2. 块元素,能容纳其他块元素或内联元素;内联元素,只能容纳文本或者其他内联元素。
  3. 块元素中高度,行高以及顶和底边距都可控制;内联元素中高,行高及顶和底边距不可改变。

块状元素
内联元素可以设置display:block将元素显示为块级元素。
a{display:block;},就是让a元素具有块状元素的特点
块级元素特点

  1. 每个块级元素都从新的一行开始,并且其后的元素也另起一行。
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
  3. 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

内联元素(行内元素) <span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。
块状元素也可以通过代码display:inline将元素设置为内联元素。

内联元素特点:

  1. 和其他元素都在一行上;
  2. 元素的高度、宽度及顶部和底部边距不可设置;
  3. 元素的宽度就是它包含的文字或图片的宽度,不可改变。

内联块状元素

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。

inline-block 元素特点:

  1. 和其他元素都在一行上;
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

盒子模型

padding:内边距
margin:外边距
border:边框

边框--border


padding(内边距):元素内容与边框之间是可以设置距离的,称之为“填充”

margin(外边距):元素与其它元素之间的距离可以使用边界(margin)来设置

总结:padding在边框里,margin在边框外。


元素的宽和高
一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
即:margin-left+border-left+padding-left+width+padding-right+border-right+margin-right


CSS布局模型

三种基本的布局模型:

  1. 流动模型(flow)
  2. 浮动模型(float)
  3. 层模型(layer)

流动模型(flow)

  1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置
  2. 内联元素(a、span、em、strong...)都会在所处的包含元素内从左到右水平分布显示。

浮动模型(float)
想让两个块状元素并排显示,设置元素浮动

任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。

div{ width:200px; height:200px; border:2px red solid; float:right; }

层模型(flow)
图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作。

CSS定义了一组定位(positioning)属性来支持层布局模型。

层模型有三种形式:

  1. 绝对定位(position: absolute)
  2. 相对定位(position: relative)
  3. 固定定位(position: fixed)

绝对定位(position: absolute):
position:absolute(表示绝对定位)
作用:将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; }

相对定位(position: relative)

div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } /#相对于以前位置向右移动100px,向下移动50px#/

absolute表里如一,移动了就是移动了。relative只是表面显示移动了,但实际还在文档流中原有位置,别的元素无法占据原来的位置。


固定定位(position:fixed):

与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。

应用:positive:fixed


Relative 和 Absolute 组合使用

相对于其它元素进行定位?

使用position:relative
前提:

  1. 参照定位的元素必须是相对定位元素的前辈元素
  2. 参照定位的元素必须加入position:relative
  3. 定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了

总结:要在父辈元素中加relative,因为你要相对该父辈进行定位 而在自辈元素中加absolute,再进行设置长宽高!


CSS 样式设置技巧

水平居中

第一种:添加 table 标签

第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

第二种:设置 display:inline 方法

改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果

第三种:设置 position:relative 和 left:50%

通过给父元素设置 float,然后给父元素设置 position:relativeleft:50%,子元素设置 position:relativeleft:-50% 来实现水平居中。
原理:
父元素position:relative;left:50%浮动起来后相对浏览器左边框移动到水平正中央;这时候父元素的左边界就相当于中轴;这时候子元素position:relative;left:-50%;向左移动自己宽度的50%,这样子元素就正好剧居中


垂直居中

父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的

父元素高度确定的多行文本(方法一)

方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle

父元素高度确定的多行文本(方法二)

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式


隐性改变display类型

当为元素(不论之前是什么类型元素,display:none 除外)

  1. position : absolute
  2. float : left 或 float:right

元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

相关文章推荐: