什么是css,可以有那几种实现方法
CSS可以写成一个独立的文件与html文件链接,也可以直接写在html里,
甚至可以直接在html文件里的相关标签上定义样式,写法非常的灵活,以下是一工字型结构的页面,你可以学习一下
无标题文档
<!--
body {
font: 100% 宋体, 新宋体;
background: #666666;
margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0;
text-align: center; /* 在 IE 5* 浏览器中,这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
color: #000000;
}
.twoColLiqLtHdr #container {
width: 80%; /* 这将创建一个占据 80% 浏览器宽度的容器 */
background: #FFFFFF;
margin: 0 auto; /* 自动边距(与宽度一起)会将页面居中 */
border: 1px solid #000000;
text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */
}
.twoColLiqLtHdr #header {
background: #DDDDDD;
padding: 0 10px; /* 此填充会将出现在它后面的 div 中的元素左对齐。如果 #header 中使用的是图像(而不是文本),您最好删除填充。 */
}
.twoColLiqLtHdr #header h1 {
margin: 0; /* 将 #header div 中最后一个元素的边距设置为零将避免边距重叠(即 div 之间出现的无法解释的空白)。如果 div 周围有边框,则不必将边距设置为零,因为边框也会避免边距重叠 */
padding: 10px 0; /* 使用填充而不使用边距将可以使元素远离 div 的边缘 */
}
/* sidebar1 提示:
1. 由于我们使用的是百分比,因此最好不要在侧栏中使用填充。它将会新增至宽度,而让符合标准的浏览器建立未知的实际宽度。
2. 如果为 div 中的元素设置左边距和右边距,则会在 div 边缘和这些元素之间产生空白,如“.twoColLiqLtHdr #sidebar1 p”规则中所示。
3. 由于 Explorer 会在父元素显示之后计算宽度,因此基于百分比的栏有时会出现无法解释的错误。如果您需要更可预见的结果,可选择改为以像素为单位设置栏的大小。
*/
.twoColLiqLtHdr #sidebar1 {
float: left;
width: 24%; /* 由于此元素是浮动的,因此必须指定宽度 */
background: #EBEBEB; /* 将显示背景色,其宽度等于栏中内容的长度,*/
padding: 15px 0; /* 顶部和底部的填充将在该 div 中产生视觉空间 */
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
margin-left: 10px; /* 对于将要放在侧栏中的每个元素,都应当设置左边距和右边距 */
margin-right: 10px;
}
/* mainContent 提示:
1. mainContent 和 sidebar1 之间的空白是由 mainContent div 的左边距创建的。无论 sidebar1 div 中包含多少内容,都将保留栏空白。如果您希望在 #sidebar1 中的内容结束时,用 #mainContent div 的文本填充 #sidebar1 空白,则可以删除此左边距。
2. 为了避免在所支持的最小分辨率 800 x 600 下出现“浮动下降”,mainContent div 中的元素(包括图像)不应大于 430 像素。
3. 在下面的 Internet Explorer 条件注释中,zoom 属性用来赋予 mainContent“hasLayout”。这会避免几个特定于 IE 的错误。
*/
.twoColLiqLtHdr #mainContent {
margin: 0 20px 0 26%; /* 右边距可以用百分比或像素来指定,它会在页面的右下方产生空白。 */
}
.twoColLiqLtHdr #footer {
padding: 0 10px; /* 此填充会将它上面 div 中的所有元素左对齐。 */
background:#DDDDDD;
}
.twoColLiqLtHdr #footer p {
margin: 0; /* 将脚注中第一个元素的边距设置为零将避免出现可能的边距重叠(即 div 之间出现的空白)*/
padding: 10px 0; /* 就像边距会产生空白一样,此元素上的填充也将产生空白,但不会出现边距重叠问题 */
}
/* 要重用的各种类 */
.fltrt { /* 此类可用来使页面中的元素向右浮动。浮动元素必须位于页面上要与之相邻的元素之前。 */
float: right;
margin-left: 8px;
}
.fltlft { /* 此类可用来使页面上的元素向左浮动 */
float: left;
margin-right: 8px;
}
.clearfloat { /* 此类应当放在 div 或 break 元素上,而且该元素应当是完全包含浮动的容器关闭之前的最后一个元素 */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
/* 请将所有版本的 IE 的 css 修复放在这个条件注释中 */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* 上面的专用 zoom 属性为 IE 提供避免错误所需的 hasLayout */
标题
sidebar1 内容
此 div 上所显示的背景色刚好与内容等宽。如果您喜欢改用分界线,而且 #mainContent div 所包含的内容将始终比 #sidebar1 div 中的多,请在 #mainContent div 的左边缘放置一个边框。
Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
主要内容
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
H2 级别的标题
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
脚注
3种
嵌入(写在外部css文件中)
内联(写在网页里的之间)
行内(直接写在元素上,如)
点,没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是
Netscape Navigator在网上冲浪,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。不管你用什么工
具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,为什么同样内容的网页,有的人做出来有
几十KB,而高手做出来只有十几KB,CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信
提问的问题整理出来,供诸位参考。
1、CSS在网页制作中一般有三种方式的用法,那么具体在使用时该采用哪种用法?
当有多个网页要用到的CSS,采用外连CSS文件的方式,这样网页的代码大大减少,修改起来非常方便;只在单个网页
中使用的CSS,采用文档头部方式;只有在一个网页一、两个地方才用到的CSS,采用行内插入方式。
2、CSS的三种用法在一个网页中要以混用吗?
三种用法可以混用,且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因,浏览器在显示网页时是这样处
理的:先检查有没有行内插入式CSS,有就执行了,针对本句的其它CSS就不去管它了;其次检查头部方式的CSS,有就执行
了;在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出,三种CSS的执行优先级是:行内插入式、头部方
式、外连文件方式。
3、在Dreamweaver3中如何使外部文件式CSS?
在Dreamweaver3中使用外连文件式CSS并没有特殊要求,同样是用记事本创建一个*.css文件,在网页的<head>与
</head>之间加上一句这样的代码:<link rel="stylesheet" href="在这里填上你的CSS文件地址(相对路径+文件
名)" type="text/css"> 就行了。
4、如何用Dreamweaver3快速创建CSS外连式文件?
对于一个初接触CSS的网页设计人员来讲,要用记事之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于
Dreamweaver3对CSS支持的很好,用它来帮助就轻松多了。具体可以这样操作:
1)先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver3的编辑窗中调出CSS面板,一个一个地定
义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;
2)全部定义好后,再用记事本创建一个空的CSS外连式文件,把在<head>与</head>之间的那段定义好的CSS复制
到CSS文件中去,就大功告成了。整个过程就是点鼠标,方便吧?
5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗?
不用!先用CSS面板定义好要用的CSS,然后,在要插入CSS的标记插入:style="",再把你刚才定义的CSS从<head>
后面拖到这个双引号中来,把花括号以外的部分删去就行了。
6、在方档头部方式和外连文件方式的CSS中都有“<!--”和“-->”,好象没什么用,不要可以吗?
这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS,它将忽略其中的内
容。虽然现在使用不支持CSS浏览器的人已很少了,由于互联网上几乎什么可能都会发生,所以还是留着为妙。
7、如何给一部分文字加背景色?
给文字加上不同颜色,在DW3中只要在属性面板上选取文字的颜色就行了,非常方便,但要给部分文字加不同的背景色
却没有相应的功能,我们可以先做一个定义背景色的CSS(如:bgstyle),在DW3中点几下鼠就完成了。如一个定义淡黄色
背景的CSS是这样的:
<style type="text/css">
<!--
.bgstyle { background: #FFFFCC}
-->
</style>
在要用时选取那段文字,再在CSS面板上点一下“bgstyle”就行了。
8、如何给部分文字加背景图像?
与加背景色操作类似,中是在背景在选择加载图象就是了,一个定义好的加背景图象的CSS例子的代码是这样的:
<style type="text/css">
<!--
.imgbgstyle { background-image: url(/logo.gif)}
-->
</style>
在要用时选取那段文字,再在CSS面板上点一下“imgbgstyle”就行了。
9、如何使页面的背景在文字“滚动”时背景图案静止不动?
要使背景图案不随文字“滚动”的CSS是这样的:
<style type="text/css">
<!--
BODY { background: purple url(/bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
-->
</style>
10、如何定义字间距?
在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就
是字间距,它指的是每一个字符之间的额外间距,经长度为单位,正负值均可,当取负值时产生字符挤在一起的效果。下
面代码是一个定义好的字间距CSS例子:
<style type="text/css">
<!--
.style1 { letter-spacing: 3px}
-->
</style>
11、如何给文字加上划线、下划线、删除线和闪烁?
在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些
内容,要注意的是闪烁属性有些版本的浏览器不支持,少用为好。下面是一个定义好上述效果的CSS例子:
<style type="text/css">
<!--
.style1 { text-decoration: underline overline line-through blink}
-->
</style>
其中: “underline”是定义下划线;“overline ”是定义上划线;“ line-through”定义的是删除线;“blink”
定义的是文字闪烁。
12、如何使网页具有“首行缩进”功能?
由于DW3输入空格不方便,利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框(style Definition
for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”,所谓“首行”是指每段内容的第一行,也
就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉
字,设置好的CSS如下所示:
<style type="text/css">
<!--
.style1 { text-indent: 2em}
-->
</style>
在DW3要注意:在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“text-indent”右
面的缩进单位选择框中“ems”指的就是“em”。
13、在用表格进行排版时,能使某一方向上的内容离开表格线一点吗?
可以!在DW3中CSS的属性定义对话框(style Definition for .style1)的“Box”上的“margin”定义的就是内容离
开边缘的距离,分别可定义四个方向:“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例
子代码:
<style type="text/css">
<!--
.style1 { margin: 0px 0px 0px 10px}
-->
</style>
14、能给某部分内容加边框吗?
用CSS可以给某部分内容加边框,在DW3中CSS的属性定义对话框(style Definition for .style1)的“Border”定义
的就是边框线,“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色,这些定义好后不要忘记在下面的
“style”中定义线型,否则将看不边框线,因为默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框
为:绿色中粗线的CSS例子:
<style type="text/css">
<!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
常见的网页设计语言(常见的网页设计语言有哪些)
HTML(超文本标记语言)用于定义Web页面的结构和内容,CSS(层叠样式表)用于定义页面的样式和布局,JavaScript用于实现页面的交互和动态效果。除了这三种基础语言之外,还有很多其他的编程语言和框架可型拿以用于Web开发,如PHP、Python、React、Angular等等。不同的语言和框架有着各自的特点和优势,开发者可以...
什么是css模板?什么又是html模板?还有什么网页模板?它们都适合什么程序...
所以,网页模板就是html模板。所谓的CSS模板,也是html模板,可能只是更华丽的html模板。如上面说的一样,装修材料是不可能造出一幢房子来的。接下来的问题也不难了,要做网站,首先我们需要学会基础的html语言,然后学习CSS样式表。只要学会了html和CSS代码,那么如网易,新浪等网站也可以仿制出一个来了...
HTML中css和js有什么区别?
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般...
css语法结构以及规范?
Css常用的一些命名: 可参考:CSS常用命名-彼岸时光-博客园。 三、Css的引入: Css的引入一般有两种,link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项,避免产生资源文件下载顺序混乱和http请求过多的烦恼。 四、Css的命名规范(BEM,OOCSS): 什么是BEM:BEM的意思就是块(block)、元素(...
css四种样式(css的4种样式及优缺点)
2、内联式css样式。内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:1这里文字是红色。css样式代码要写在style=双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开(英文状态下;)。3、CSS是英语CascadingStyleSheets(层叠样式表单)的缩写,它是一种用来表现HTML或...
详解CSS样式选择器有哪些?
如果您觉得有用,记得在下方点赞、关注、留言,我会定期奉 上更多的惊喜哦,您的打赏支持才是我继续努力的动力,么么哒。每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的...
css规则由两个主要部分构成(css规则的类型有哪些)
CSS(CascadingStyleSheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(CascadingStylesheet)。\\x0d\\x0a\\x0d\\x0a在...
css标签和css样式有什么不同
css标签有两种含义 一种是 使用css技术制作的标签 另外一种跟css样式等同 和 . 是选择器的一种 下面给你详细介绍下选择器 CSS的定义是由三个部分构成:选择(selector),属性(properties)和属性的取值(value)。语法: selector {property: value} (选择器 {属性:值})1.标签选择器 选择器是可以是多...
xml,php,css,js,less这些都有什么意思?
它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,执行效率比完全生成HTML标记的CGI要高许多;PHP还可以执行编译后代码,编译可以达到加密和优化代码运行,使代码运行更快。css:样式表 js:...
CSS中可以及不可以继承的属性有哪些
一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性width、height、margin 、margin-top、margin-right、margin-bottom...
黄炭安普: CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一 点,没别的意思.实际上它是一组样式.你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是 Netscape ...
天镇县19111167740: 在网页中使用css的几种方式 - ?
黄炭安普: (1)使用Embed(嵌入样式单)排版样式: 即将CSS代码直接插入每个页面的HTML的<head>区,就象上一节看到的.使用<style>...</style>标签.例如:<style type="text/css"> <!-- h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; ...
天镇县19111167740: CSS是什么? - ?
黄炭安普: CSS就是一种叫做样式表(stylesheet)的技术.也有的人称之为层叠样式表(Cascading Stylesheet).在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制.只要对相应的代码做一些简...
天镇县19111167740: 什么是CSS样式? - ?
黄炭安普: CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一 点,没别的意思.实际上它是一组样式.你可能对CSS这个名词比较陌生,实际上无论你用Int...
天镇县19111167740: css实现圆角的几种方法是什么? - ?
黄炭安普: 有四种方法可以实现圆角.第一、直接写CSS代码:border-radius第二、四个圆角贴图;制作四个圆角的图片,然后用css定义第三、直接制作整个圆角矩形背景第四、定义12个背景色:左上角4个,右上角4个,右下角4个,左下角4个.
天镇县19111167740: “CSS”是什么意思啊??
黄炭安普: CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观.通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率 .样式存储在样式表中,通常放在<head>部分或存储在 外部CSS文件中.
天镇县19111167740: css是什么啊? - ?
黄炭安普: CSS在英文中有如下几种常见的缩写: 1,Cascading Style Sheets 层叠样式表 2,Content Scrambling System DVD电影的加密系统 3,Cast Semi-Steel 半铸钢, 钢性铸铁 4,College Scholarship Service 大学奖学金处 其中在网络上最常见的是...
天镇县19111167740: 什么是CSS样式?英文全称是什么? - ?
黄炭安普: CSS就是一种叫做样式表(stylesheet)的技术.也有的人称之为层叠样式表(Cascading Stylesheet). 在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制. 只要对相应的代码做一些简...
天镇县19111167740: css调用有几种方法? - ?
黄炭安普: 有行内样式、内联样式、外部样式吧.