今天小编跟大家讲解下有关css简介_动力节点Java学院整理 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css简介_动力节点Java学院整理 的相关资料，希望小伙伴们看了有所帮助。
CSS(Cascade Style Sheet) 即层级样式表。
HTML可以说只是给网页填充了内容 CSS则是对网页进行化妆、修饰 比如给文字设置字体、颜色、大小等。
以前在HTML标签中能够通过设置属性的方式(比如<div width="80px">)为标签定义样式（类似CSS的功能） 但是现在推荐使用CSS设置(div{width:80px;}) 即"HTML与CSS分离" 在web中还有“页面展示与逻辑处理分离”等概念。
一般来说目前实现网页时不需要从零做起 网上有很多好的CSS代码可以使用但是为了能看懂那些代码（或更好地学习CSS框架） 我们需要学习CSS的基本知识。
CSS的基本结构如下：
<selector>{ <attr1>:<value1>; <attr2>:<value2>; <attr3>:<value3>; ...... <attrN>:<valueN>;}解释：
<selector>的中文名叫“选择器” 表示对哪个元素设置样式。<selector>大括号内部设置具体的样式 如字体等。
设置样式的方法是通过多对<attr>:<value>组合而成 中间用分号( ; )分隔。
这里举个简单的例子：
body{ //对<body>内的元素进行设置 font-size:12px; //设置字体大小为12px,px是pixel的缩写 表示像素 font-family:sans-serif,Georgia; //设置首选字体为sans-serif,如果本机内没安装此字体 则使用Georgia}CSS的规则
1.继承原则：如果父标签定义了某样式 则默认对应的子标签也应用该样式。
2.就近原则：离修饰标签越近的CSS样式优先级越高。
引入CSS样式的方法
这里只介绍两种最常用的：
1.内部样式表：在<head></head>内部添加：<style type="text/css">......</style>
2.外部样式表：将CSS放在文件(如home.css)中 并在<head></head>内部添加：<link rel="stylesheet" type="text/css" href="home.css"/>
在CSS中不可避免会遇到颜色设置 因此这里我们需要学习怎么表示颜色。
共有4种颜色表示法：
1.预定义颜色：例如“color:black”中的black就是预定义的颜色。
2.十六进制表示法：#ABCDEF 其中AB、CD、EF分别对应R、G、B。例子：#FFFFFF 表示白色。
3.短十六进制表示法：这是对第二种表示法的特例 当A=B时A和B只写一个(同样地 C=D、E=F 时也类似)。例子：#FF00CC 可简写为 #F0C.
4.rgb表示法：rgb(255,255,255) 表示白色。
CSS Reset
起因：在不同浏览器中的默认CSS样式可能是不同的 比如按钮 在IE中可能是样式A 在Chrome中是样式B 在Firefox中是样式C 这种不一致性会让开发者不爽。因此就需要CSS Reset来统一不同浏览器的默认样式。
CSS reset 通俗地说就是“一段CSS代码 这段代码能够初始化基本的标签 使得在不同浏览器中 各标签的显示样式是一样的。”
还有一个更加应用广泛的替代CSS Reset的代码：Normalize.css 他被很多框架使用。
最常用的CSS Reset代码是 Eric Meyer 写的“CSS Reset 2.0” 代码如下：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }*:选择任何元素。格式为：*{...}
标签选择器：选择指定标签。格式为：<tag>{...}
id选择器：选择指定 id 的元素。某个 id 在一个页面中是唯一的。格式为：#<id>{...}
class选择器：选择指定class的元素。格式为：.<class>{...}。值得一提的是 class选择器的变型：
与标签选择器一起使用 格式为：<tag>.<class>。表示只选择具有class=<class>的<tag>标签。
多个class一起使用 格式为：.<class1>.<class2>。表示class同时属于<class1>和<class2>的元素。
后代选择器：选择指定元素的指定后代元素（后代和子元素是不同的 并不一定要紧跟在父元素里面）。格式为：<father> <空格><descendent> 例如 div h3 解释为“div元素的所有<h3>标签”。
子元素选择器：选择指定元素的子元素（子元素指的是孩子 并不包含孙子...）。格式为：<father> > <child>。
属性选择器:选择具有指定属性或指定属性具有特定值的元素。格式为：<selector>[<attribute1>][<attribute2>]或<selector>[<attribute1>="<value1>"][<attribute2>="<value2>"]。
部分匹配属性值：<selector>[<attribute>*="<value>"]表示只要<attribute>属性中包含<value>值即可。
相邻兄弟选择器：选择(紧挨着的)相邻的兄弟的元素。格式为：<selector1> + <selector2>。表示选择紧跟在selector1后面的selector2。
伪类选择器：
<selector>:first-child{...} . 当<selector>为某个元素的第一个子元素时应用样式。
<selector>:focus{...} . 当<selector>拥有键盘输入焦点时应用样式。
a:link{...} . 当<a>未被访问过时应用样式。
a:visited{...}. 当<a>已被访问时应用样式。
a:hover{...} . 当鼠标悬浮在<a>上时应用样式。（随着移动设备的越来越流行 我们发现移动设备是没有鼠标的 因此没有hover这个概念 hover变得不那么重要了。）
a:active{...}. 当<a>被激活(激活指的是鼠标按下且未松开的这段时间)时应用样式。
注意：在css中一定要以：link -> visited -> hover -> active 的顺序进行声明！！！！
伪元素选择器：
<selector>:first-line{...}. 选择<selector>的第一行。注意：<selector>必须是块级元素。
<selector>:first-letter{...}. 选择<selector>的第一个字母。注意：<selector>必须是块级元素。
<selector>:before{content:"..."}. 在<selector>的前面插入内容。例如：h1:before{content:url(1.jpg)}表示在<h1>前面插入一张图片。
<selector>:after{content:"..."}. 在<selector>的后面插入内容。
选择器分组：多个选择器可以用逗号（,）隔开 表示同时对多个选择器设置样式。格式为：<selector1>,<selector2>,<selector3>{...}
应用：
1.选择一个有序列表中的第三行：ol > li:first-child + li + li
2.选择class="c1"的div：div.c1
选择器定义准则：
1.最常用的选择器：id选择器、class选择器。
2.尽量少使用复杂层级关系。
来源：爱蒂网
