CSS基础

最新推荐文章于 2025-06-12 09:57:25 发布

iteye_18051

最新推荐文章于 2025-06-12 09:57:25 发布

阅读量62

点赞数

文章标签： xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.highlight{font-size:xx-large;cursor:help;}

.warning{background:Yellow;}

input.accountno{text-align:right;color:Red;}

label.accountno{font-style:italic;}

#username

{

font-size:xx-large;

}

P strong{ background-color:Yellow}

H1,H2,input{background-color:Green}

A:visited {background-color:Gray}

A:active {background-color:Red}

A:link {background-color:Green}

A:hover {background-color:Red}

</style>

</head>

<!-- css

px 计量单位：中表示宽度、距离时有多种计量单位：（像素）、

30%（百分比）、em（相对单位）等。width:20px。

background-color:Red;背景颜色；color：文本颜色

border-style:solid;dotted( ) 边框风格，实线（默认是没有），还有点等值

；border-color：边框颜色；border-width：边框宽度(默认是0)。

display：元素是否显示，可选值none（不显示）、block （显示为块级

元素，此元素前后会带有换行符。）、inline（显示为内联元素，元素前

后没有换行符）等。

cursor，鼠标在元素上时显示的光标图标，可选值：cursor（默认光标

）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、

help（帮助）等。还可以通过cursor:url(dinosau2.ani)使用ani、cur

格式的自定义光标图片。

LI LIST-STYLE-TYPE: none;不显示圆点：

-->

<ul>

</ul>

<!--

样式选择器:

对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合于哪些元素，

三种：标签选择器、class选择器和id选择器。

标签选择器 input{border-color:Yellow;color:Red;}，对于指定的标签采

用统一的样式

class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的

class属性为样式的名称，还可以同时设定多个class，名称之间加空格

• 样式名称开头加“.”

• .warning{background:Yellow;}

• .highlight{font-size:xx-large;cursor:help;}

-->

<table>

<tr>

</tr>

</table>

<!--

标签+class选择器 :

class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

-->

<br />

<br />

<!--

id选择器 :

为指定id的元素设定样式，id前加#

style、class可以同时组合使用

-->

<br />

<!--

更多选择器(*)

关联选择器：

• 表示P标签内的strong标签内的内容使用的样式

组合选择器，同时为多个标签设定一个样式

-->

<!--

伪选择器：为标签的不同状态设定不同的样式：

A:visited：超链接点击过的样式；

A:active：选中超链接时的样式；

A:link：超链接未被访问时的状态；

A:hover：鼠标移到超链接时的状态。

说明：TEXT-DECORATION: none表示超链接不显示下划线。

-->

<br />

<a href="">这里是超链接的伪选择器（有下划线）</a>

<br />

<a href="" style="text-decoration:none">这里是超链接的伪选择器（无下划线）</a>

</body>

</html>

<!--

Div+CSS布局

网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上。

不要使用<table>进行布局，因为：

table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；

用table布局会将布局方式写在html中，违反了“语义性”原则；

用table会影响搜索引擎的抓取，不利于SEO。

因此Table用来表达真是表格状数据的东西，

布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。

Div+CSS

就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。

布局最重要的一个属性就是 float ，查看此文档的描述。

初学不用研究太深，能读懂、会用就可以，备注有很多案例。

-->