1.什么是CSS
CSS(Cascading style Sheets)“层叠样式表单”。
作用:修饰HTML的标签。
如果把HTML比作一个房子,HTML里面的标签看做是房子里面的家具,那么CSS就是装修风格表,椅子是什么颜色,桌子要多大尺寸等全都有CSS来决定。
2.CSS的使用
方式一:直接将CSS语句写在jsp文件中
jsp:
<style> input.common{font_size:100px;background-color: #F7F7F7;border: 1px #799AE1 solid;height: 20px;width: 180px;} </style>
方式二:将CSS语句写在.css文件里,然后jsp直接引用
css文件:
input.common{background-color: #F7F7F7;border: 1px #799AE1 solid;height: 20px;width: 180px;}
jsp:
<link href="../common/css/Project.css" type="text/css" rel="stylesheet">
3.CSS语法
CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。
基本格式如下:
selector { property: value}
(选择符 { 属性:值})
选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……。
一、选择符
(1)选择符组
你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开
例如:h1, h2, h3, h4, h5, h6 { color: green }(这个组里包括所有的标题元素,每个标题元素的文字都为绿色)
(2)类选择符
定义类选择符时,在自定类的名称前面加一个点号
a.假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:
p.right { text-align: right}
p.center { text-align: center}
然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:
<p class="right">
这个段落向右对齐的
</p>
<p class="center">
这个段落是居中排列的
</p>
b.类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:
.center { text-align: center} (定义.center的类选择符为文字居中排列)
这样的类可以被应用到任何元素上
下面我们使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:
<h1 class="center">
这个标题是居中排列的
</h1>
<p class="center">
这个段落也是居中排列的
</p>
注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。
(3)ID选择符
在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似,只要把CLASS换成ID即可
定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。
(4)包含选择符
可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义
例如:
table a { font-size: 12px }
在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。
(5)样式表的层叠性
层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起,除非另外更改。例如在DIV标记中嵌套P标记:
div { color: red; font-size:9pt}
……
<div>
<p>
这个段落的文字为红色9号字
</p>
</div>
(P元素里的内容会继承DIV定义的属性)
另外,当样式表继承遇到冲突时,总是以最后定义的样式为准。(就近原则)
二、属性和值
(1)属性和值要用冒号隔开
例如:body { color: black}
(2)如果属性的值是多个单词组成,必须在值上加引号
例如:p { font-family: "sans serif"} (定义段落字体为sans serif)
(3)如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开
p { text-align: center; color: red} (段落居中排列;并且段落中的文字为红色)
三、 注释
注释是不显示的。CSS注释以"/*" 开头,以"*/" 结尾,如下:
/* 定义段落样式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */
}
相关推荐
1 CSS基本语法大家可以学习,这对你们有帮助
HTML+css,初中级代码水平可以使用,期末作业可以使用,免费,但是可以在原来资源修改,不可以商业运作。HTML+css,初中级代码水平可以使用,期末作业可以使用,免费,但是可以在原来资源修改,不可以商业运作。...
CSS的基本语法
实验内容:1.CSS的引入和基本选择器应用;2.利用CSS对网页进行控制;3.利用DIV+CSS实现如图2-3、2-4网页效果的布局和设计,并在多种浏览器上测试。所需图片见附件。4.利用DIV+CSS实现如图2-5网页效果,并在多种浏览器...
别人分享的资料,我只是拿出来和大家分享一下,希望能给做网页的朋友一点帮助。如果拿这资源做坏事,与我无关。
CSS基本语法1
CSS样式表的基本语法吃vbd规范化风光好好该行该行
HTML + CSS 基本案例
css基本样式属性大全.pdf
CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装
CSS基本选择器实用PPT课件.pptx
CSS基本入门样式 CSS基本入门样式 技术QQ:807002272
css基本布局十六例
根据Mozilla软件工程师Cameron McCormack的透露 火狐浏览器从V29版开始支持一种新的CSS特征 CSS变量 下面这个视频可以让你大概的了解一下CSS变量的基本情况
<br>本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的...
css基本语言.pdf
用实例的方式演示CSS基本语法 共展示28个
很好的 CSS练习模板 PHP
part4 精通CSS(css mastery)中文版 part5 精通CSS(css mastery)中文版 part6 这些文件名搜索一下,然后下载,解压缩会自动解成一个文件 <br>本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和...