CSS 选择器：
CSS id选择器：
id选择器可以为标有特定 id的HTML元素指定特定的样式
id选择器是以 “#” 来定义的
<!DOCTYPE html>
<html>
<head> <title>Node</title> <style type="text/css"> #red {color: red;} #green {color: green;} </style> </head> <body> <p id="red">id选择器：red -- 红色</p> <p id="green">id选择器：green -- 绿色</p> </body> </html>
id选择器常建立
派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
如上，在使用sidebar选择器时，应用在p标签上会使用第一个CSS样式
单独的选择器
id选择器即使不被用来创建 派生选择器，也可以单独使用
#sidebar {
border: 1px dottde #00;
padding:10px;
}
CSS 类选择器：
类选择器以一个点号定义
.center{text-align:center;}
<h1 class="center"> Hello! </h1>
和id选择器一样，class也可以被用作派生选择器
.fancy td {
color: #f60;
background:#666;
}
CSS 属性选择器：
为所有title属性的所有元素设置样式：
[title]
{
color:red;
}
CSS 创建：
外部样式表：
每一个页面可以使用< link >标签链接到样式表文件（位于文档头部）
<head>
<link rel="stylesheet" type="text/css" href="*.css" /> </head>
内部样式表：
在文档头部的< style >标签中定义内部样式表
<head>
<style type="text/css"> hr {color: sienna;} #nu {color: ber;} .nm {color:bre;} </style> </head>
内联样式表：
和标签叠在一起，用 “style”属性表示设置css样式
<p style="color:bre"> Hello！ </p>
如果一个元素拥有多个CSS选择器，会按照内部 -->外部的次序进行设置渲染 -
CSS 样式：
背景样式：
背景色：
background-color属性： 设置背景色，接受任何颜色值
背景图像：
background-image属性：设置背景图像（url图像相对位置）
background-repeat属性：设置背景无限平铺
background-position属性：背景定位（居左，居中，居右）
关键字：
图像防止的关键字，作用就是可以简单明了；
关键字等价和含义
center中心居中top顶部居中bottom底部居中right右侧居中left左侧居中 百分数值：
（左上角）百分数值同时应用于元素和图像
长度值：
元素内边距左上角的偏移
背景关联：
background-attachment属性：页面向下滚动时，背景也会一起滚动
文本样式：
缩进文本：
text-indent属性： 实现文本缩进，属性值是px/em/负值/百分 数
水平对齐：
text-align属性： 实现文本的对齐方式
left：左对齐
right：右对齐
center：居中（和< CENTER >标签不同，后者是对元素操作，而前者只对文本有效）
justify“：两端对齐
字间隔：
word-spacing属性： 可以改变字或单词之间的标准间隔，默认（normal）为 0
正数值：加大间隔
负数值：缩小间隔
字符转换：
text-transform属性： 处理文本的大小写
none：不进行操作
uppercase：全大写
lowercase：全小写
capitalize：首字母大写
文本装饰：
text-decoration属性：
none：无
underline：为元素添加下划线
overline：为文本顶端添加上划线
line-through：为文本添加删除线
blink：为文本添加闪烁效果
处理空白符：
white-space属性： 文档中对 空格、换行、tab字符的处理
下面的表格总结了 white-space 属性的行为：
值空白符换行符自动换行
pre-line合并保留允许normal合并忽略允许nowrap合并忽略不允许pre保留保留不允许pre-wrap保留保留允许
文本方向：
direction属性： 块级元素中的文本书写方向，表中列布局的方向……unicode-bidi属性：行内元素
文本属性：
属性描述
color设置文本颜色direction设置文本方向。line-height设置行高。letter-spacing设置字符间距。text-align对齐元素中的文本。text-decoration向文本添加修饰。text-indent缩进元素中文本的首行。text-shadow设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。text-transform控制元素中的字母。unicode-bidi设置文本方向。white-space设置元素中空白的处理方式。word-spacing设置字间距。
字体样式：
字体属性
属性描述
font简写属性。作用是把所有针对字体的属性设置在一个声明中。font-family设置字体系列。font-size设置字体的尺寸。font-size-adjust当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）font-stretch对字体进行水平拉伸。（CSS2.1 已删除该属性。）font-style设置字体风格。font-variant以小型大写字体或者正常字体显示文本。font-weight设置字体的粗细。
链接样式：
链接的四种状态：
a:link 普通的，未被访问的链接a:visited 用户已访问的链接a:hover 鼠标指针位于链接上方a:active 链接被点击时刻
文本修饰：
text-decoration属性：常用于去掉链接中的下划线
列表样式：
列表类型：
影响列表的样式，最简单的方法就是改变其标志类型
列表项标记：
list-style-type属性： 设置列表的列表项的标志
列表项图像：
list-style-image属性： 将列表项标志设置为一个图像
列表标志位置：
list-style-position属性：
简写列表样式：
list-style属性：
表格样式：
表格边框：
border属性： 设置表格的边框样式（双线框）border-collapse属性：将双线框折叠为单线框
宽度和高度：
width属性： 设置宽度height属性： 设置高度
表格对齐：
text-align属性： （水平对齐）
left：左对齐
right：右对齐
center：居中（和< CENTER >标签不同，后者是对元素操作，而前者只对文本有效）
justify“：两端对齐
vertical-align属性： （垂直对齐）
表格内边距：
padding属性： 可以设置 , 元素标签的内边距
表格颜色：
border属性： 设置元素文本和背景颜色
属性描述
border-collapse设置是否把表格边框合并为单一的边框。border-spacing设置分隔单元格边框的距离。caption-side设置表格标题的位置。empty-cells设置是否显示表格中的空单元格。table-layout设置显示单元、行和列的算法。
轮廓样式：
outline属性：在元素周围绘制一条线
outline-color属性：设置轮廓的颜色outline-style属性：设置轮廓的样式
outline-width属性：设置轮廓的宽度
转载于:https://www.cnblogs.com/lldbk12/p/11452794.html
相关资源：JAVA上百实例源码以及开源项目
