css样式分解,css样式笔记

HTML5和CSS是什么？

不是软件

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、做网站、刚察网络推广、微信小程序、刚察网络营销、刚察企业策划、刚察品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供刚察建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

HTML是一种做网页的标签语言，CSS则是用来修饰HTML的语言，

HTML5是一种新的技术，其实就是HTML的升级版，但融入更多的js功能，加上现在的css3，在高版本的浏览器会做出很酷很炫的效果。

一般我们叫前端开发，网上搜HTML视频教程（先学HTML以后再转入html5），一大堆。

我的做前端开发的，希望可以帮到你

CSS发展史

CSS发展史

CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。

CSS1.0

选择器：要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，就需要用到CSS选择器。选择器大致分为派生选择器、ID选择器和类选择器，用来定义希望应用样式的HTML元素或者标签。

样式属性：该属性主要包括Font字体、Text文本、Background背景、Position定位、Dimensions尺寸、Layout布局、Margin外边框、Border边框、Padding内边框、List列表、Table表格和Scrollbar滚动条等，用于定义网页的一些样式变化。

伪类属性：主要定义了针对描述对象a的link、hover、active、visited和针对节点的first-letter、first-child、first-line等几个伪类属性。

保存方式：用户可以直接存储在HTML网页中，也可以将CSS样式代码存储为独立的样式表文件。

CSS2.0

选择器：css2提供了更多强大的选择器，用来定位HTML节点或者标记

符号名称

含义

示例

*

用于匹配任何标记

*{color：red}

用于指定父子节点关系

AAA CCC DDD {color:red}匹配父节点分别为CCC和AAA的节点DDD节点

□

用于匹配在某一层有某个父节点的节点

AAA CCC DDD {color:blue}匹配包含父节点CCC的父节点AAA的节点DDD

+

用于表示在同一个级别节点之间的关系

AAA+BBB{color:red}表示，有一个兄弟节点AAA的节点BBB

名称[表达式]

选择包含特殊属性值的节点

BBB[text="xyz"]{color:blue} 表示包含text属性值为xyz的BBB标签

位置模型：在CSS2中进一步增强了位置属性功能，增加了relative、absolute和fixed等几个值

值名称

含义

relative

元素框相对父节点偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留

absolute

元素框从文档流中完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样

fixed

元素框的表现类似于absolute值，不过其包含块是视窗本身

z-index

用来指定相互重叠的元素的叠放顺序，数字较大的元素会叠放在数值较小的元素前面

布局、表格样式：CSS2对display属性进行了扩充，用户可用该属性指定元素是否会显示以及如何显示，也可以使用该属性配合位置和浮动进行页面的布局。另外，用户还可以将一个非表格的结构化文档显示为一个表格样式。

媒体类型：用于对不同的媒体类型定义不同的样式。

属性名称

含义

aural

用于语音和音频合成器

embossed

用于分页的盲人用点字法打印

print

用于打印机

screen

用于计算机显示器

braille

用于盲人用点字法触觉回馈设备

projection

用于方案展示如幻灯片

伪类：CSS2增加了focus（将样式添加到被选中的元素）、：first-child（将特殊的样式添加到元素的第一个子元素）、：lang（允许创作者来定义指定的元素中使用的语言）。

光标样式：增加了cursor属性，用于指定设备应该显示怎样的光标类型。

值名称

含义

default

默认光标（通常是一个箭头）

auto

默认，浏览器设置的光标

crosshair

光标呈现为十字线

pointer

光标呈现为指示链接的指针（一只手）

move

此光标指示某对象可被移动

e-resize

此光标指示矩形框的边缘可被向右移动

text

此光标指示文本

wait

此光标指示程序正忙（通常是一只表或沙漏形状）

help

此光标指示可用的帮助（通常是一个问号或一个气球）

DIV+CSS其实是一种错误的叫法，标准的叫法应该是XHTML+CSS，因为DIV与table都是XHTML或HTML语言中的一个标记，而CSS只是一种样式表现。DIV+CSS已经将内容和表现分割开来，所以修改网页时只需指定内容修改即可。

CSS常用命令规则

名称

含义

名称

含义

header

页头

content/Container

内容

footer

页脚

nav

导航

sidebar

侧栏

column

栏目

wrapper

页面外围控制整体布局宽度

left

左侧

right

右侧

center

中间

loginbar

登录条

logo

标志

banner

广告

main

页面主题

hot

热点

news

新闻

download

下载

subnav

子导航

menu

菜单

submenu

子菜单

search

