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