初识HTML,CSS

最新推荐文章于 2022-10-03 21:16:57 发布

TeresaL JL

最新推荐文章于 2022-10-03 21:16:57 发布

阅读量1.3k

点赞数 1

分类专栏：笔记文章标签： HTML CSS

本文链接：https://blog.csdn.net/weixin_44003371/article/details/84878727

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字，图片，视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体，颜色变化，或为标题加入背景图片，边框等。所有这些用来改变内容外观的东西称之为表现。

3. J avaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用的的JavaScript来实现的。

（一）HTML介绍（超文本标记语言）

标题：<H1>标题</ H1>
段落标签：<P>文字</ P>
图片：img标签，<img src =“1.jpg”>
标签之间可以嵌套，顺序要保持一致，比如<DIV> <P> ...... </ P> </ DIV>
HTML标签不区分大小写，一般小写
结构：<html>：指根标签，所有的标签都要在<html> </ html>中

<head> ... </ head>：定义文档头部，所有头部元素的容器

<body> ... </ body>：之间是网页主要内容，如<h1> <p> <a> <img>等

</ HTML>

<title>网页标题信息</ title>，出现在浏览器的标题栏中.title 标签要在<head> </ head>之间。
代码注释：<！ - 注释文字 - >

（二）标签（第一部分）

<body>标签，内容主体 <body> </ body> （成对）
<p>标签，段落 <p> </ p> （成对）
<HX>标签，标题级别 <H1> <H2> <H3> <H4> <H5> <H6>。<H1>最高级别（X为1-6）

4. <strong> <em>，强调语气，<em>：斜体; <strong>：粗体（成对）

5. <span>标签，文字设置 单独样式 <span color：blue;>文本</ span> （成对）

6. <q>标签，短文本引用<q>引用文本</ q> （成对）

7. <blockquote>标签，长文本引用<blockquote>长文本引用</ blockquote>去除双引号（成对）

8. <br />标签，分行显示文本 空标签，只写开始。最后一句文本内容后面不需要加<br />

9. 空格标签注意加上分号

10. <hr>标签，用于分隔的横线<hr /> 空标签，只写开始。默认样式：线条粗，颜色为灰色

11. <address>标签，联系地址信息，或者定义一个地址，比如（电子邮件地址，签名，文档的作者身份）<地址>联系地址信息</ address> （成对）

12. <code>标签，加入一行代码<code>代码语言</ code> （成对）

13. <pre>标签，加入大段代码<pre>语言代码段</ pre> （成对）

预格式化文本，被包含在预元素中的文本通常会保留空格和换行符。

（三）标签（第二部分）

<ul>标签，添加信息列表; ul-li标签，没有前后顺序的信息列表。（成对）

<UL>

......

</ UL>

<ol>标签，制作有序列表; ol-li标签，有前后顺序。（成对）

<OL>

......

</OL>

<OL>在网页中显示的默认样式一般为：每项<LI>前都自带一个序号，序号默认从1开始。

<div>标签，把一些独立的逻辑部分划分出来，相当于一个容器。（成对）

给<div>命名，用id属性 <div id =“版块名称”> ... </ div>
<表>标签，网页上的表格;创建表格的4个元素：表，TBODY，TR，TH，TD

（成对）

<table> ... </ table>：整个表格以<table>标记开始，</ table>标记结束。
<tbody> ... </ tbody>：加上<thead> <tbody> <tfooter>这些表格结构，可以优先显示。（通俗理解表可以按结构一块块的显示，不用等整个表格加载完后显示。）
<tr> ... </ tr>：表格的一行，所以有几对tr表格就有几行。
<TD> ... </ TD>：表格的一个单元格，一行中包含几对<TD> ... </ TD>，说明一行中就有几列。
<TH> ... </次>：表格的头部的一个单元格，表格表头。
表格中列的个数，取决于一行中数据单元格的个数。

A. table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

B. 表头，也就是个中标签的字幕：默认为粗体并且居中显示

6.css样式，为表格加入边框

<style type =“text / css”>

表TR TD，第{边界：1px的固体＃000;} 粗细为1像素个的黑色边框

</样式>

7. <caption>标签，为表格添加标题和摘要（摘要的内容不会在浏览器显示出来）

