【样式简介】
1、
CSS指层叠样式表、控制网页样式和布局
样式定义如何显示 HTML 元素，存储在样式表中
样式表允许以多种方式规定样式信息：
样式可以规定在单个的 HTML 元素中；
在 HTML 页的头元素中；
或在一个外部的 CSS 文件中；
甚至可以在同一个 HTML 文档内部引用多个外部样式表。
2、
CSS规则：选择器和多条声明
如果值为若干单词，则要给值加引号
子元素继承父元素样式
id 属性只能在每个 HTML 文档中出现一次
3、id选择器和类class选择器
和 id 一样，class 也可被用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}
td.fancy {
color: #f60;
background: #666;
}
在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
<td class="fancy">
4、属性选择器
5、CSS框模型概述
元素框的最内部分是实际的内容，直接包围内容的是内边距。
内边距呈现了元素的背景。内边距的边缘是边框。
边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
element : 元素
padding : 内边距
border : 边框
margin : 外边距
6、
注：CSS3完全向后兼容，因此您不必改变现有的设计。浏览器通常支持CSS2
CSS3 被划分为模块。
其中最重要的 CSS3 模块包括：
选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面
7、
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
(1)浏览器缺省设置
(2)外部样式表（定义的*.css文件）
(3)内部样式表（位于 <head> 标签内部）
(4)内联样式（在 HTML 元素内部）
【使用】
1、CSS 语法由三部分构成：选择器、属性和值：
如果值为若干单词，则要给值加引号
2、<table>标签的属性
<table cellpadding=0 cellspacing=0 border=5 >
</table>
cellpadding属性规定单元边沿与其内容之间的空白。
cellspacing属性规定的是单元之间的空间
3、HTML标签
<thead> 标签
---
【引入方式】：
一种是封装不用引用
一种是直接引用
【直接引用，区分语言】
<link href="<%=WebRoot%>bss/customization/mcel/style/<%=Language%>/pagecss/GmModelPrice.css" rel="stylesheet" type="text/css">
【使用技巧】
1、div左右分栏，要用样式控制宽度
2、交替显示
<td>
<div id="beginDate1">
<div id="beginDate"></div>
</div>
<div><select id="selChooseMonth" style="display:none"></select></div>
</td>
3、自定义
<div style="width:100px; float:left; margin:10px 10px 0px 50px; font:140% " ><%=getString("SS_KEY_MY_LANGUAGE") %></div>
---
1、colspan 是跨几列 rowspan 是跨几行
2、div和span的区别：
2个都是用来划分区间但是没有实际语义的标签,
差别就在于div是块级元素,不会与其他元素在同一行
span是内联元素，可以与其他元素位于同一行
<span class="mark">*<span>
3、
初学DIV 对其中的class id 两者很难区别：
div中布局用class，和后台相关用id
class是设置标签的类，id是设置标签的标识，class属性用于指定元素属于何种样式的类。
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容
class可以反复使用而id在一个页面中仅能被使用一次。
在实际应用的时候，class可能对文字的排版等比较有用，
而id则对宏观布局和设计放置各种元素较有用
id的优先级要高于class
id是元素的名称，可以供js或其它脚本程序来访问该元素对象，而class是该元素的css类名
另外，形如id="aaa"定义的,在css中是这样设置其样式的：
#aaa{ 样式列表 }
而以class="bbb"形式定义的，在css中应该这样设置其样式：
.bbb{ 样式列表 }
disabled默认是true不可用
4、
HTML
小于号：<
大于号：>
&和号：&
"引号："
5、
【在jsp 页面的div ，调用css 样式有几种方法？】
1.实现定义好的样式类，
然后div直接<div class="test"></div>
.test{}
2.直接写样式代码 <div style="xxxx"></div>
3.直接指定id
<div id="test"></div>
#test{}
4.直接指定标签,这种写法，将对所有div标签有效
<div></div>
div{}
【干货】
1、边框
border属性有三个子属性：线宽 线型 颜色
border-width、border-style、border-color
例如：border:10px solid red
solid是实线
您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框
并且不需使用设计软件，比如 PhotoShop。
边框属性：
border-radius
box-shadow
border-image
2、背景background
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
可以规定背景图片的尺寸，
这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。
如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
background:url(bg_flower.gif);
background-size:63px 100px;
background-repeat:no-repeat;
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
3、文本效果(间距、缩进、对齐、修饰)
text-shadow 可向文本应用阴影
您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
text-shadow: 5px 5px 5px #FF0000;
允许文本强制换行对长单词进行拆分
word-wrap:break-word;
4、字体
@font-face
font-family 规定字体名称
src 定义字体文件url
font-stretch 定义如何拉伸字体
font-style 定义字体样式
font-weight 定义字体粗细
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
}
div
{
font-family:myFirstFont;
}
</style>
5、2D转换
值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
值 rotate(30deg) 把元素顺时针旋转 30 度。
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
6、3D转换
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
7、过渡
transition过渡
transform变换
8、动画
9、多列
创建多个列来对文本进行布局 - 就像报纸那样
column-count
column-gap
column-rule
10、用户界面
新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓
resize
box-sizing
outline-offset
【浏览器兼容性】
1、Firefox中不能将id设为数字
2、Firefox不支持<img src="C:/Users/jack/Desktop/interview/source/pic/01.png">这种src绝对路径
【常范错误】
1、键值对后没分号
2、属性对顺序没区分
---
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
