css定制化样式怎么做,css样式如何创建

学会怎样给html标签定义css样式

H5edu教育html5开发为您解答：

在HTML中常用以下3种方式定义CSS：Embedding（嵌入式）、Linking（引用式）、Inline（内联式）

一、嵌入式：使用HTML的style元素，在文档中定义CSS样式

head

style type="text/css"

h1{color:red}

p{color:blue}

/style

head

二、内联式 ：每一个HTML元素都包含一个style属性，可以直接定义样式。该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。

p style="color:#FFF;font-weight:bold;"内联样式/p

三、外部引用式：外部引用指HTML文档本身不含有CSS样式，而是动态引用外部的CSS文件定义文档的表现形式。

1、使用样式表的处理指令语句-在HTML文档的开头部分写一个关于样式表的指令处理语句

?xml-stylesheet type="text/css" href="mystyle.css" ?

html

指令语句

/html

不过只有使用xml语法格式编写的html文档才支持使用该指令，大多数浏览器仅当被保存为xhtml或xml格式才有效，且JS不能处理这种CSS，所以不建议使用。

2、使用@import命令 -在style元素之间使用@import命令导入外部的css文件

head

style type="text/css"

!--下面两行代码效果一样

@import "mystyle.css";

@import url("mystyle.css");

--

/style

/head

任何@import规则必须出现在所有规则之前。参数是一个css文件的URL地址。在一个css文件中也可以用@import指令将另一个css文件导入。

3、使用link元素

head

link rel="stylesheet" href="css的url" type="text/css"

/head

这也是最常用的方式。

4、使用HTTP消息报头链接到样式表 -可以使用HTTP消息报头的link字段链接一个外部样式表。 link:mystyle.css;rel=stylesheet;

//等同于link rel="stylesheet" href="css的url" type="text/css"

HTTP报头中可以使用多个link，从而链接多个样式表，且HTTP报头中的link比HTML文档中的link（head元素中）具有优先级。

相关问答

Q1: 在Element表格中插入步骤条，并实现样式定制化

最近项目的原型设计中有这样一个需求，在表格中插入一个步骤条，先贴一张完成的图片，效果如下：

    开始做的时候，查看了一下element官方文档（传送门： Element官方文档 ），官方文档中只有一些比较基本的样式，例如：描述的步骤条、带图标的步骤条等，这里就不一一赘述了。

    首先，在表格中加入插槽，插入步骤条组件

使用表格的cellStyle属性，设置步骤条一列对齐方式为左

    在步骤条组件上绑定class，根据当前列中步骤条进度分别给“已完成”、“进行中”、“未开始”三种状态的步骤条赋上对应的类样式，js方法如下：

css样式如下， 切记修改element组件原样式的时候需要建立一个style标签，去掉scoped，并在element组件外层用一个父元素包含起来，缺前者设置会不生效，缺后者会影响全局样式。

这里我是将步骤条原样式中的数字颜色改成透明，分别设置三种状态的圆圈大小及背景色，然后用.el-step__icon类设置定位，用 .el-step.is-horizontal .el-step__line设置步骤条横线的粗细及位置，根据具体表格的对应列宽高来设置就好啦。

Q2: 怎样做好CSS样式的管理呢

学习WEB标准的朋友一般都是从学习CSS开始，为什么呢？因为CSS是一种很有意思的语言，它能让我们的网页千变万化。也许我们一开始的接触只是因为链接的样式修改，然后慢慢发现CSS的强大而又简单，于是我们用它来控制整个网页的布局、排版、色彩、图片等等工作。学习了CSS之后我们又会发现XHTML的结构更为重要，一个好的XHTML结构可以让CSS少费很多事。同时也会避免网页在不同浏览器之间的差异。于是又开始学习了XHTML代码，并且不断的去摸索着XHTML的结构的特点。会写CSS了，也懂得XHTML结构的重要性并能灵活应用的时候，是不是就可以了呢。也许这时我们就会发现其实样式的管理同样非常的重要。