标题：表格上方（描述表格内容）

<tr>

<caption>标题文本</caption>

<TR>

<TD> ... </ TD>

...

</ TR>

...

</ TABLE>

（四）标签（第三部分）

<A>标签，链接到另一个页面，实现超链接;

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

例如：<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>

上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。

title标题属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。

<A>标签在默认情况下，的链接|网页的英文在当前浏览器窗口显示中打开。

2. 在新建浏览器窗口打开链接。

<a href="目标网址" target="_blank">click here!</a>

3. 使用mailto在网页中链接Email地址，<a>标签还有一个作用是可以链接Email地址

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

<a href=“mailto:邮件地址?cc=邮件地址&bcc=邮件地址&subject=主题&body=邮件内容”>发送</a>

4. <IMG>标签，为网页插入图片

<img src =“图片地址”alt =“下载失败时的替换文本”title =“提示文本”>

SRC：标识图像的位置;
ALT：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本;
标题：提供在图像可见时对图像的描述（鼠标滑过图片时显示的文本）;
图像可以是GIF，PNG，JPEG格式的图像文件。

（五）表单标签

HTML表单（形式），与用户进行交互，把浏览者输入的数据传送到服务器端。

<form method =“传送方式”action =“服务器文件”>

<form>：<form>标签是成对出现的，以<form>开始，以</ form>结束。
action：浏览者输入的数据被传送到的地方，比如一个PHP页面（save.php）。
方法：数据传送的方式（get / post）。

所有表单控件（文本框，文本域，按钮，单选框，复选框等）都必须放在<form> </ form>标签之间

2.文本输入框，密码输入框

<FORM>

<input type =“text / password”name =“名称”value =“文本”/>

</ FORM>

type：

当type= “text” 时，输入框为文本输入框;

当type =“password”时，输入框为密码输入框。

name：为文本框命名，以备后台程序ASP，PHP使用。
value：为文本输入框设置默认值。（一般起到提示作用）

例如： <form>

姓名：

<BR/>

密码：

</ FORM>

3.文本域，支持多行文本输入

<textarea rows =“行数”cols =“列数”>文本</ textarea> （成对）

cols：多行输入域的列数。
rows：多行输入域的行数。
在<textarea>的</ textarea>的标签之间可以输入默认值。

4.使用单选框，复选框，让用户选择

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中

同一组的单选按钮，name 取值一定要一致

5.使用下拉列表框，节省空间

value

选select=“selected”：

设置selected= “selected”属性，该则就选项对话被默认选中。

6.使用下拉列表框进行多选，在<选select>标签中设置multiple= “multiple”属性，就可以实现多选功能

<select mutiple =“mutiple”> 进行多选时，Ctrl +单击，选择多个选项

7.使用提交按钮，提交数据

<input type =“submit”value =“提交”>

type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字

例如： <form method =“post”action =“save.php”>

</ FORM>

8.使用重置按钮，重置表单信息

<input type =“reset”value =“重置”>

9.<label>标签，在标签标签内点击文本，就会触发此控件。

type：只有当type设置为reset时，才有按钮重置作用
value：按钮上显示的文字

<label for =“控件id名称”>

注意：标签的属性中的值应当与相关控件的id属性值一定要相同。

（六）CSS，为网页添加样式（Cascading Style Sheets）

p {

font-size：12px;

color:red

font-weight：bold;

}

2. 优势，把要设置的文本用<span> </span>括起来，写入代码

span{

color:red

}

3. 代码语法，CSS由样式选择符组成，而声明又由属性和值组成

p{font-size:12px;color:red;} 或

font-size:12px;

color:red;

}

4.CSS注释代码

/ *注释语句* /

（七）CSS样式基本知识

1. 内联式 CSS样式，直接写在现有的HTML标签中

内联式：css样式表就是把css代码直接写在现有的HTML标签中，如：<p style =“color：red”>这里文字是红色。</ p>

要写在风格= “” 双引号中，多条的话中间用分号隔开，如：

<p style =“color：red; font-size：12px”>这里文字是红色。</ p>

2. 嵌入式 CSS样式，写在当前的文件中

