甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
在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元素中）具有优先级。
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属性离被修饰的内容最近的为主。
若没有样式冲突则采用叠加效果。
一、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中注释的格式，没有单行注释，所有的注释均是/*注释内容*/
这里分享下在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文件，查看实现的效果。
表格放图片那一格定义宽度高度即可。
还可以用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; (让多出来的不显示。)
}
你只能试试 !important 了. 因为内联样式优先级高于外部引用样式. 而脚本修改样式的语句又高于以上两种.所以,如果脚本里用到了object.style.xxxx='xxx';的话,那你只能再用脚本修改,如果脚本是用document.write输出的话, !important 应该可以优先于内联样式.
.jqplot-table-legend {
xxxx: xxxx!important;
}
先这样试试看,如果不行就用脚本.