搜索

friendlink

友情链接

copyright

版权

scroll

滚动

content

内容

tab

标签页

list

文章列表

msg

提示信息

title

栏目标题

joinus

加入

guild

指南

service

服务

register

注册

status

状态

vote

投票

partner

合作伙伴

什么是HTML5和CSS3

HTML5和CSS3是HTML和CSS的最新版本。

HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这种语言，我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。

html5 和css3 怎样使用

html是网页语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。html5是当前最新版本，主要特点是支持原生的视频播放、离线存储、更多的语义化标签。

css全称叫Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。CSS3也是当前最新版本，主要特点是支持圆角、阴影、动画效果等。

值得一提的是，目前IE6、7、8不能完整支持HTML5和CSS3，其它如谷歌、火狐浏览器等主流版本已经支持。

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

CSS3有什么用

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

CSS面试须知，哪些需要掌握得CSS技巧

主要都围绕知识点的理解与css兼容性问题上，请参考下面的

2.1 link和@import都可以为页面引入CSS文件，其区别是？

将样式定义在单独的.css的文件里，link和@import都可以在html页面引入css文件。有link和@import两种方式，导入方式如下：

link方式：link rel=”stylesheet” type=”text/css” href=”aa.css”

@import方式：style type=”text/css”@import “aa.css”;/style

link和@import两种导入css文件的区别：

祖先的差别。Link属于XHTML标签，而@import完全是CSS提供的一种方式。Link标签除了可以加载CSS外，还可以做很多其他的事情，比如定义RCC，定义rel连接属性等；@import就只能加载css了。

加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢时更为明显。

兼容性的差别。由于@import是CSS2.1提出的所有老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

使用DOM控制样式时的差别。当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

@Import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。

2.2 如何理解CSS样式表的层叠性？

CSS使用层叠的原则来考虑继承、层叠次序和优先级等重要特征，从而判断相互冲突的规则中哪个规则应该起作用。

继承性是指，许多CSS的样式规则不但影响选择器所定义的元素，而且会被这些元素的后代继承。

层叠性是指，当一个web页面使用多个样式表，多个样式表中的样式可层叠为一个。在多个样式表之间所定义的样式没有冲突的时候，浏览器会显示所有的样式。

优先级是指，当发生样式定义冲突时，浏览器首先会按照不同样式规则的优先级来应用样式。CSS样式的优先级如下所示（其中数字3拥有最高的优先权）：

1.浏览器缺省设置；

2.外部样式表（.css文件）或者内部样式表（位于head元素内部）；

3.内联样式（作为某个元素的style属性的值）。

同等优先级下，以最后定义的样式为准，important比内联高。

2.3 哪些属性可以继承？

Css中可以继承的属性如下：

文本相关属性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；

列表相关属性：list-style-image、list-style-position、list-style-type、list-style；

表格相关属性：border-collapse、border-spacing、caption-side、table-layoute；

其他属性：Cursor、visibility；

2.4 CSS选择器中，元素选择器和类选择器的区别是什么？

元素选择器是常见的CSS选择器，即文档的元素就是最基本的选择器。选择器通常是某个HTML元素，比如p、h1、em、a等，甚至可以是html元素本身。

类选择器用于将样式规则与附带class属性的元素匹配，其中该class属性的值为类选择器中指定的值。使用类选择器时，首先要定义样式类，其语法为：

.className{ }；

所有能够附带class属性的元素都可以使用此样式声明。只需要将class属性的值设置为”className”，则可以将类选择器的样式与元素关联。

在实际使用时，如果需要为某种元素定义样式，则往往使用元素选择器；如果要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

2.5 简要描述CSS中的定位机制

CSS中，除了默认的流定位方式以外，还有如下几种定位机制：浮动定位、相对定位、绝对定位和固定定位。

浮动定位是将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。

相对定位将元素相对于它在普通流中的位置进行定位。

绝对定位是指将元素的内容从普通流中完全移除，并且可以使用偏移属性来固定该元素的位置。

固定定位是指将元素的内容固定在页面的某个位置。

2.6 display属性和 visibility属性的区别？

可以使用display属性定义建立布局是元素生成的显示框类型。

1.如果将display属性设置为block，可以让行内元素表现得像块级元素一样；

2.如果将display属性设置为inline，可以让块级元素表现得像内联元素一样；

3.可以通过把display属性设置为none，让生成的元素根本没有框。这样的话，该框及其所有内容就不在显示，不占用文档中的空间。

在DIV设计中，室友display:none属性后，HTML元素（对象）的宽度。高度等各种