嵌入式的CSS样式，就是可以把CSS样式代码写在

<style type =“text / css”> </ style>标签之间，如：

span{

color:red;

}

</style>

3. 外部式的CSS样式，写在单独的一个文件中

外部式：把CSS代码写一个单独的外部文件中，以的CSS为扩展名，在<HEAD>内（不是在<style>标签内）使用的<link>标签将CSS样式文件链接到HTML文件内

<link href =“base.css”rel =“stylesheet”type =“text / css”/>

css样式文件名称以有意义的英文字母命名，如main.css。
rel =“stylesheet”type =“text / css”是固定写法不可修改。
<link>标签位置一般写在<HEAD>标签之内。

4.优先级：内联式>嵌入式>外部式

嵌入式>外部式，有一个前提：嵌入式css样式的位置一定在外部式的后面，如<link href =“style.css”...>代码在<style type =“text / css”>。 .. </style>代码的前面（实际开发中也是这么写的）

（八）CSS选择器

1.选择器：每一条的CSS样式声明（定义）由两部分组成

选择器{

样式，

}

2.标签选择器; HTML代码中的标签

p{font-size:12px;line-height:1.6em;}

为p标签设置12px的字号，行间距设置1.6em的样式。

3.类选择器

。类选器名称{CSS样式代码;}

注意：

英文圆点开头
其中类选器名称可以任意起名（但不要起中文）

使用方法：

第一步：使用合适的标签把要修饰的内容标记起来，如下：

<span>胆小如鼠</span>

第二步：使用class= “类选择器名称”为标签设置一个类，如下：

<span class =“stress”>胆小如鼠</ span>

第三步：设置类选器的CSS样式，如下：

.stress{color:red;}/*类前面要加入一个英文圆点*/

4.ID选择器

5.类和ID选择器的区别

为标签设置ID = “ID名称”，而不是class= “类名称”。
ID选择符的前面是井号（＃）号，而不是英文圆点（.）

相同点：可以应用于任何元素;

不同点：

6.子选择器：大于符号（>），用于选择指定标签元素的第一代子元素。

ID选择器只能在文档中使用一次，仅一次
可以使用类选择器词列表方法为一个元素同时设置多个样式。（不能使用ID词列表）

.food> li {border：1px solid red;}

7. 包含（后代）选择器，包含选择器，即加入空格，用于选择指定标签元素下的后辈元素。

.first span {color：red;}

子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“ > ”进行选择。

8. 通用选择器：使用一个（*）号指定，它的作用是匹配的html中所有标签元素，功能最强大

* {color:red;}

9.伪类选择符：允许给HTML不存在的标签（标签的某种状态）设置样式，比如说我们给HTML一个中标签元素的鼠标滑过的状态来设置字体颜色

a:hover{color:red;} 为标签鼠标滑过的状态设置字体颜色变红。

10. 分组选择符：为HTML中多个标签元素设置同一个样式（，）

h1，span {color：red;} 相当于

h1{color:red;}

span{color:red;}

（九）CSS的继承，层叠和特殊性

继承：允许样式不仅应用于某个特定的HTML标签元素，而且应用于其后代。

p{color:red;}

<<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

border：1px solid red;不具有继承性

2. 特殊性：浏览器是根据权值来判断使用哪种CSS样式的，权值高的就使用哪种CSS样式。

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100

p {color：red;} / *权值为1 * /

p span {color：green;} / *权值为1 + 1 = 2 * /

.warning {color：white;} / *权值为10 * /

p span.warning {color：purple;} / *权值为1 + 1 + 10 = 12 * /

#footer .note p {color：yellow;} / *权值为100 + 10 + 1 = 111 * /

继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

3. 层叠：在HTML文件中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些CSS的样式前后顺序来决定，处于求最后面的CSS样式会被应用。

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

4.. 重要性：!important

p{color:red!important;}

p{color:green;}

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时p段落中的文本会显示的red红色

注意：!important要写在分号的前面

（十）CSS格式化排版

文字排版 - 字体

body{font-family:"宋体";}

一般字体：微软雅黑，如body {font-family：“Microsoft Yahei”;}或body {font-family：“微软雅黑”;}

2. 文字排版 - 字号，颜色

