css样式强制执行,css样式强制生效

html中使用css定义样式的方式有哪些？哪种方式优先级最高？

在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: html中使用css的方法有哪几种

1.内联方式（行内样式）

就是在HTML的标签中使用style属性来设置css样式

格式：html标签 style="属性:值;属性:值;...."被修饰的内容/html标签

p style="color:orange;font-size:18px"在HTML中如何使用css样式/p

1

特点：仅作用于本标签。

2. 内部方式（内嵌样式）

就是在head标签中使用标签来设置css样式

格式： style type="text/css" ....css样式代码 /style

特点：作用于当前整个页面

3. 外部导入方式（外部链入）

3.1 （推荐）就是在head标签中使用标签导入一个css文件，在作用于本页面，实现css样式设置

格式：link href="文件名.css" type="text/css" rel="stylesheet"/

3.2 还可以使用import在style标签中导入css文件。

如：style type="text/css" @import "style.css"; /style

特点：作用于整个网站

他们的优先级：当样式冲突时，就是采用就近原则，是值css属性离被修饰的内容最近的为主。

若没有样式冲突则采用叠加效果。

Q2: css的基本语法结构及规范

一、CSS简介

CSS(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言，之前提到的W3C规范中的“样式”。

作用：

1、美化界面。

2、页面布局。

基本语法：

选择器{

样式规则

}

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

。。。

选择器:是用来选择标签的，选出来以后给标签加样式。

从Hello World说起，

p style="background-color:#FFF;color:#000;font-size:30px;"Hello World!/p

这样写可以实现将原本的白底黑字Hello World! 改成样式为 黑底白字的效果。但是这样写有一定的缺点：

缺点1：内容、样式、行为三者未分离，代码糅杂，不符合W3C规范，难以维护。

缺点2：代码冗余，不可复用。

二、如何引入CSS？

1）行内样式

即上述的一般形式，由于其存在的缺点，介绍下一种样式。

2）内嵌样式，给p标签加样式，加在head标签中

style type="text/css"

p{

background-color:#FFF;

color:#000;

font-size:30px;

}

/style

当本页面的p标签都需要相同的样式时，这样写大大降低了代码量，并让其他编程人员一眼分辨出来CSS样式。

3）链接样式（链入式）

在head标签中加入

link href="../css/my.css" type="text/css" rel="stylesheet"/

将CSS文件和html文件分开来放，这样增加了代码的重用性，但是每个浏览器都要单独读取css文件中的样式，比较慢，如果追求速度，内嵌样式会更好。

4）导入样式

style type="text/css"

@import url("路径名");

/style

四种样式的优先级：

如果一个页面中四种样式同时存在，这四种都会对标签起作用，但是重复样式的属性值，只有最后一个有效。如果内嵌样式和导入样式放在一起，则内嵌样式起作用。

如果内嵌样式和导入样式分成两个style定义，则在CSS样式中的最后一个style起作用。

附：css中注释的格式，没有单行注释，所有的注释均是/*注释内容*/

Q3: css中怎么为字符串中的每一行设置样式

这里分享下在css中为字符串中的每一行设置样式的方法。

操作设备：联想电脑

操作系统：win10

代码编辑器：zend studio 10.0

1、首先新建一个html文件，命名为test.html，在test.html文件内，使用p标签创建一行字符，用于测试。

2、在test.html文件内，给p标签添加一个class属性，用于样式的设置。

3、在test.html文件内，编写style type="text/css"/style标签，页面的css样式将写在该标签内。

4、在css标签内，通过class属性和“:first-letter”选择第一个字符，使用color属性设置它为红色。

5、最后在浏览器打开test.html文件，查看实现的效果。

Q4: 网页制作中表格中插入图片如何设置图片大小

表格放图片那一格定义宽度高度即可。

还可以用css等方法。

在我们设计网页的时候，总会遇到一些不愉快的事情，最常见的莫过于在后台添加内容后才发现显示的页面被撑开，导致网页极度不美观。以前大家基本上都是设计表格，网上自然不少对于的解决方法，如今还有div+css标准设计，很少看到相关好的方法，现在把平时找到的防止表格被撑开的好方法总结归纳一下，和大家一起分享。

一、直接在网页里设置图片大小，比如代码：img src="/jc/UploadFiles/200801/20080102225018264.jpg" width="600" height="500" border="0"，这样虽然可以限制了图片大小，但是需要在上传图片之前手动修改图片大小，否则上传的图片就会变形。

二、使用如下代码：img src="/jc/UploadFiles/200801/20080102225018264.jpg" onload="javascript:if(this.width600}{this.resized=true;this.style.width=600;}"

这种方法会在调用图片的时候，自动按比例缩小到指定的宽度，不会引起图片的变形，并且也不会撑破表格，但是缺点是，如果图片太大，在图片下载过程中，也就是图片显示过程中，会先以图片原大小显示，这时就会撑破表格，页面很难看，二当图片完全显示后，图片又会自动缩小。

三、我们可以针对表格的属性来限制大小防止被撑开，比如在table width="600" border="0" cellpadding="0" cellspacing="0"里添加代码“style="table-layout:fixed;word-wrap:break-word; word-break;break-all;"”，其中“table-layout:fixed; ”是为了将表格布局固定住，就可以有效地防止表格被撑开，“word-wrap:break-word; ”是控制换行的，也就是强制执行换行，这个在文本内容较多的情况下需要使用到，特别是重复的内容出现，不执行换行的话，表格就被撑开了；而“word- break: break-all; ”可以解决IE的框架被英文（非亚洲语言文本行）撑开的问题，但是不会强制换行，只显示表格宽度里的内容。一般情况下只要用到“style="table -layout:fixed;word-wrap:break-word;"”就可以。当然，上面调用的语句可以定义在css里，比如

table {

table-layout: fixed;

word-wrap:break-word;

}

四、用css控制图片自适应大小，代码如：

img {

max-width: 600px;

width:expression(this.width 600 ? "600px" : this.width);

overflow:hidden;

}

其中 max-width:600px; 在IE7、FireFox等其他非IE浏览器下最大宽度为600px，但在IE6中无效；width:600px; 在所有浏览器中图片的大小为600px，当图片大小大于600px，自动缩小为600px，在IE6中有效；而 overflow:hidden; 指将超出设置大小的部分隐藏，避免控制图片大小失败而引起的表格撑开变形。

五、最后总结一下最实用的代码：

如果是表格，请用：

table {

table-layout: fixed;

word-break: break-all;

}

如果是div层，请用：

div {

table-layout: fixed;

word-wrap: break-word;

width: 加上宽度;

overflow: hidden; (让多出来的不显示。)

}

Q5: 怎么强制使用css表style覆盖html的style

你只能试试 !important 了. 因为内联样式优先级高于外部引用样式. 而脚本修改样式的语句又高于以上两种.所以,如果脚本里用到了object.style.xxxx='xxx';的话,那你只能再用脚本修改,如果脚本是用document.write输出的话, !important 应该可以优先于内联样式.

.jqplot-table-legend {

xxxx: xxxx!important;

}

先这样试试看,如果不行就用脚本.