大家也许都已经有了自己的管理方式，因为所要应用的网页类型的不同可能管理的思路也不一样，这里我只是把我的样式管理做一个整理。算是给大家提供一个可以参考与研究的范例，给对于没有形成自己的管理方式的朋友们提供一个参照范本。

我的样式管理是针对于单一项目、单一的风格体系的网站，一般这样的网站都是中小型的网站，风格是上一致的。对于大型网站，或是风格差异很大的'网站体系是不适用的。我们在做样式之前首先要想到样式的易维护性。一旦需要修改就必需要快速方便，修改工作的成本是很高的，所以我们要尽量避免这样的工作所占用时间的扩大。那我们就有必要把样式与结构代码分开。下面看一下我的目录分配方法：

其中，[images] 是存放xHTML中出现的图片，[jonStyle]我统称之为主题包，在样式包中包括了[CSS]、、[js]分别存放CSS样式表、样式表中所引用的图片、网页中所用的JS。这里存放图片的与外面的[images]虽然都是存放图片的，但是这里的图片的性质却是不一样的。是CSS中所引用的图片，所有的图片的显示与否都与CSS样式有关，他的归属性是，里的图片是归属于CSS的，而不是XHTML的。而CSS是不会引用[images]中的图片。[images]中的图片只归属于xHTML，xHTML也不要直接使用中的图片。

这里把[js]也放在了[jonStyle]文件夹中也许会有人觉得不妥，我的考虑是这样的：行为与样式本都是使得这个XHTML的结构能多姿多彩。当我们需要更换皮肤的时候，也有可通这个行为也是需要更换的。比如：在第一套方案中，某个区块的内容是要上下滚动的，然而在第二套方案中，这个区块就需要左右滚动。那么这个行为也需要与样工一起更换。当然实际应用的时候不一定是这么简单理由。

基本上大的结构是这这样的。那么样式表的结构又是怎么样的呢？我是这样来划分的：样式包中有一个base.css（基本共用样式）module.css（模块样式）forms.css （表单样式）mend.css（补丁样式）print.css（打印样式）

其中base.css是一个基本的样式，也就是所有网页的共性样式，这个样式与module.css配合基本上可以显示正常的页面。表单的划分，也可以有利于对不同地方的表单的样式管理。WEB标准涉及兼容性，所以需要有样式补丁当然还有针对性的这里就不一一列举。最后一个的打印样式，是提供给打印设置使用的。

我通过这样的划分，在对于维护与网站的样工更新上，就显得非常的容易，基本上可以在不需要程序人员的参与下就可以完成对网站的皮肤的更换。如果一个网站同时具备很多个主题包，那么只要简单的在XHTML中更换主题包的名称就可以使用不同的样式。这与网站的程序相配合将可以做出非常好的，具有很强扩展性的应用网站来！

Q3: 如何给指定的a标签定义css样式。

给a标签加一个class,然后直接给样式名加伪类就行

比如a href="#" class="A_css"1/a

.A_css:hover{样式}

Q4: 怎么给按钮添加CSS样式?

给按钮添加css样式的方法：

添加方法：

1、.btn {BORDER-RIGHT: #7b9ebd 1px solid; 右边线

2、PADDING-RIGHT: 2px; 内边距 右

3、BORDER-TOP: #7b9ebd 1px solid; 上边线

4、PADDING-LEFT: 2px; 内边距 左

5、FONT-SIZE: 12px; 文字大小

6、BORDER-LEFT: #7b9ebd 1px solid; 左边线

7、CURSOR: hand; 鼠标移上去时，变成手形。

8、COLOR: black; 颜色黑 （表示文字颜色）

9、PADDING-TOP: 2px; 内边距 上

10、BORDER-BOTTOM: #7b9ebd 1px solid }底边线

扩展资料

CSS样式部分

大小 {font-size: 12px}，x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位：PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体： (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性： (background)

色彩 {background-color: #FFFFFF;}

图片 {background-image: url();}

重复 {background-repeat: no-repeat;}

滚动 {background-attachment: fixed;}(固定) scroll;(滚动)

位置 {background-position: left;}(水平) top(垂直);

字间距 {letter-spacing: normal;} 数值 /*这个属性有用，多实践下*/

对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)