html+css基础知识

一、
1.Doctype?严格模式与混杂模式 如何触发这两种模式,区分它们有和意义
doctype声明位于文档中的最前面的位置,处于标签的之前,此标签可告知浏览器文档使用那种Html或,xhtml规范,该标签可声明三种DTD类型,分别表示严格版本,过渡版本以及基于框架的html文档
建了两种呈现模式:标准模式和混杂模式(quirks mode)。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器(比如Microsoft IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。对于HTML 4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

2.行内元素有哪些,块级元素有哪些,css的盒模型
行内元素有:a b span em img input select strong
块级元素有:div ul ol li dl dt dd h1 h2 h3 h4 p
盒模型:margin border padding width
3.css引入的方式有哪些 link 和@import 的区别是
3.1使用link标签
将样式规则写在.css的样式文件中,再以标签引入
3.2使用@import 引入
@import url(css/example.css);
3.3使用style标签
body{color:#666;background:#f0f0;font-size:12px;}
td,p{
color:#c00;
font-size:12px;
}
3.4使用style属性
将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
3.5使用标记引入样式
cnwebshow.com

两者区别:加载顺序的差别,当一个页面被加载的时候,link引用的css会同时被加载,而@import引用的css会等到页面全部被下载完在加载,@import可以在css中再次引入其他样式表,比如可以创建一个主样式表如
main.css
@import "sub1.css";
@import "sub2.css";
这样做有一个缺点,会对网站服务器产生过多的http请求,以前都是一个文件,而现在是两个或者更多文件,服务器的压力增大,浏览器大的网站还是谨慎使用

4.css选择符有哪些,哪些属性可以继承,优先级算法如何计算,内联和import那个优先级更高
选择通配符*
类型选择符
td { font-size:14px; width:120px; }
属性选择符
E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }
h[title] { color: blue; }/* 所有具有title属性的h对象 */
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }
包含选择符E1 E2 { sRules }
table td { font-size:14px; }
子对象选择符E1 > E2 { sRules }
div ul>li p { font-size:14px; }
ID选择符 #ID { sRules }
类选择符E.className { sRules }
选择符分组
E1 , E2 , E3 { sRules }
伪类及伪对象选择符
E : Pseudo-Classes { sRules }
( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]
E : Pseudo-Elements { sRules }
( Pseudo-Elements )[:first-letter :first-line :before :after]

可以继承的有:font-size font-family color
不可以继承的一般有:border padding margin background-color width height

关于CSS specificity
CSS 的specificity 特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:

规则:

  1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。
    如:<div style=”color: red”>sjweb
    外部定义指经由或
posted @ 2022-07-05 17:59  月花夕沉  阅读(121)  评论(0)    收藏  举报