(1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的.在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率.所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式.“覆盖”浏览器的CSS默认属…
CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立的文件中,让 HTML 文件大小大幅减少了,从而让页面结构更容易被程序员和网络爬虫读懂 对搜索引擎友好,让搜索引擎给页面评分更高,有利于页面搜索引擎排名 外部样式表在用户首次访问后就被缓存到用户电脑上,下次访问无需加载 缺点 如果样式很多,CSS 文件会变的很大查找起来不方便.此外,多一个 CSS…
CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签…
本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.Normalize.css现在已经被用于Twitter Bootstrap.HTML5 Boilerplate.GOV.UK.Rdio.CSS…
首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距.高度.背景图片.网页定位等设定 css优势:内容于表现分离 网页的表现统一,容易修改 丰富的样式,使得页面布局更加灵活 减少网页的代码量,增加网页的浏览速度,节省网络带宽 运用独立于页面的css有利于网页被搜索引擎收录 插入CSS样式表分为三种: 外部样式表(External style sheet…
标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签三特点: 一个块级元素独占一行 元素的高度.宽度.行高以及顶和底边距都可设置. 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度 行内元素 行内元素:在html中<a>.<span>.<br>.<i>.<em>…
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS外部样式表</title> </head> <!--引入CSS样式表 --&…
CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式规则应用于元素属性 id="para1": 实例 #para1{text-align:cent…
/*公共样式*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin: ; padding: ; }div{display:"felx"} *{box-sizing: border-box;} html, body { min-height: %;2018-11-03 } body { font-family:…
@charset "utf-8";html,body,a,h1,h2,h3,h4,h5,h6,p,a,b,i,em,s,u,dl,dt,dd,ul,ol,li,strong,span,table,th,tr,td,img,div,form,fieldset,legend,input,button,select,option,textarea,label,iframe { margin: 0; padding:0}a{ text-decoration: none;}ol,ul,li{ l…