跟随我在oracle学习php（6）

CSS，主要用于控制Web页面的外观。通过使用CSS样式设置页面的风格，可将页面的内容

与表现形式分离。css 层叠样式表美化页面配合html布局。

在当前可以浏览的网站当中，都存在着CSS样式代码，可以通过谷歌等浏览器的控制

台，去除网页中的CSS代码，来查看没有CSS时代网页的显示效果。在没有css的时候网页是十分简陋的。

在哪写？

l、内嵌（行内）（不推荐优先级最高）

写在标签里面，以属性的形式表现，属性名

2、内联（少量样式可以在里面写）

style

写在head标签里面以标签的形式表现标签名style

3、外部引用．Css <link rel="stylesheet" type="text/css" href="mystyle.css">

写在head标签里面以标签的形式表现标签名link

推荐使用外部引用，控制性强，便于维护

样式格式：

样式名：样式值：样式名：样式值

通过引入方式，在HTML页面中放入了CSS样式，接下来要做的操作就是让相应的

标签应用定义好的CSS样式，这里会涉及“选择器”的基本知识。

选择器格式：

选择器{样式名：样式值｝

选择器：用来找标签（条件）把指定的样式应用在找到的标签上

通用选择器： *所有标签（很危险）

标签选择器：根据标签名来找

id选择器：根据id值来找 #id值

id属性在当前文件里是唯一的

class选择器根据class值来找．class值，class可以有多个，由空格分开

其他：

并列两个选择器用—个样式用逗号分隔

选择器1 ，选择器2{样式）

子类在选中的标签中找空格

属性选择器： [属性名=’属性值']

优先级

就近原则（相同样式相同选择器）

权值（越大优先级越高）

行内 1000

Id 100

Class 10

标签 1

通用* 0

html中图片路径：从html文件开始找

css中图片路径：从css文件开始找

js中图片路径：从引入该js文件的html文件开始找

CSS中长度与颜色

长度单位说明

in 英寸

cm 公分

mm 公里

cm 以目前字体高度为单位

ex 以小写字母高度为单位（大部分不支持）

pt 1pt/72英寸

pc 1pc/12pt

px 像素（推荐使用）

颜色单位：说明

十六进制如：color:#ff0000

颜色名称如：color:red

三原色单位如：rgba(255,0,0,1)

一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。。每个值域在0－255之间

CSS中的文字属性

属性名称属性值说明

font-style normal 正常显示

italic 斜体

font-variant normal 正常显示

small-caps 将英文大小写字母写调为同宽

font-weight normal 正常显示

bold 粗体

font-size 像素字体大小

百分比字体大小

12px

14px

16px

font-family 字体名称设置字体名称

微软雅黑

font属性简化的使用方法：

font:是否斜体是否同宽是否粗体大小字体名称

例如:font:italic bold 200 隶书；

CSS中的文本属性

属性名称属性值说明

color 十六进制颜色

英文名称颜色

三原色单位颜色

letter-spacing normal 正常显示

长度文本间隔

word-spacing normal 正常显示

数字单词间距

white-space normal 文本自动处理换行

pre 换行和空白受保护

nowrap 强制在同一行显示

text-align left 文字靠左

right 文字靠右

center 文字靠中

text-decoration none 正常显示

underline 加上下划线

overline 加顶线

line-through 加删除线

text-indent 长度首行缩进

百分比同上

line-height 像素行高

数字/百分比行高

text-transform none 正常显示可以包含大，小字符

capitalize 字符串第一个字符大写

uppercase 设置大写字符

lowercase 设置小写字符

vertical-align sub 设置文字为下标。

super 设置文字为上标。

top 元件往上端靠齐。

middle 设置文字是在中线位置。

bottom 元件往下端靠齐。

CSS中背景的使用

属性名称属性值说明

background-attachment scroll 设置背景图像会随视窗滚动

条的移动而移动。

fixed 设置背景图像不会随视窗滚动条

的移动而移动。

background-color 十六进制

英文名称 background-color:red;

三原色 background-color:rgb(255,0,0)

transparent background-color:transparent;透明

background-image URL background-image:url("bg.jpg")

背景图片

none 不设置背景图片

background-position top left 设置背景图案出现在上左方。

top center 设置背景图案出现在上方中间。

top right 设置背景图案出现在上右方。

center left 设置背景图案出现在中间左方。

center center 设置背景图案出现在IE中间。

center right 设置背景图案出现中间右方。

bottom left 设置背景图案出现在下左方。

bottom 设置背景图案出现在正下方。

bottom right 设置背景图案出现在下右方。

background-size: cover; 背景填充

background-repeat repeat 将背景图案填满整个背景。

repeat-x 将背景图案在水平方向添满。

repeat-y 将背景图案在垂直方向添满。

no-repeat 图案只出现一次。

背景图案简化方案：

background:颜色背景图片 repeat attachment position

CSS中列表的使用

属性名称属性值说明

list-style-type none 无符号

disc 实体的小圆点。

circle 空心的小圆点。

square 实心的小方块。

decimal 1,2,3...

lower-roman i,ii,iii...

upper-roman I,II,III...

lower-alpha a,b,c,d,e...

upper-alpha A,B,C,D,E...

list-style-position inside 清单项目较往右移。

outside 清单项目正常显示。

list-style-image URL list-style-image:url(lmk.gif)

none 不会显示任何图象

清单的简化设置：

list-style:circle inside url("bullet.gif")

CSS中边框的使用

属性名称属性值说明
border-color 十六进制可依序设置上，右，下，左线颜色

英文名称 border-color:red(四边均为红色)

三原色 border-color:red green

(上下为红色，左右为绿色)

border-color:red green blue

(上为红色、左右为绿色、下为蓝色)

border-color:red green blue yellow

(上右下左分别为红绿蓝黄)

border-style none 不显示边线

dotted 点线

dashed 虚线

solid 实线

double 双线

border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;

border-width:1 2 3 4;

简化方案：border:形态长度颜色

例如 border:1px solid black;