CSS快速上手教程

一 选择符

1

通配:*{}

所有元素

类:p{}

如 p 标签等相应元素

ID:#id{}

使用相应 id 属性的元素样式

类:.类名{} 使用相应 class 属性的元素样式

包含:div p{} 被某些元素包含的子元素的样式

选择符分组: #content2 , .STYLE{} 一次定义几个选择符的样式

2

行内样式表:<p style=””>(CSS 里间隔是冒号、分号;HTML 里是等号、空格)

内部样式表:<style type=”text/css”> </style>

外部样式表:<link href=”skin.css” rel=”stylesheet” type=”text/css”>

二 CSS 字体属性

font: font-family font-size font-style font-weight font-variant(转换大小写)

三 CSS 文本属性

color text-decoration text-align vertical-align direction text-indent(文本缩进属性) line-height white-space(文本空白显示效果 nowrap 强制同行)

四 CSS 背景属性

background: background-color background-img(url()) background-repeat  background-attachment(滚动方式) background-position(背景图片位置属性,两个取值——前为水平方向、后为垂直方向;

注意:先定义一个相框,原点在相框,移动的是图片。

实例如下:

.pic{width:28px;height:28px;background:url(../images/icon.gif) no-repeat;}

.pic2{background-position:-40px 0px;}

.pic3{background-position:-80px 0px;}

.pic4{background-position:-120px 0px;}

-------样式与内容的分割线-----------

<li class="pic pic1"></li> (类名写前面,表示后面的类继承了前面类的属性,

省重写了)

<li class="txt"><a href="buy.htm" target="_parent">购物车</a></li>

<li class="pic pic2"></li>

<li class="txt"><a href="help.htm" target="_parent">帮助中心</a></li>

<li class="pic pic3"></li>

<li class="txt"><a href="JavaScript:void(0);" onclick="addFav();"> 加 入 收 藏

</a></li>

<li class="pic pic4"></li>

五 CSS 边框属性

border: border-style border-width border-color

六 CSS 边距属性

padding 内边距:内容与边框之间的宽度

margin 外边距:元素周围的边界宽度

七 CSS 链接属性

例:<a class=a1 href=””></a>

.a1:link{} (这是伪类)

未访问链接:link

已访问链接:visited

悬停链接:hover

激活链接:active

八 CSS 布局属性

定位属性 position

位置属性 top、right、bottom、left

层叠顺序属性 z-index 默认为 1,值越大越在顶

透明度属性 opacity 1 为饱和,值越小越透明

超出内容属性 overflow

显示属性 visibility

浮动属性 float(只有左、右;默认的文档流是向下排列,使用 float 可以让他们挨个往左上方排列;比如布局时前面两个是文档流排列,第三个写了 float,那么从第四个开始,才是横向排列的,所以 float 是给它后面的元素看的)

清除浮动属性 clear(不想继续往左上排了,就 clear 左)

九 DIV+CSS 布局

宗旨:内容与样式分离

优点:灵活

核心:用 DIV 时,把所有元素都当成一个方块,给它精确的宽高,再 float 它!

十 课堂笔记

1 css 通配符 "*" 可以消除浏览器的默认属性,比如:

*{margin:0;padding:0;}

推荐这样 html,body,div,span,applet,object,iframe,h1,h2,p,a{margin:0;padding:0;}

而不是 *{margin:0;padding:0;}

因为 css 通配符 “*”会将网站内所有元素的默认值重设,这在大型网站会加重客户端的负担,浏览器运行速度变慢。但如果开发的是小型站点或企业网站,页面元素不是很多,使用 CSS 通配符造成的性能影响可以忽略。

2 display :inline块拥有行属性;block行拥有块属性。

3

弹幕般滚动<marquee behavior=””direction=””scrollamout=”数值越大滚得越快”onmouseover=””onmouseout=””>  此为块级元素,用时要加宽高。

4

盒子属性:margin padding border

CSS难点总结

n 盒子模型

ü margin(外边距)

ü padding(内边距)

n 居中

ü 块级元素的位置居中:Margin作为盒子间的距离,在布局中,扮演着较为重要的角色。典型的应用为布局块级元素的水平居中,如:“margin:0 auto;”

ü 文字内容的水平居中:文字内容水平居中:例如段落<p>内的文字对齐等设置,则设置块级元素的 “text-align:center”,实现文字水平居中;

ü 垂直居中:常见的是单行文字垂直居中问题,可以设置文字所在的行的高度 height 与文字行高属性 line-height 一致,使用“vertical-align:middle;”实现垂直居中。

n 布局属性

ü position(定位)

Ø static

默认属性,按照常规文档流(从上到下,从左到右)进行定位,不能使用 top、left 等类似其他属性定位,如需要使用以上属性,必须使用除了static以外的三种定位方式。

Ø absolute(绝对定位)

指定某元素是相对于它包含的元素进行定位,绝对定位的元素是独立定位的,脱离了静态定位元素中文档流的一部分,它的定位要么是相对最近的定位祖先元素,要么是相对于文档本身。

Ø fixed(固定定位)

相对于浏览器窗口进行定位

Ø relative(相对定位)

当 position 属性设置为 relative,元素按照常规文档流进行布局,它的定位相对于它文档流中的位置进行调整。系统保留着元素在常规文档流中的空间,不会因为要填充空间而将其各边合拢,也不会将元素从新的位置“推开”。

Ø z-index

设置元素的堆叠顺序,拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素前面,z-index可以拥有负数值,且仅能在定位元素上奏效(例如 position:absolute;)

Ø display

规定元素应该生成的框的类型,常用属性值有 none,block,inline等

Ø none

此元素不被显示;

Ø block

让元素按块级元素显示,前后带换行符,自己占一行,可以用在行级元素上使其拥有块级元素的特点;

Ø inline

让元素按照行级元素(内联元素)显示,一个挨一个,可以用在块级元素上,使其拥有行级元素的特点;

Ø  overflow

规定当内容溢出元素框时发生的事情;

默认值:visible(内容不会被修剪,如果超出会呈现在元素框之外),还有 hidden(内容会被修剪,并且其余内容是不可见的),scroll(超出内容会被修剪,但是可以通过滚动条来查看超出的部分)

Ø  visibility

设置元素是否可见,visible为可见;hidden为不可见,不同于“display:none;”的是“visibility:hidden;”的元素虽然不可见但是也会占据页面上的空间,前者则不会。(通俗讲,用 display会被挤。所以 display用于多级菜单显示隐藏)

Ø opacity(透明度)

CSS3的属性,可以代替了之前 CSS中的滤镜属性,可以使用 value直接表示元素的透明度,0.0为完全透明到 1.0为完全不透明,例如:opacity:0.5;

CSS快速上手教程

上一篇:Vscode---->setting.json配置使用


下一篇:CSS 选择器