HTML基础入门之样式表（二）

来源：互联网发布：淘宝大学石家庄编辑：程序博客网时间：2024/06/06 07:13

l 概念和基本认识

l 样式选择器

l 伪选择器

l 样式属性

l 布局

1.概念和基本认识：

CSS（层叠样式表）是用来美化网页的。可以对页面元素进行更精致的设置，样式主要描述元素的字体，背景颜色，边框等。

三种使用方式：元素内联，页面嵌入，外部引用

元素内联：直接将样式写入元素标签中，一般适用于样式没有复用的场合。

例如：<inputtype="button"value="网编"style=" border-width:thick;width:500px;height:100px;"/>

页面嵌入：当页面上某一类元素标签都是一种风格时使用。

例如：

<head>

<styletype="text/css">

input{border-width:thick;width:500px;height:100px;}

div{font-size:x-large;color:Red;}

</style>

</head>

外部引用：将固定的样式风格写入一个CSS文件中，需要的时候直接引用，这样复用的范围更广，适用于多个页面复用。（新建web-样式表，使用时在网页头部添加引用）

例如：

<head>

<linktype="text/css"rel="Stylesheet"href=styletest1.css/>

</head>

一般情况下只需要改变href中的引用即可。

2.CSS中的计量单位： px(像素) 、30%（百分比）、em(相对单位）

3.常见样式：

设置边框：border-color/border-style/border-width/

设置可见：display（值为none时元素不显示）

设置鼠标指针显示：cursor(常设值有：pointer（手掌）、wait(沙漏))，可以添加url(cur或ani格式的图标自设指针形状)

设置链接：url(链接地址)例如：<inputtype="button"style="background-image:url('Sample%20Pictures/1.gif');height:182px;width:328px;cursor:url('Sample%20Pictures/1.gif')"/>

4.样式选择器

针对页面嵌入和外部引用，因为其使用范围扩大，所以引申出样式选择器的概念，样式选择器有三种。

1）标签选择器，根据不用的元素标签使用。

input{border-width:thick;width:500px;height:100px;}

div{font-size:x-large;color:Red;}

2）class选择器，命名一个样式，然后在需要使用的元素标签中设该名称为class属性的值表示引用该种样式。可以设多种class，用空格隔开（<inputtype="button"class="ban love"value="我的快乐"/>），样式名称前加‘.’。

<head>

<styletype="text/css">

.love{background-color:Red;width:100px;height:200px;}

.ban{border-color:Yellow;border-width:thick;}

</style>

</head>

使用：<inputtype="button"class="love"/>

拓展：标签+class选择器

样式名相同，但是对不同的标签有不同的设定。

input.love{background-color:Red;width:100px;height:200px;font-size:xx-large;}

label.love{font-size:xx-large;}

使用：

<inputtype="button"class="love"value="我的快乐"/>

<labelclass="love">ssssssssssssss</label>

3）id选择器，跟class选择器类似，样式名称前加‘#’。使用时引用id属性。只是他不能同时使用多种样式。

例如：

#love{background-color:Red;width:100px;height:200px;font-size:xx-large;}

<inputtype="button"id="love" value="我的快乐"/>

<labelid="love">ssssssssssssss</label>

同样可以使用标签+id选择器：

input#love{background-color:Red;width:100px;height:200px;font-size:xx-large;}

label#love{font-size:xx-large;}

使用：

<inputtype="button"id="love" value="我的快乐"/>

<labelid="love">ssssssssssssss</label>

5.其他选择器

1）关联选择器：描述关联标签中的样式。

pstrong{background-color:Blue;}

只有在 <p><strong>sdddgdg</strong></p>中的文本才会有此样式。

2）组合选择器：几种标签都是一种样式。

h1,h6,input{background-color:Red;}

6.伪选择器（经常用，但是格式很固定（超链接常用））

A:visited{text-decoration:none;}

A:active{text-decoration:none;}

A:link{text-decoration:none;}

A:hover{text-decoration:underline;}

上面为常用的样式，当鼠标停留时显示下划线，否则不显示。

2013-12-22日补充：

1.meta 标签一般表示编码格式和关键字与描述（写在head标签中）

2.<pre></pre> 预格式化标签（保留标签内格式）

3.https 多用于登录时使用的协议

Javascript js伪协议（弹窗）

Mailto mailto:邮箱？Subject=主&body=邮件内容

4.每个html页的开头要写上文档类型定义：<!doctype html>

<!DOCTYPE HTML PUBLIC “version name” “url”>

5.<frameset cols/rows=”分页比例”><frame src=”url”>每个分页</frame></frameset> 实现浏览器分页

6.<iframe src=”url”>实现页中页的效果<iframe>

7.<base/>标签，只能出现在html文件开头部分（<head>中）,可用于设定本文件中的超链接的基准地址和target属性（适用于本文件中的所有链接(包括a标签，图片链接)）。

8.设置段落的首字母下沉不用div的情况下可用伪样式选择器：p:first-letter{

Font-size:300%;float:left;}

9.类表前边的项目符号可以设置为图片：list-style-image:url(‘地址’);符号设置：list-style-type:none(无)

10.CSS样式属性：（此部分列出常用的，需要记住）

1.-文本字体样式

颜色，color

字体,font-family

大小,font-size

权重,font-weight (bold,bolder)

修饰,text-decoration (overline(上划线)，line-through(中划线)，underline(下划线)

基线,lineheight (文本放入框中)

对齐，text-align（水平），vertical-align(垂直对齐)

大小写转换,text-transform

字体间距：word/letter-spacing

2.背景样式：

背景色，Background-color

背景图片，background-image

背景图片排列方式，background-repeat

背景图片位置：background-position

11.布局

Visibility:设置元素的可见状态，inherit(继承父层的显示属性)；visible（显示），hidden（隐藏）

Display:inline(将div转换span),block(将span转换成div),none

Float:left,right 浮动（不会覆盖div内容）

Clear: left,right,both v 清楚浮动

Overflow:visiable,hidden,scroll,auto 设置元素内容超过设置大小后的显示

盒子相关：

Padding（内间距）|margin（外间距）(top,right,bottom,left)

border(top,right,bottom,left,color,width,style（设置边框类型（solid，double等））) 简写： border: 1px,solid,red;