重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这是我以前学习时候的笔记部分,分享给你
永吉ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!
(1)内部样式表(嵌套到页面中)
内部样式表,写在head/head标签中
style type="text/css"
div{
width :600px;
height:300px;
background:orange;
}
/style
(2)内联样式(行间样式,行内样式,嵌入式样式)==很少使用
标签 style="属性:属性值; 属性:属性值;"/标签
例如:div style="width: 100px;height: 200px;background: orange;"/div
(3)引用外部样式表文件
1)link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" /
rel="stylesheet"作用:建立关联性
type定义某种类型(H5中type可省略)
href导入css文件路径
注:一个HTML文件可以导入多个CSS外部样式表
2)@import url(CSS文件路径以及文件全称);
link和import导入外部样式的区别:
差别1:本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。
差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)。
差别3:兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom(document object model文档对象模型 )控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的.
这是一种CSS提供的外部引入方式,低版本浏览器不支持。
(4)对比:
1权重关系:
内联样式表的优先级(权重)最高
内部样式表和外部样式表的权重和书写先后顺序有关(哪个放在下面哪个的权重比较高)
注:权重高属性的会覆盖权重低的属性
覆盖的只是相同的属性,不同的属性会继续执行(即CSS的层叠性)
2作用域:
内联作用域是最小的:只针对于当前的标签
在网页中使用CSS:
一、内部规则 - 直接写在网页文件内部的样式
1.将以下代码插入在HEAD与/HEAD之间可设定此页的默认的样式
style type="text/css"
!--
body{color=red;font-size=9pt}
--
/style
2.在HTML行中加入样式规则
如:
P STYLE="background: yellow; font-family: courier"Amaze your friends!/P
二、外部规则 - 独立的样式表文件
1.链接样式表文件
方法:在HEAD内使用LINK标签:
如:LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"
并建立一个文本文件,起名mystyles.css (和上面对应)。文件内容如:
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
2.输入样式表文件(返回)
方法:在HEAD内插入列代码:
STYLE TYPE="text/css"
!--
@import url(company.css);
H1 { color: orange; font-family: impact }
--
/STYLE
并建立一个文本文件,起名company.css (和上面对应)。文件内容如:
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
可见该种方法的好处是可与网页的内部样式共存。
CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML
(标准通用标记语言的一个子集)等文件样式的计算机语言。
有三种方法可以在站点网页上使用样式表:
外联式Linking(也叫外部样式):将网页链接到外部样式表。
嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。
内联式Inline(也叫行内样式):应用内嵌样式到各个网页元素。
在Dreamweaver 8中,可以在开始弹出框中点击新建CSS文件。也可以在最上面的菜单栏里占击
文件,新建。在弹出框中选择CSS文件就可以了。
CSS可以很方便的用来控制网页的外观。主要有以下特点:
1.可以同时更新多个网页的样式。
2.使网页的表示层与结构层彻底分离
3.大大减小了网页文件的大下
4.加快了网页的加载速度
现在用CSS来布局网页已经是一种潮流,如果要向网页设计方面发展,必须精通CSS。
css是英文Cascading Style Sheets的缩写。它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
它包含3种类型,内部样式,行内样式和外部样式表三种
作用的效果是按顺序从下到上,相同样式下面的会覆盖原有样式,除特殊情况外,一般都是行内样式内部样式外部样式。
以div为例
行内样式写法:
在style里面写样式
div style="height:30px; background:#f00;"/div
内部样式:
在head标签内加入style标签,在标签内写样式:
style
div{height:30px; background:#f00;}
/style
外部样式是建立一个新文件后缀名为.css
举个例子:
建立style.css文件放在项目根目录下:
在里面写入
div{height:30px; background:#f00;}
然后保存,在html的head标签内调用样式
link rel="stylesheet" type="text/css" href="style.css" /
没有做基本的格式化,
需要为加上
.list{margin:0;padding:0;}
或者在css最前面加上,格式化样式。可以搜下css reset
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}