CSS学习

1.CSS语法

Selector {Declaration;Declaration;}
Declaration= Property:Value

2.class和id选择器

id： #标识符{}
使用时候：<p id="标识符">

class: .标识符 {} or 元素.标识符 {}

3.如何插入样式表

外部样式表：就是在head处引入外部css文件 最后优先级
内部样式表：在head内写<style></style> 次之优先级
内联样式:在元素内部添加style属性，style=“property：value” 最高优先级

外部：针对全局概念
内部：某个页面需要特殊对待
内联：某个元素具备特殊样式 仅此一处

多重样式将层叠为一个
层叠顺序为：4为最高优先级
1.浏览器缺省设置
2.外部样式表
3.内部样式表
4.内联样式

4.CSS Backgrounds

background-color
十六进制#ffffff
RGB rgb(255,0,0)
red

background-image
background-repeat 背景图像水平或垂直平铺
background-attachment
background-position

a {text-decoration:none;} 取消超链接下划线

p {text-indent:50px;} 文本缩进

所有CSS文本属性。
属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

5.CSS字体

font-size 字体大小

所有CSS字体属性

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

所有的CSS列表属性

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

6.盒子模型

margin
border
padding
content

注意: “border-width” 属性 如果单独使用则不起作用。要先使用 “border-style” 属性来设置边框。

outline-style:
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

7分组选择器and嵌套选择器


h1,h2,p
{
color:green;
}


.marked p
{
color:white;
}
为所有class="marked"元素内的p元素指定一个样式


8所有CSS 尺寸 (Dimension)属性

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

h1.hidden？？？

9块和内联元素

块元素是一个元素，占据了全部宽度，在前后都是换行符。
块元素：<h1> <p> <div>
内联元素只需要必要的宽度，不强制换行。
内联元素：<span> <a>

如何改变一个元素的显示
li {display: inline;}本来是带着换行的，但现在不换行了。块元素-》内联元素

span {display: block}内联元素-》块元素

10CSS Positioning定位

static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。

Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
class等于pos_fixed的p标签位置设置
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

Relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Absolute 定位

重叠的元素
z-index属性决定谁在前，谁在后。

裁剪元素外形
img
{
position:absolute;
clip:rect(0px,60px,200px,0px); 上右下左
}

不同光标

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>


11浮动

清除浮动 - 使用 clear
.text_line
{
clear:both;
}
float浮动从新开始

12CSS水品对齐Horizontal Align

注意:当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。

13组合选择符

1. 后代选取器，以空格分隔；

div p
{
  background-color:yellow;
}

1. 子元素选择器，以大于号分隔； div>p
2. 相邻兄弟选择器，以加号分隔； div+p

3. 普通兄弟选择器，以破折号分隔。div~p

   不太懂，感觉没什么区别。

14CSS伪类

后面的link、visited、hover就是伪类，不是类的类，依我看也不是瞎写的。有个表，列举了所有伪类，主要涉及p、input、a三个标签。

a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

15.CSS伪元素

伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个 元素的第一个字母
:first-line	p:first-line	选择每个 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每个元素之前插入内容
:after	p:after	在每个元素之后插入内容
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

16.CSS 导航栏

导航栏=链接列表，没什么内容。

17.CSS 下拉菜单

通过CSS设置下拉菜单，现将菜单div的display属性设置成none，在设置触发区域hover时，菜单区域的display属性改成block。

18.CSS 图片框

和上面大同小异，触发的时候改变图片的border像素宽度。

19.图像透明/不透明

CSS3中属性的透明度是 opacity， 和上面的大同小异，这几部分都用到了，CSS伪类的概念。

20.CSS图像拼合技术

有一张图，通过css裁取不同位置，感觉好像很多图，其实是从同一张图取得。

21.CSS 媒体类型

@media screen 电脑设备时什么样式
@media print 用于打印时什么样式
@media tv 用于电视机类型的显示

