html+css的基本知识总结（一）

来源：互联网发布：淘宝网招聘求职平台编辑：程序博客网时间：2024/05/20 21:18

知识点（一）

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

1. css 样式由选择符和声明组成，而声明又由属性和值组成

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

3. 外部式css样式：(也可称为外联式) 就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：<link href="base.css" rel="stylesheet" type="text/css" />,<link>标签位置一般写在<head>标签之内。

4.内联式 > 嵌入式 > 外部式

5.类选择器： .类选器名称{css样式代码;},类选择器可以使用多次。,可以为一个元素同时设多个样式

6. ID选择器: 类似于类选择符，但也有一些重要的区别：为标签设置id="ID名称"，而不是class="类名称"。ID选择符的前面是井号（#）号，而不是英文圆点（.）。ID选择器只能在文档中使用一次

7.子选择器： .food>li{border:1px solid red;}

包含（后代）选择器：.first span{color:red;}

>作用于元素的第一代后代，空格作用于元素的所有后代。

8.通用选择器：匹配html中所有标签元素，*{color:red;}

9. 伪代码选择器：a:hover{color:red;}，鼠标滑过的状态

知识点（二）：标签的权值

1、什么是css的继承？

答：所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

2、在css常用的样式中有哪些能继承？又有哪些不能继承？

答：不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、 overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。（注：基本上什么盒子外边距、内边距，还有定位什么的是不能被继承的）

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

注：参考继承文档：https://www.w3.org/TR/CSS21/propidx.html

特注意：

a标签比较特殊，文本相关的属性大都会继承，但是其中color属性不会继承。

因为a标签有自身的样式，自带了link、visited、hover、active等伪类样式，所以不会继承color属性。

3、浏览器根据权值来判断使用哪种CSS样式，权值高的就使用哪种样式。标签的权值为1，类选择符的权值为10，ID选择符的权值最高，为100。继承的权值最低，一般为0（在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已）。

例如：

       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*/

4.继承中容易引起的错误

有时候继承也会带来些错误，比如说下面这条CSS定义：

　　Body{color:blue}

在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧，比如将CSS定义成这样：

　　Body,table,th,td{color:blue}

这样表格内的文字也会变成蓝色。

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

CSS样式优先级(权值高的优先显示)：！important>内联样式（标签内部,也叫“行内样式”）>嵌入样式（当前文件中）>链接式样式（外部文件中）>导入式样式（外部文件中）。

注：（1）上面表达的意思是：若项目中有！important、内联样式（标签内部,也叫“行内样式”）、嵌入样式（当前文件中）、链接式样式（link，外部文件中）、导入式样式（@import，外部文件中）时，先显示！important，然后显示“内联样式”内容，接着“显示嵌入样式”内容，再接着显示“链接式样式”内容，最后显示“导入式样式”内容。

（2）除了!important以外，内联样式（标签内部,也叫“行内样式”）与其他样式相比权值最大，若用了!important之后，那么!important的权值最大。嵌入样式（当前文件中）、链接式样式（外部文件中）、导入式样式（外部文件中）中的权值比较，是根据权值来判断使用哪种CSS样式，权值高的就使用哪种样式。标签的权值为1，类选择符的权值为10，ID选择符的权值最高，为100。继承的权值最低，一般为0（在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已）。然而内联样式（标签内部,也叫“行内样式”）的权值比它们都大。

6、标记为!important的规则具有最高的权值，也就是说他没有具体的特性值，但是比其他的权值都要大。!important总是放在规则声明的最后，在分号之前。

还有最后一种需要考虑的情况：继承值总是具有特性值0的特点，即使是从带有!important的规则继承的值也是如此，在匹配重要规则的元素之外，重要性也会随之消失，这点是需要我们特别注意的！

标记为!important的例子：

样式定义：

　　 H1 {color:gray !important;}

　　应用举例代码：

　　应用举例效果:

　　 !important规则会覆盖内联STYLE属性的内容，所以结果文字是灰色的而不是黑色的。

知识点（三）

*************************************************文字排版************************************************************

5.字体： body{font-family:"Microsoft Yahei";}

字号，颜色： body{font-size:12px;color:#666}

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

斜体： p a{font-style:italic;}

下划线： p a{text-decoration:underline;}

删除线： .oldPrice{text-decoration:line-through;}

*************************************************段落排版************************************************************

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

行间距： p{line-height:1.5em;}

文字、字母间隔： h1{ letter-spacing:50px;}

对齐： h1{ text-align:center;}

*************************************************元素分类************************************************************

7.常用的块状元素有：

块元素(block element)
　　 p - 段落
　　 pre - 格式化文本
　　 table - 表格
　　 ol - 排序表单
　　 ul - 非排序列表
　　address - 地址
　　 blockquote - 块引用
　　 center - 居中对齐块
　　 div - 常用块级
　　 dl - 定义列表
　　 fieldset - form控制组
　　 form - 交互表单
　　 h1 - 大标题
　　 h2 - 副标题
　　 h3 - 3级标题
　　 h4 - 4级标题
　　 h5 - 5级标题
　　 h6 - 6级标题
　　 hr - 水平分隔线
　　 isindex - input prompt
　　 noframes - frames可选内容
　　 noscript - 可选脚本内容　

menu - 菜单列表

常用的内联元素有：

内联元素(inline element)

　　 li - 列表项
　　 a - 锚点
　　 abbr - 缩写
　　 acronym - 首字
　　 b - 粗体(不推荐)
　　 bdo - bidi override
　　 big - 大字体
　　 br - 换行
　　 cite - 引用
　　 code - 计算机代码
　　 dfn - 定义字段
　　 em - 强调
　　 font - 字体设定
　　 i - 斜体
　　 img - 图片
　　 input - 输入框
　　 kbd - 定义键盘文本
　　 label - 表格标签
　　 q - 短引用
　　 s - 中划线
　　 samp - 定义范例计算机代码
　　 select - 项目选择
　　 small - 小字体文本
　　 span - 常用内联容器，定义文本内区块
　　 strike - 中划线
　　 strong - 粗体强调
　　 sub - 下标
　　 sup - 上标
　　 textarea - 多行文本输入框
　　 tt - 电传文本
　　 u - 下划线
　　 var - 定义变量

ins - 定义已经被插入文档中的文本

del -定义文档中已被删除的文本。

map -定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

常用的可替换的内联元素有：<img>、<input>、<button>、< textarea>、<select>、<object>、 svg

8.块级元素：display:block就是将元素显示为块级元素。 a{display:block;}

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

内联元素：块状元素也可以通过代码display:inline将元素设置为内联元素。

内联元素特点： 1、和其他元素都在一行上；2、元素的高度、宽度、行高及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变

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

inline-block元素特点：1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置。

注意：img是inline元素，但是它同时也是替换元素，他有着特殊的表现：

　　　　　　　　　1. 可以设置width/height;

　　　　　　　　　 2. 默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置；

　　　　　　　　　 3. 如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到自己的宽、高达到最大或者设定值为止，而且文档流中img的父元素也不能遮盖住img。最常见的就是<a>里面包含的<img>；

　　　　　　　　　 4. 所以从行为上看,img元素作为替换元素，有着类似于Inline-block的行为。

0 0