body{font-size:12px;color:#666}

3. 文字排版 - 粗体

p span {font-weight：bold;}粗体

4. 文字排版 - 斜体

p a{font-style:italic;}

5. 文字排版 - 下划线

p a{text-decoration:underline;}

6. 文字排版 - 删除线

.oldPrice{text-decoration:line-through;}

7. 段落排版 - 缩进

p {text-indent：2em;} 2em的意思就是文字的2倍大小。

8. 段落排版 - 行间距（行高）line-height

p{line-height:1.5em;}

9. 段落排版 - 中文字间距，字母间距

letter-spacing（设置字母与字母之间的间距）
word-spacing （设置英文单词之间的间距）

文本对齐（中心，左，右）

10. 段落排版--对齐

text-align （center，left，right）

（十一）CSS盒模型

1.元素分类

HTML中的标签元素大体被分为三种不同的类型：块状元素，内联元素（又叫行内元素）和 内联块状元素

常用的块状元素有：

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

常用的内联元素有：

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

常用的内联块状元素有：<img>，<input>

元素分类- 块级元素

在html中<div>，<p>，<h1>，<form>，<ul>和<li>就是块级元素。

display：block，将元素显示为块级元素

a {display：block;}，将元素显示为块级元素。将内联元素a转换为块状元素，从而使元素具有块状元素特点。

块级元素特点：

3. 元素分类- 内联元素

每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
元素的高度，宽度，行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100％（和父元素的宽度一致），除非设定一个宽度。

在html中，<span>，<a>，<label>，<strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。

display:inline，将元素设置为内联元素

div{

display:inline;

}

......

<div>我要变成内联元素</div>

将块状元素div转换为内联元素，从而使div元素具有内联元素特点。

内联元素特点：

4. 元素分类- 内联块状元素

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

内联块状元素（inline-block）：同时具备内联元素，块状元素的特点

display:inline-block，将元素设置为内联块状元素。

（CSS2.1新增），<IMG>，<input>标签就是这种内联块状标签。

inline-block元素特点：

5. 盒模型 - 边框（一）

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

模型盒子的边框就是围绕关系着内容及补白的线，条这线你可以设置它的粗细，样式和颜色（边框三个属性）。

div{

border:2px solid red;

}

或

div{

border-width:2px;

border-style:solid;

border-color:red;

}

为div来设置边框粗细为2px，样式为实心的，颜色为红色的边框

注意：

border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。
border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用像素（px）。

6. 盒模型 - 边框（二）

div {border-bottom：1px solid red;}

为p标签单独设置下边框，而其它三边都不设置边框样式

7. 盒模型 - 宽度和高度

border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;

css内定义的宽（width）和高（height），指的是填充以里的内容范围。

元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

css代码 div{

width:200px;

padding:20px;

border:1px solid red;

margin:10px;

}

html代码 <body>

</body>

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px

8. 盒模型 - 填充

元素内容与边框之间是可以设置距离的，称之为“ 填充 ”。填充也可分为上，右，下，左（顺时针）

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}

9. 盒模型 - 边界

div{padding:10px;} ---上、右、下、左的填充都为10px;
div{padding:10px 20px;}---上下填充一样为10px，左右一样为20px

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。

div{margin:20px 10px 15px 30px;} 或

div{

margin-top:20px;

margin-right:10px;

margin-bottom:15px;

margin-left:30px;

}

div{ margin:10px;}---上右下左的边界都为10px；
div{ margin:10px 20px;}---上下边界一样为10px，左右一样为20px

padding和margin的区别，padding在边框里，margin在边框外。

（十二）CSS布局模型

1.css布局模型

在网页中，元素有三种布局模型：

流动模型（Flow）
浮动模型 (Float)
层模型（Layer）

2. 流动模型

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

特征：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

3. 浮动模型

设置元素浮动，让两个块状元素并排显示。任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动

div{

width:200px;

height:200px;

border:2px red solid;

float:left;

}

div{

width:200px;

height:200px;

border:2px red solid;

}

#div1{float:left;}

#div2{float:right;} ---两个元素一左一右实现一行

4. 层模型

三种形式：

5. 绝对定位

绝对定位（position：absolute）
相对定位（position：relative）
固定定位（position：fixed）

