CSS 常用样式
颜色属性
常见样式的颜色属性：
color：定义文本的颜色border-color：定义边框的颜色background-color：设置背景色
颜色属性值设置方式：
十六进制值 - 如：＃FF0000一个RGB值 - 如：RGB(255,0,0)颜色的名称 - 如：red
参阅 CSS 颜色值 查看完整的颜色值
边框和尺寸
边框：定义元素的边框 常用属性：
border-style：定义边框的样式 属性值：
none：默认，无边框dotted：定义一个点线边框dashed：定义一个虚线边框solid：定义实线边框double：定义两个边框。 两个边框的宽度和 border-width 的值相同groove：定义3D沟槽边框。效果取决于边框的颜色值ridge：定义3D脊（山脊）边框。效果取决于边框的颜色值inset:定义一个3D的嵌入边框。效果取决于边框的颜色值outset：定义一个3D突出边框。 效果取决于边框的颜色值 border-style 属性可以有 1-4 个值：
4 个值：上 下 左 右 示例：border-style:dotted solid double dashed; 上边框是 dotted，右边框是 solid，底边框是 double，左边框是 dashed 3 个值： 上 左右 下 示例：border-style:dotted solid double; 上边框是 dotted，左、右边框是 solid，底边框是 double 2 个值：上下 左右 示例：border-style:dotted solid; 上、底边框是 dotted，右、左边框是 solid 1 个值：上下左右 示例：border-style:dotted; 四面边框是 dotted border-color：定义边框的颜色。属性值详见颜色属性 注意： border-color 单独使用是不起作用的，必须得先使用 border-style 来设置边框样式 border-width：定义边框的宽度 为边框指定宽度的方式：
方法1：可以指定长度值，比如 2px 或 0.1em（单位为 px，pt，cm，em 等）方法2：使用 3 个关键字之一，分别是 thick 、medium（默认值） 和 thin **注意：**CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。 border：同时设置元素的 4 个边框（上下左右）的颜色，尺寸（像素），格式。不区分先后顺序 单独设置各边
border-top：设置上边框border-right：设置右边框border-bottom：设置下边框border-left：设置左边框 border-radius：设置四个角（左上，右上，右下，左下）边框从多少像素开始圆滑 border-collapse：设置表格的边框是否被折叠成一个单一的边框或隔开。一般设置一个值全部应用 尺寸：设置元素的高度和宽度
width：设置元素的宽度，单位可以是像素（px）、百分比（%）或其他可用单位
像素（px）：固定值 注：
屏幕（显示器）实际上是由一个一个的小点点构成的不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰所以同样的 200px 在不同的设备下显示效果不一样 百分比（%）：相对于父元素的大小。这种方式可以实现响应式布局。 自适应长度：使用 auto 属性值来让元素自适应父元素的大小 比如将图片的 width 属性设置为 80%，然后 height 属性将其高度设置为 auto，让其自适应父元素的大小，这样可以保持图片的宽高比例，并且不会出现变形。 em：相对于元素的字体大小来计算 1em = 1font-size em 会根据字体大小的改变而改变 rem：相对于根元素 的字体大小来计算 height：设置元素的高度，单位可以是像素（px）、百分比（%）或其他可用单位
我是一个span
行内|行间 转换属性
display：可以把行间元素和行内元素相互转换，还可以隐藏元素
行间元素：占用 html 中的一行 例如：h1-h6，ul，ol，div … 行内元素：占用一行中的一部分 例如：span，img，a …
display 的属性值：
inline：设置元素为行内元素（行内元素默认 display 的属性值）block：设置元素为行间元素（行间元素默认 display 的属性值）none：设置隐藏元素（不在 html 页面中显示，也不会占用空间）
我是一个span,我只占用一行的一部分
我是一个span,我会占用一行
文本格式
color：设置字体颜色。属性值详见颜色属性 text-align：文本的对齐方式 属性值：
center：居中left：对齐到左right：对齐到右justify：两端对齐 text-indent：指定文本的第一行的缩进，单位为像素 px text-align：对齐元素中的文本 text-shadow：设置文本阴影 text-decoreation：设置或删除文本的装饰。主要是用来删除链接的下划线
none：取消文字的下划线 text-transform：文本转换。指定在一个文本中的字母变成大写或小写字母，或每个单词的首字母大写
uppercase：大写字母owercase：小写字母capitalize：单词首字母大写 line-height：设置行高 letter-spacing：设置字符间距 word-spacing：设置字间距 vertical-align：设置元素的垂直对齐 white-space：设置元素中空白的处理方式 unicode-bidi：设置或返回文本是否被重写 direction：设置文本方向
案例：
字体样式
font-family：设置文本的字体系列（幼圆，宋体，楷体） 注意：
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，则将尝试下一种字体 多个字体系列是用一个逗号分隔指明 如果字体系列的名称超过一个字，它必须用引号，如 Font Family：“宋体” font-size：设置字体大小 能否管理文字的大小，在网页设计中是非常重要的。但是，不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。务必使用正确的 HTML 标签，就
- 表示标题和
表示段落 如果不指定一个字体的大小，默认大小和普通文本段落一样，是 16 像素（16px=1em） 字体大小的值可以设置为绝对或相对的大小：
绝对大小：
设置一个指定大小的文本，单位为像素 px不允许用户在所有浏览器中改变文本大小确定了输出的物理尺寸时绝对大小很有用 相对大小：
相对于周围的元素来设置大小，单位为 em 1em的默认大小是16px 允许用户在浏览器中改变文字大小 使用百分比和 em 组合可以在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放文本的大小：
设置
元素的默认字体大小的是百分比 示例： body {font-size:100%;}h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
font-weight：设置字体加粗，取值：bold font-style：指定斜体文字的字体样式属性
normal：正常显示文本 italic：使用默认的斜体设置 注：并不是所有字体都有默认的斜体设置，一些不常用的字体，或许就只有个正常体，如果用 italic，则没有效果 oblique：强制使用斜体，让没有默认斜体属性的文字倾斜，且可以指定斜体的角度
案例：
背景色和背景图片
background-color：设置背景色。属性值详见颜色属性background-image：url（图片的地址）设置背景图片background-repeat：no-repeat（背景图片不平铺）background-position：top 0px right 0px（背景图片位置 右上角）
案例：
链接样式
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示。链接的样式，可以用任何 CSS 属性（如颜色，字体，背景等）。
四个链接状态：
a:link：正常，未访问过的链接a:visited：用户已访问过的链接a:hover：当用户鼠标放在链接上时a:active：链接被点击的那一刻
注意：当设置为若干链路状态的样式时，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面a:active 必须跟在 a:hover后面
案例：
filters：滤镜
filters 是 CSS3 里新增的一种功能，可以为元素指定各种滤镜效果，例如模糊效果、透明效果、色彩反差调整等等；同时，CSS 滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。 filter 的基础使用非常简单，CSS 标准里包含了一些已实现预定义效果的函数，可以通过指定这些函数的值来实现想要的效果 常用filter函数：
滤镜效果函数补充无none默认值，表示没有效果模糊blur(px)为图像设置高斯模糊，默认值为 0，单位为像素，值较大越模糊调整亮度brightness(number)number 越大图像越亮，number 不能取负值，可以是整数也可以是百分比调整灰度grayscale(%)将图像转换为灰度图像，默认值为 0%，表示原始图像；100％ 表示将图像完全变成灰度图像（即黑白图像），不允许为负值调整对比度contrast(%)默认值为 100％，代表原始图像；0％ 将使图像完全变黑；当值超过 100％ 时图像将获得更高的对比度阴影drop-shadow(h-shadow v-shadow blur spread color)为图像添加阴影效果，参数说明如下： h-shadow：必填值，指定水平方向阴影的像素值，若值为负，则阴影会出现在图像的左侧； v-shadow：必填值，指定垂直方向阴影的像素值，若值为负，则阴影会出现在图像的上方； blur：可选值，为阴影添加模糊效果，默认值为 0，单位为像素，值越大创建的模糊就越多（阴影会变得更大更亮），不允许使用负值； spread：可选值，默认值为 0，单位为像素。若值为正，则阴影将会扩展并增大；若值为负，则阴影会缩小； color：可选值，为阴影添加颜色，如未指定，则由浏览器来绝对，通常为黑色。注意：Chrome、Safari 和 Opera 等浏览器不支持第 4 个参数，如果添加，则不会有任何效果反转图像invert(%)默认值为 0%，表示原始图像；100% 则表示完全反转，不允许使用负值不透明度opacity(%)默认值为 100%，表示原始图像；0% 表示完全透明，不允许使用负值图像转为棕褐色sepia(%)默认值为 0%，表示原始图像；100% 表示图像完全变成棕褐色，不允许使用负值调整饱和度saturate(%)默认值为 100%，表示原始图像；0% 表示图像完全不饱和，不允许使用负值图像色相旋转hue-rotate(deg)该值用来定义色环的度数，默认值为 0 deg，代表原始图像，最大值为 360deg
CSS 的盒子模型
CSS 的盒子模型：可以把 html 中的任意元素，都可以看成是被一个盒子包裹起来
盒子的外边距：设置这个盒子到其他盒子之间的距离，或者设置盒子到 body 框的距离 使用 css 的属性（margin）设置外边距：
margin：同时设置4个外边距margin-top：设置上外边距margin-right：设置右外边距margin-bottom：设置下外边距margin-left：设置左外边距 盒子的内边距：设置盒子边框到盒子中内容的距离 使用 css 的属性（padding）设置内边距（填充）：
padding：同时设置4个内边距padding-top：设置上内边距padding-right：设置右内边距padding-bottom：设置下内边距padding-left：设置左内边距 总元素的宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距 总元素的高度 = 高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距
案例：
注册页面案例
页面原型
需求分析
案例实现
精彩链接
发表评论