请问怎样转换CSS样式

html-css023

请问怎样转换CSS样式,第1张

楼主说的应该是更换网页皮肤吧。关键代码在这里：

<link

href="style_change/black/sty_black.css"

rel="stylesheet"

type="text/css"

id="ch_css"

/>

点击某个按钮的时候，用JS获取<link>标签的id，即获取这个<link>对象，然后通过JS更换href链接到另一个CSS样式表，达到换肤的目的。

什么是样式表：

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

如何将样式表加入您的网页：

你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

链入外部样式表文件 (Linking to a Style Sheet)

你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：

<head>

<title>文档标题</title>

<link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css">

</head>

而在XML中，你应该如下例所示在声明区中加入：

<? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>

定义内部样式块对象 (Embedding a Style Block)

你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。示例如下：

<html>

<head>

<title>文档标题</title>

<style type="text/css">

<!--

body {font: 10pt "Arial"}

h1 {font: 15pt/17pt "Arial"font-weight: boldcolor: maroon}

h2 {font: 13pt/15pt "Arial"font-weight: boldcolor: blue}

p {font: 10pt/12pt "Arial"color: black}

-->

</style>

</head>

<body>

请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。

内联定义 (Inline Styles)

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：

<p style="margin-left: 0.5inmargin-right:0.5in">这一行被增加了左右的外补丁<p>

>>CSS基本语法

css是个神奇的东西，在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一，设计精巧，计算精密，令世人赞叹。那么如何用CSS画一个金字塔呢？

人丑话不多，先看一下效果

金字塔是由5个面组成的，即4个侧面和1个底面。我们可以把它看作是一个童年时期玩过的元宝，或者端午节戴在身上的福字。为什么这么说呢？

“横看成岭侧成峰”，我们看金字塔的俯视图是不是会看到这样一个图形，如下图所示

这是一个平面图形，如果让这个平面图形具有立体的效果不就是一个金字塔了么。即将上图的(0,0)沿着x轴旋转一定角度即可实现。

接下来就是绘制“元宝”的形状,侧面是4个三角形，底面是一个正方形。实现三角形可以采用 clip-path 的属性对可视区域进行裁剪。

由上图可知： clip-path 的只能兼容 高版本浏览器 。polygon代表多边形，所以利用该属性可以绘制多如下图形：

有了上述的图形之后，我们需要进行特殊的处理，才能得到我们想要的形状。因为我们要搭建金字塔，所有我们塔边的高度或者宽度需要大于底部的宽度和长度，不然的话无法搭成塔尖而形成如下图形：

故需设置大于底部宽和高,我们这里选取为高度为200px，宽度为100px，宽度需要和底部宽度保持一致。

假设我们现在已经有一个金字塔，我们可以取它的一个横截面如下图：

通过sin函数

解上面反三角函数求得A大约为75deg，以此类推我们可以算出其他图形旋转角度。

将上述的两种三角形通过适当的平移和旋转，得到如下图形：

合并之后得到如下图形

通过使用css3中的3D转化属性，将上图进行转化即可：

由上图可知：transform-style:preserve-3d兼容是支持高版本浏览器，支持部分ie浏览器

以上就是本文的全部内容，全部都是由css实现包括：