属性都将”丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

2.7 简述对CSS的盒子模型的理解？

CSS盒子模型也叫做框模型，具备内容（content）、填充（padding）、边框（border）、边距（margin）这些属性。在CSS中，每个元素都被视为一个框，而每个框都有三个属性：

border：元素的边框（可能不可见），用于将框的边缘与其他框分开；

margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白；

padding：内边距，表示框内容和边框之间的空间。

盒子模型的结构如图所示：

由上图可以看出，width和height指的是内容区域的宽度和高度。增加内边距、外边距和边框不会影响到内容区域的尺寸，但会增加元素框的总尺寸。

因此，如果在一个具有边框的元素中放置文本，往往需要设置一些内边距，以便文本的边缘不要接触边框，这样更便于阅读。而外边距则可以在多个元素框之间创建空白，避免这些框都挤在一起。因此，在设计页面时，经常会使用padding属性和margin属性来设置页面的布局。但是，必须注意的是，一旦用了padding属性或者margin属性设置了元素的边距以后，会增加元素在页面布局中所占的面积。

2.8 简述CSS3中的伪类选择器？

CSS3提供了大量伪类选择器，浏览器对于有些伪类选择器的支持还不太好。目前，常用的伪类选择器有：

目标伪类：即 :target，突出显示活动的HTML锚，用于选取当前活动的目标元素；

元素状态伪类：比如 :enabled、:disabled、:checked；

结构伪类： 比如 :first-child、:last-child、:empty、:only-child；

否定伪类：即 :not(selector)，匹配非指定元素/选择器的每个元素。

2.9 为什么建议设置背景图像的同时还设置背景颜色？

一般建议在使用背景图片的同时提供background-color属性，并且将其设置为和图像主要颜色类似的颜色。这样，如果正在加载页面，或者因为各种原因无法显示背景图像时，页面可以使用这种颜色作为背景色。

2.10 如何居中div？如何居中一个浮动元素？

给div设置一个宽度，然后设置元素的左右外边距为auto，比如，margin:0 auto。则可以实现div居中显示。

对于浮动元素，设置其左右外边距为关键字auto是无效的。此时，如果需要设置其居中显示，可以：1.精确计算其左外边距并进行设置，实现居中显示。

2.使用一个居中显示的div元素包含次浮动元素,

代码如：div style=”margin:0 auto;”div style=”float:left;”/div/div

2.11 在设置文本的字体时，为什么建议设置替换字体？

可以使用font-family属性来指定文本的字体，代码如下所示：font-family:name/inherit;

此时，name为首选字体的名称。如果字体名称有多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包围起来。

但是，如果用户机器上并没有安装name所指定的字体，则会显示默认字体。因此，如果可以指定一种替代字体，替代字体可以和指定字体不完全相同，相似且不会影响页面的布局，就可以解决问题了。

我们可以为font-family属性指定多种字体，且多种字体之间用逗号隔开，这样可以为页面指定一个字体列表。如果用户机器没有第一种字体，则浏览器会查找字体列表中的下一种字体替代默认字体显示。如果找遍了字体列表还是没有可以使用的字体，浏览器才会使用默认字体显示页面。代码如下所示：

h1{font-family:Georgia,serif;}

此时，如果用户机器上没有安装Georgia，但安装了Times字体（serif字体系列中的一种字体），浏览器就可能对h1元素使用Times。尽管Times与Georgia并不完全匹配，但至少足够接近。

因此，我们建议在所有font-family规则中都提供一个通用字体系列。这样就提供了一条后路，在用户机器无法提供与规则匹配的特定字体时，就可以选择一个通用字体作为替换。

2.12 内联元素可以实现浮动吗？

在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。

2.13 什么情况下需要额外设置表格的显示规则？

默认情况下（不额外设置表格的显示规则时），表格按照自动表格布局进行显示，即浏览器在显示表之前查看每一个单元格，然后基于所有格的设置计算表单大小，而列的宽度是由列段元个中没有折行的最宽的内容设定的。此时，单元格的大小会适应内容的大小。

自动表格布局的算法在表格复杂时会比较慢，这是由于它需要在确定最终的布局之前访问表格中多有的内容。在不能提前确定每一列的大小时，这种方式会非常适用。

