css样式、渐变、响应式布局笔记

线性

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

字母转换

p.uppercase {text-transform:uppercase;} 全部转换为大写
p.lowercase {text-transform:lowercase;} 全部转换为小写
p.capitalize {text-transform:capitalize;} 首字母大写

字体间距

h2 {letter-spacing:-3px;} 字体间距3px

行高

p.big {line-height:200%;}

字体方向 direction

p{
	direction: ltr; /* 文本的方向 左 */
	/* direction: rtl; */ /* 文本的方向 右  标点符号在左边*/
}

文字阴影

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

em

• 1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

	h1 {font-size:2.5em;} /* 40px/16=2.5em */
	h2 {font-size:1.875em;} /* 30px/16=1.875em */
	p {font-size:0.875em;} /* 14px/16=0.875em */

font-weight

p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

font-variant

p.normal {font-variant:normal;} 中设置字体转变 正常
p.small {font-variant:small-caps;} 小写 首字母大写 My name is Hege Refsnes.

font

font:italic bold 12px/30px Georgia,serif;
以小型大写字体或者正常字体显示文本。
CSS字体属性定义字体，加粗，大小，文字样式。italic 和 oblique 都是向右倾斜的文字

a标签伪类选择器

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

列表list样式 list-style-type

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
list-style-image: url(‘sqpurple.gif’);标记不同的头像
list-style: square url(“sqpurple.gif”);
ul.b {list-style-type:disc;}
ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}
ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}
list-style-type: none;

border-style 值:none: 默认无边框

相邻合并

border-collapse:collapse; table相邻的线合并

设置表单对其方式

td{
	height:50px;
	vertical-align:bottom;
   }

caption 位置

caption {caption-side:bottom;} table的标题移动到table的底边

list-style-position

list-style-image

边距，边框，填充，和实际内容

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

总元素的宽度

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

线性

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

通过 border-width 属性为边框指定宽度

• 框指定宽度有两种方法
• 以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
• 使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

p{
	border-style:dotted solid;
}

border-style 说明

border-style:dotted solid double dashed;
上边框是 dotted 右边框是 solid 底边框是 double 左边框是 dashed
上->右->下->左

border-style:dotted solid double;
上边框是 dotted 左、右边框是 solid 底边框是 double
上->左右->下

border-style:dotted solid;
上、底边框是 dotted 右、左边框是 solid
上下->左右

border-style:dotted;
四面边框是 dotted
上下左右属性相同

border-style:solid;
border-top:thick double #ff0000;

list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0

边界

dotted 点底边界。
dashed 虚线底边界。
solid 实线底边界。
double 双线底边界。
groove 凹槽底边界。
ridge 垄状底边界。
inset 内入底边界。
outset 外凸底边界。

border-color

border-color" 属性 如果单独使用则不起作用. 要先使用 “border-style” 属性来设置 borders

border-color:#ff0000 #0000ff;
border-color:#ff0000 #00ff00 #0000ff;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);

• 实例

border:1px solid red;
outline:green dotted thick;
p.ridge {outline-style:ridge;}

outline-style:dotted;
outline-color:#00ff00;

outline-style:solid;
outline-width:thin;

---

margin

margin:25px 50px 75px 100px;
上边距为25px 右边距为50px 下边距为75px 左边距为100px

margin:25px 50px 75px;
上边距为25px 左右边距为50px 下边距为75px

margin:25px 50px;
上下边距为25px 左右边距为50px

margin:25px;
所有的4个边距都是25px

p.ex1 {margin-top:2cm;}

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中

padding

padding:25px 50px 75px 100px;
上填充为25px 右填充为50px 下填充为75px 左填充为100px

padding:25px 50px 75px;
上填充为25px 左右填充为50px 下填充为75px

padding:25px 50px;
上下填充为25px 左右填充为50px

padding:25px;
所有的填充都是25px

p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}

CSS 尺寸 (Dimension)

width height

块元素

<h1> <p> <div>

内联元素

<span> <a>

visibility

visibility: collapse;

CSS Position(定位)

• position 属性指定了元素的定位类型。

  • static
  • relative
  • fixed
  • absolute
  • sticky

• static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响

• fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：

• sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

<div class="sticky">我是粘性定位!</div>  

鼠标样式 cursor

 <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<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>

CSS3 中包含了四种组合方式

CSS 组合选择符
Note 组合选择符说明了两个选择器之间的关系。
CSS组合选择符包括各种简单选择符的组合方式。