position：absolute（表示绝对定位）

将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

<div id="div1"></div> 可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

6. 相对定位

position:relative（表示相对定位）

它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

#div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;

left:100px;

top:50px;

}

<div id="div1"></div> 实现相对于以前位置向下移动50px，向右移动100px;

偏移前的位置保留不动：

<body>

<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>

</body>

7. 层模型--固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。它不会随浏览器窗口的滚动条滚动而变化，除非在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小。

与background-attachment:fixed;属性功能相同。

#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....

以上代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

8. Relative与Absolute组合使用

1）参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

box1是box2的父元素（父元素当然也是前辈元素了）。

2）参照定位的元素必须加入position:relative;

#box1{
width:200px;
height:200px;
position:relative;
}

3）定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
position:absolute;
top:20px;
left:30px;
}

box2可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

（十三）CSS代码缩写，占用更少的带宽

1. 盒模型代码简写

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

1）如果top、right、bottom、left的值相同，则margin:10px 10px 10px 10px; 可缩写为---margin:10px;

2）如果top和bottom值相同、left和 right的值相同，则 margin:10px 20px 10px 20px; 可缩写为---margin:10px 20px;

3）如果left和right的值相同，则 margin:10px 20px 30px 20px; 可缩写为---margin:10px 20px 30px;

注意：padding、border的缩写方法和margin是一致的。

2. 颜色值缩写

当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

比如，p{color:#000000;} 可缩写为--p{color: #000;} ， p{color: #336699;} 可缩写为---p{color: #369;}

3. 字体缩写

body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em "宋体",sans-serif;
}

（十四）单位和值

1. 颜色值

字体颜色（color）、背景颜色（background-color）、边框颜色（border）

1）英文命令颜色 ---- p{color:red;}

2）RGB颜色：由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如： p{color:rgb(20%,33%,25%);}

3）十六进制颜色

原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff

p{color:#00ffff;}

2. 长度值

目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1）、像素

像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2）、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

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）。

3）、百分比

p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

（十五） css样式设置小技巧

1.水平居中设置-行内元素

分两种情况：行内元素 跟 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：

html代码：

<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

css代码：

2. 水平居中设置-定宽块状元素

当被设置元素为 块状元素 时，用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

定宽块状元素：块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。如设置 div 这个块状元素水平居中：

html代码：

<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

</style>

也可以写成：

margin-left:auto;
margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

3. 水平居中总结-不定宽块状元素方法（一）

不定宽块状元素：块状元素的宽度width不固定。

不定宽度的块状元素有三种方法居中
1）加入 table 标签
2）设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
3) 设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

加入 table 标签

利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

如下：

html代码：

<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>

css代码：

4. 水平居中总结-不定宽块状元素方法（二）

改变元素的display类型为行内元素，利用其属性直接设置。

第二种方法：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。如:
html代码：

<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：

优势: 不用增加无语义标签

缺点：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

5. 水平居中总结-不定宽块状元素方法（三）

设置浮动和相对定位来实现。

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

代码如下：

css代码：

.container ul{
list-style:none;
margin:0;
padding:0;

position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

6. 垂直居中-父元素高度确定的单行文本

分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

如下代码：

<div class="container">
hi,imooc!
</div>

css代码：

7. 垂直居中-父元素高度确定的多行文本（方法一）

父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

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

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：

html代码：

<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代码：

table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

8. 垂直居中-父元素高度确定的多行文本（方法二）

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。

html代码：

<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>

css代码：

好处：不用添加多余的无意义的标签

缺点：不兼容 IE6、7，而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

9. 隐性改变display类型

为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1.职位：绝对

2. float：left或float：right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以显示：inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，御姐默认宽度不占满父元素。

如下面的代码，标签是行内元素，设置它的宽度是没有效果的，但是设置为position：absolute以后，就可以了。

<div class =“container”>
<a href="#" title="">进入课程请单击这里</a>
</ div>

CSS代码

TeresaL JL

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识HTML,CSS

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字，图片，视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体，颜色变化，或为标题加入背景图片，边框等。所有这些用来改变内容外观的东西称之为表现。3. J avaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮...
复制链接

扫一扫