22.CSS 属性选择器

所有属性带title的，且值包含hello的
例子：[title~=hello] { color:blue; }

23.CSS实例

链接：http://www.runoob.com/css/css-examples.html

CSS 响应式设计

1.响应式 Web 设计 - Viewport
viewport：是用户网页的可视区域。 视区、视口。

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

屏幕适配用的

2.响应式 Web设计- 网格视图

// 保证计算的正确
* {
    box-sizing: border-box;
}

3.响应式 Web 设计 - 媒体查询

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

添加断点

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

为移动端优先设计
所谓优先，就是将断点放在桌面样式声明 前面

/* 为移动端设计: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

例子：

针对桌面设备:

第一和第三部分跨越 3 列。中间部分跨域 6 列。

针对平板设备:

第一跨域 3列，第二部分跨越 9 列，第三部分跨域 12 列：
<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>

方向：横屏/竖屏
orientation：portrait | landscape
portrait：指定输出设备中的页面可见区域高度大于或等于宽度
landscape： 除portrait值情况外，都是landscape

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    } // 横屏背景浅蓝色
}

4.响应式Web设计-图片
小于400的用什么背景图，大于400的用什么背景图

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg');
    }
}

你可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。设备不换，浏览器怎么抻拉，图片不变。

HTML5 <picture> 元素

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

source定义了图片资源，不显示的，下面img会根据浏览器的情况选择对应的source。

5.响应式Web设计-视频（Video）
主要就是视频的宽度所反映的适应。
width，max-width，没什么可说的。

6.响应式Web设计-框架
其实就是Bootstrap！ 已看完

CSS参考手册

1.CSS属性 重要！！！
链接：http://www.runoob.com/cssref/css-reference.html
这个抽时间得背会。

2.CSS选择器
链接：http://www.runoob.com/cssref/css-selectors.html
Q:不知道和JQuery的选择器是什么关系？

3.CSS 语音参考
链接：http://www.runoob.com/cssref/css-ref-aural.html
残障人士

4.CSS Web安全字体组合
链接：http://www.runoob.com/cssref/css-websafe-fonts.html

5.CSS 动画
链接：http://www.runoob.com/cssref/css-animatable.html
内容很多，重点！！！

6.CSS单位
链接：http://www.runoob.com/cssref/css-units.html
像素或许被认为是最好的”设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

7.CSS颜色
链接：http://www.runoob.com/cssref/css-colors.html

8.合法颜色值
链接：http://www.runoob.com/cssref/css-colors-legal.html
就是表达颜色的方式，有十六进制，RGB，RGBA，HSL，HSLA

9.预定义/跨浏览器的CSS颜色名称
链接：http://www.runoob.com/cssref/css-colornames.html
147颜色名称

10.CSS 颜色十六进制值
链接：http://www.runoob.com/cssref/css-colorsfull.html

11.CSS3 浏览器支持参考手册
链接：http://www.runoob.com/cssref/css3-browsersupport.html

CSS3 学习

CSS 用于控制网页的样式和布局。

1. CSS3简介
到CSS3就拆成了模块，重要的CSS3模块有：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面

2.CSS3边框
新添属性：border-image border-radius box-shadow

3.CSS3圆角制作器
使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 border-radius: 15px 50px 30px 5px:
根据这个属性，可作出椭圆边框。

4.CSS3背景
新增几个背景属性：background-image/background-size/background-origin/background-clip
语法：background-clip: border-box|padding-box|content-box;

5.渐变Gradients
语法：background: linear-gradient(direction, color-stop1, color-stop2, …);
怎么跨浏览器，下面可见一斑。

<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
     background: linear-gradient(to right, red , blue); /* 从左至右 */
     background: linear-gradient(to bottom right, red , blue); /* 左上右下*/
}
</style>

预定义方向：to bottom、to top、to right、to left、to bottom right
还可以按角度： background: linear-gradient(0/90/180/-90deg, red, blue);
透明度：background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
重复： background: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变
语法：background: radial-gradient(center, shape size, start-color, …, last-color);