如果额外设置表格的显示规则，即设置table-layout属性的值为fixed，则称为固定表格布局。在固定表格布局中，水平布局仅取决于表格宽度，列宽度，表格边框宽度，单元格间距，而与单元格的内容无关。浏览器将使用某列指定的宽度来计算布局，并使用该宽度计算该列中所有其他单元格的宽度。

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。因为如果指定使用固定表格布局，浏览器在接收到第一行后就可以显示表格。如果表格庞大且已经指定了大小，则会加速表的显示。

2.14 简要描述CSS中content属性的作用

content属性与:before及:after伪元素配合使用，来插入生成内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器为页面元素插入编号。比如，查看如下代码：

body {counter-reset:chapter;}

h1:before { content:”第”counter(chapter)”章”;}

h1 { counter-increment:chapter;}

使用content属性，并结合:before选择器和计数器counter，可以在每个h1元素前插入新的内容。

2.15 CSS Sprite是什么，谈谈这个技术的优缺点

CSS Sprite是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”，”background-repeat”，”background-position”的组合进行背景定位。

其优点在于：①减少网页的http请求，提高性能，这也是CSS Sprite最大的优点，

也是其被广泛传播和应用的主要原因；

②减少图片的字节，多张图片合并成1张图片的字节小于多张图片的字节总和；

③较少了命名困扰，只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

④更换风格方便。只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便；

但是CSS Sprite也存在一些不可忽视的缺点：

①图片合成比较麻烦；

②背景设置时，需要得到每一个背景单元的精确位置；

③维护合成图片时，最好只是向下加图片，而不是更改已有图片。

2.16 对CSS3有了解吗？列举几个CSS3的新特性并简要描述

CSS3作为CSS技术的升级版本，着力于模块化发展，将规范分解为一些小的模块，如选择器、盒子模型、列表模块、背景和边框等；并加入了很多新的模块和属性，比如赋值选择器、文字阴影、边框圆角、边框阴影、渐变、过渡、多栏布局、2D/3D转换、动画等。

其中，CSS3提供了一些复杂选择器，用于实现页面复杂情况下的元素选择，如属性选择器，一些伪类和伪元素选择器；渐变用于为元素设置渐变效果的背景；转换可以实现元素的变换，比如位移、缩放、旋转等；过渡可以实现简单的动画效果；动画属性则可以实现复杂的动画，可以实现逐帧制作动画。

2.17 过渡与动画的区别是什么？

过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果；

动画属性animation可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

2.18 什么是CSS reset？

CSS reset，又叫做CSS重写或者CSS重置，用于改写HTML标签的默认样式。

有些HTML标签在浏览器里有默认的样式，例如p标签有上下边距，li标签有列表标识符号等。这些默认样式在不同浏览器之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。着必然会带来浏览器兼容问题。

因此，在CSS代码中，可以使用CSS代码去掉这些默认样式，即重新定义标签样式，从而覆盖浏览器的CSS默认属性，即CSS reset。

需要注意的是，在进行样式重写时，不建议使用 * 选择器进行重写，这样会降低效率，影响性能。

2.19 如何清除浮动元素所带来的影响？

浮动定位是指将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。也就是说，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以元素浮动之后，其原有位置不再保留，其他元素的位置会受到影响。

如果需要清除左侧或者右侧浮动元素带来的影响，则可以使用clear属性来设置。另外，包含框呃逆的子元素浮动后，如果包含框没有设置具体的高度，则其高度会发生变化，此时，可以使用overflow属性来清除子元素浮动后带来的影响。

2.20 谈谈你对浏览器兼容性问题的理解

浏览器的类型及版本的不同会造成CSS效果不尽相同，因此需要实现浏览器兼容，也可以针对不同的浏览器编写不同的CSS。

目前，各主流浏览器的新版本，对应W3C的标准支持很好，因此，首先保证代码符合W3C的标准，这是解决浏览器兼容问题的前提。

其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀，比如-webkit-、-o-、-moz-。

第三，对于IE的低版本，可以编写带有特定前缀的代码，实现版本识别。比如：

.bb{

background-color:#f1ee18;/*所有识别*/

.background-color:#f1ee18\9;/*IE6 7 8识别*/

+background-color:#f1ee18;/*IE6 7识别*/

_background-color:#f1ee18;/*IE6识别*/

}

另外，对于特定的兼容性问题，特殊解决。常见的特殊问题有：

1.使用CSS reset：对于有些HTML标签，浏览器默认的margin和padding不同，可以使用CSS代码改写默认的样式效果，从而实现统一

2.IE低版本中，不能使用auto关键字实现块级元素居中显示，可以改用设置父元素的text-align；

3.子元素设置上外边距时，父元素需要设置边框或者外边距；

4.外边距合并问题。