• 四种组合方式
• 后代选择器(以空格 分隔)
• 子元素选择器(以大于 > 号分隔）
• 相邻兄弟选择器（以加号 + 分隔）
• 普通兄弟选择器（以波浪号 ～ 分隔）

1. 后代

  div p{
	background-color:yellow;
  }

2. 子元素

 div>p{
background-color:yellow;
}

background

• background-image 背景图片
  • background-image:url(‘images/g.png’);
  • background-image:url(网络图片地址);
• background-repeat 填充
  • background-repeat:repeat-x; 延x轴平铺
  • background-repeat:no-repeat; 不平铺
• background-position 背景图片不重复，设置 position
  • background-position:right top;
• background-attachment 附属
  • background-attachment:fixed; 背景图片是固定的

完整 background:#5d9ab2 url(‘https://static.runoob.com/images/mix/img_tree.png’) no-repeat top left;
margin-right:200px;添加了 margin-right 属性用于让文本与图片间隔开

图象与文字对齐

img.top {vertical-align:text-top;} 顶部对齐
img.bottom {vertical-align:text-bottom;} 底部对齐

引用 quotes

q:lang(en){
quotes: "~" "~" "'" "'";
}

<q>This is a <q>big</q> quote.</q>

~This is a ‘big’ quote.~

进度条

• 样式

* {box-sizing: border-box}
.container {
  width: 100%;
  background-color: #ddd;
}
.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}
.html {width: 90%; background-color: #4CAF50;}

• 布局

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

---

设置图片边框 border-image

• Internet Explorer 不支持 border-image 属性

border-image 属性用于设置图片的边框

• round 图像平铺（重复）来填充该区域。

border-image:url(images/pig.webp) 30 30 round;

• stretch 图像被拉伸以填充该区域

border-image:url(images/pig.webp) 30 30 stretch;

特殊字符

« «
» »

背景图

background-image: url(images/pig.webp), url(images/g.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;

background: url(images/pig1.gif) right bottom no-repeat, url(images/pager.jpg) left top repeat;

background-image: url(images/h8.jpg),
				  url(images/hei7.jpg),
				  url(images/hm9.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;

背景裁切 background-clip

• border 没有背景剪裁 (border-box没有定义)

border: 10px dotted black;
padding:35px;
background: yellow;

• background-clip: padding-box; 裁切到边框10px

 border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: padding-box;

• background-clip: content-box; 裁切掉 10px 35px

border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;

button

<button>Sony</button>

.btn-group button:not(:last-child) { 不是最后一个按钮[孩子]都是红色字体
	color: red;
	border-right: none; /* Prevent double borders */
}

渐变

background-image: linear-gradient(#e66465, #9198e5); 从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色

• 从上到下渐变

background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: linear-gradient(top, #e1ddd9, #e9e5e2);  

• 从左到右渐变

background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0) 100%);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0) 100%);

• 从右到左

background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);	

• 从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色

background-image: linear-gradient(to bottom right, red , yellow);

• 不同角度的渐变

#grad1 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(0deg, red, yellow); 
}
#grad2 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(90deg, red, yellow); 
}
#grad3 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(180deg, red, yellow); 
}
#grad4 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(-90deg, red, yellow); 
}

• 颜色节点渐变

#grad1 {
    height: 200px;
	background-color: red; /* 浏览器不支持的时候显示 */
    background-image: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
	background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}

#grad3 {
    height: 200px;
	background-color: red; /* 浏览器不支持的时候显示  当指定百分比时不均匀，颜色是不均匀分布*/
	background-image: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
}

盒子阴影

box-shadow: 0 1px 0 #bebbb9 inset,0 1px 0 #fcfcfc;
-webkit-box-shadow: 0 1px 0 #bebbb9 inset,0 1px 0 #fcfcfc;	

无线做动画 infinite

.loader{
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
	  0% { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(360deg); }
	}
	
	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}

加载样式 一

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

---

加载样式 二

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

---

加载样式 三

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

---

加载样式 四

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

透明渐变

#grad1 {
	height: 200px;
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复的线性渐变

#grad1 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%); 
}

#grad2 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); 
}

#grad3 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%); 
}

#grad4 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%); 
}

径向渐变均匀 radial-gradient

#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}

径向渐变不均匀 radial-gradient

#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}

椭圆形 Ellipse（默认）

#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
}

圆型渐变

#grad2 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}

径向渐变 - 不同尺寸大小关键字的使用

#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); 
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); 
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black); 
}

重复的径向渐变

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);