6.CSS3文本效果

h1 {text-shadow: 5px 5px 5px #FF0000;}

7.CSS3字体
@font-face

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
div
{
    font-family:myFirstFont;
}
</style>

// CSS3开始可以使用任何字体了，不仅限于web安全字体了。
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight:bold;
}

8.CSS3 2D转换
translate移动、rotate旋转、scale缩放、skew倾斜、matrix合并转换

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

9.CSS3 3D转换
没看到效果

10.CSS3过渡
很好的动画效果 用一种样式变到另一种样式

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
</style>

11.CSS3动画 重点！！！
可以理解为关键帧

<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background:red;}
    to {background:yellow;}
}
</style>

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
from代表0%，to代表100%。

以下为一个完整的多浏览器适配动画的例子

<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    animation-iteration-count:infinite; // 无限循环动画
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}
</style>

12.CSS3多列
报纸排饭风格，支持多列显示，可设置间隔样式，列宽，列数。

<style> 
.newspaper
{
    column-count:3;
    column-gap:40px;
    column-rule-style:dotted;

    /* Firefox */
    -moz-column-count:3;
    -moz-column-gap:40px;
    -moz-column-rule-style:dotted;

    /* Safari and Chrome */
    -webkit-column-count:3;
    -webkit-column-gap:40px;
    -webkit-column-rule-style:dotted;
}
</style>

13.CSS3用户界面
resize。。。乏善可陈

14.CSS3图片
照片缩略图，有选中效果，待相片边框。

<style>
a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>

<a target="_blank" href="paris.jpg">
  <img src="paris.jpg" alt="Paris" width="400" height="300">
</a>

图片文本
这部分就是在说如何在图片上写字，对齐什么的。

.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

首页图片说明文字的居中对齐，就是参考了上面，要点：left：0；width：100%； text-align：center；

卡片式图片
小清新风格的图片。

<style>
body {margin:25px;}
div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>

图片滤镜
CSS3自带图片滤镜，需要的时候想着用。 重点！！！

<style>
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>

响应式图片相册
我觉得主要就是根据不同的浏览器宽度，决定显示几张图片。

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}
// 下边这段不明白，应该是清除前面样式什么的吧？
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

模态图片
就是点击图片，弹出大图浏览界面，背景太空黑那种。
参考链接：http://www.runoob.com/try/try.php?filename=trycss_image_modal_js

15.CSS3按钮

<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>

这部分是button基本底层样式，CSS是最底层，最根本的层。一切button样式都可以在这里找到，链接：http://www.runoob.com/css3/css3-buttons.html

16.CSS分页实例

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}
// 悬停于未选中的组件选择器抓取
ul.pagination li a:hover:not(.active) {background-color: #ddd;}

// 分页带边框
ul.pagination li a {
    border: 1px solid #ddd; /* Gray */
}

面包屑导航

ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

17.CSS3框大小
设置这个后，在设置什么width、height，就包括padding、border了。

* {
    box-sizing: border-box;
} 

18.CSS3弹性盒子 Flex Box
有用，设计复杂组件布局时可以看看，链接：http://www.runoob.com/css3/css3-flexbox.html

19.CSS3多媒体查询
@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。
媒体查询可用于检测很多事情，例如：
- viewport(视窗) 的宽度与高度
- 设备的宽度与高度
- 朝向 智能手机横屏、竖屏
- 分辨率

查询语法：not only all

• all 所有多媒体设备
• print打印机
• screen 电脑屏幕 平板 智能手机
• speech 屏幕阅读器

链接：http://www.runoob.com/css3/css3-mediaqueries.html

20.CSS3多媒体查询实例
链接：http://www.runoob.com/css3/css3-mediaqueries-ex.html

至此，CSS部分全部看完！

The End
2016.11.30 晚上6:51