- CSS background-color 属性 11-25
- will-change优化CSS性能 11-25
- css定位 11-25
- css基础——css代码规范 11-25
- css从入门到放弃（2）——css类选择器 11-25
- 第六章——css部分：基本属性与CSS 11-25
- 层叠样式表CSS创始人讲述CSS的未来和挑战 11-25
- CSS table-layout 属性 11-25
- CSS max-width 属性 11-25
- CSS font-style 属性 11-25
CSS background-color 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置不同元素的背景色：
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
标签定义及使用说明
background-color属性设置一个元素的背景颜色。
元素的背景是元素的总大小，包括填充和边界（但不包括边距）。
默认值:transparent继承:no版本:CSS1JavaScript 语法:objectobject.style.backgroundColor="#00FF00"will-change优化CSS性能
发布者: superzhang | 发布时间:2017-11-25will-change属性通过告诉浏览器什么属性、什么元素将会发生变化，可以对这些操作进行可能性的优化，由此提高CSS动画的执行效率。
这个属性可以有4个值：
auto: 实行标准浏览器优化。
scroll-position: 指明元素的滚动位置将会出现动画变化，浏览器应该为滚动视窗内容的不可见部分事先做好准备。
contents: 指明元素的内容将会发生变化，浏览器不要缓存它们的内容。
<custom-ident>: 指明will-change实施的目标属性，比如transform 或 opacity。
如果想通知浏览器会发生一个transform方面的变化，可以这样写：
.element {will-change: transform;}我们还可以指定多个值，用逗号分隔，例如：
.element {will-change: transform, opacity;}然而，千万不要过度使用will-change属性，否则，事与愿违，页面的执行效率会降低，推荐的做法是当一个元素或属性发生变化时打开will-change，变化完成之后关闭它。
-------------------------------------
www.qieban.cn 专业
css定位
发布者: superzhang | 发布时间:2017-11-25css定位及z-index的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css定位</title>
<style>
/*z-index数越大越靠顶层，数越小越靠底层*/
#div1{
width:200px;
height:200px;
background: rebeccapurple;
position:absolute;
top:20px;
z-index: 2;
}
#div2{
width:200px;
height:200px;
background:black;
position:relative;
left:20px;
z-index: 1;
}
#div3{
width:200px;
height:200px;
css基础——css代码规范
发布者: superzhang | 发布时间:2017-11-25CSS代码规范
1.使用Reset但并非全局Reset
全局Reset不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。
*{ margin:0; padding:0; }
2.良好的命名规范
ID和class的命名尽可能短，并符合语义。多个单词的拼接用 '-' 符号链接，尽量使用小写字母。
3.代码缩写
CSS代码缩写可以提高你写代码的速度，精简你的代码量。
li{ font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px; padding-bottom:10px; padding-left:5px;}
可以缩写成li{ font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px;}
4.利用CSS继承
如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你可以很好的维护你的代码，并且还可以减少代码量。那么本来这样的代码：
css从入门到放弃（2）——css类选择器
发布者: superzhang | 发布时间:2017-11-25上一节css课程讲了写标签的样式的方法。
是通过
<style type="text/css">
div{
}
</style>
这样的写法来对网页中所有的div标签中的内容来规定样式。
但是这样写有个缺点，就是样式太单一了。假如我想让网页上第一个div标签中显示样式1，然第二个div标签中显示样式2，应该怎么完成呢？
这就需要用到类选择器了，通俗一点讲就是建立一个名称，里面存储着一些样式，然后那个标签需要用到这个样式就在标签中调用这个样式。
看代码 特别注意 类名必须为字母不能为纯数字，或者数字开头
在这段代码中，我们定义了box和miss两个样式类，里面分别储存了一些样式
接下来我们尝试在标签中调用这两个样式
第六章——css部分：基本属性与CSS
发布者: superzhang | 发布时间:2017-11-25一、标签属性与样式
1、网页内容根据想要在作用选择对应在标签
2、找到对应在标签，敲空格看提示，选择对应在单词（或style）来描述该标签。
直接能够敲的出来我们成为属性（attribute），类似于字体在color等。
敲不出来的，称为细节，确切的说叫样式Style。
<font size="+1" style="font-size:10px;">重蔚自留地</font>
TIPS：样式比属性更能精确、多样的控制标签的表现形式
二、CSS介绍：
Cascading [Kæs'keɪdɪŋ] Style Sheet，层叠样式表。
三、选择器：
1、标签选择器
控制对应的标签，通过标签的关键字。
<font>测试文字</font>
<font>abc</font>
<
层叠样式表CSS创始人讲述CSS的未来和挑战
发布者: superzhang | 发布时间:2017-11-25以下来自CSS的创始人，现任W3C CSS标准的制定者 Bert Bos 2016年12月17日发表在CSS诞生20周年上的展望文章，全文翻译。
https://www.w3.org/Style/CSS20/challenges.html
CSS的挑战从现在起的五年，或甚至二十年后的CSS看起来将是怎样的？会有更好的样式表语言吗？会不会有一个比HTML + CSS更好的语言用于创建GUI？不好说。但CSS有一些差距，有一天将必须填补，由CSS本身或其继任者。这里有一些：
Page templates 页面模板
Punctuation, or: semantic vs typographic mark-up 标点，或：语义与印刷标记
Copy-fitting 复制配合
HTML5's details element HTML5的details元素
我计划在一年中更新此页面，以便在2017年12月17日之前，它可以作为CSS（或其后续...）的计划。
Page templates页面模板一个示例是页面模板。应该可以在页面上指定多个区域，每个区域都获得某种内容。这可以在单个，滚动页面上或在分页呈现中的页面之一上。这些区域可以与虚拟网格对齐，或任意放置（虽然也可以是网格，只是不规则的网格）
CSS table-layout 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置表格的布局算法：
table
{
table-layout:fixed;
}
属性定义及使用说明
table-layout属性为表设置表格布局算法。
默认值：auto继承：no版本：CSS2JavaScript 语法：object.style.tableLayout="fixed"浏览器支持
CSS max-width 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置段落的最大宽度：
p
{
max-width:100px;
}
属性定义及使用说明
max-width属性设置元素的最大宽度。
注意： max-width属性不包括填充，边框，或页边距！
默认值：none继承：no版本：CSS2JavaScript 语法：object.style.maxWidth="100px"浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性max-width1.07.01.02.0.27.0属性定义及使用说明
font-style属性指定文本的字体样式。
默认值：normal继承：yes版本：CSS1JavaScript 语法：object.style.fontStyle="italic"浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性font-style1.04.01.01.07.0
