WEB程序设计之CSS(一)
来源:互联网 发布:java签名是什么 编辑:程序博客网 时间:2024/05/21 06:55
WEB程序设计之CSS(一)
CSS(层叠样式表):用于控制网页的表现
一、优点:
1、便于页面风格的统一和修改(样式重用、高效率开发)
2、实现表现和内容相分离(方便维护、错误修改、界面调整更加容易)
3、简化网页,提高页面浏览速度(减少文件量,降低服务器带宽成本,加快网页解析速度)
二、在html中使用css的四种方法
1、行内样式:混合在HTML标记里使用,对每个元素单独定义样式
<span style="font-family:SimSun;font-size:18px;"> <p style="color:blue">文字</p></span>
2、页面内部样式
在HTML的头部标签<head>与</head>之间添加样式
<span style="font-family:SimSun;font-size:18px;"> <head> <style> p{color:blue;} </style> </head></span>
如果一个网站有很多页面,每一个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种方式还是很不错的。
3、链入外部样式
把样式表保存为一个样式表文件,然后在页面中使用<link/>标签链接到这个CSS文件。
<span style="font-family:SimSun;font-size:18px;"> <head> <link rel="stylesheet" href="CSS文件URL" type="text/css" /> </head></span>这种方式将HTML文件和CSS文件彻底分成两个或者多个文件,实现了页面框架HTML代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便,并且如果要保持页面风格统一,只需要把返些公共的CSS文件单独保存成一个文件,其他的页面就可以分别调用自身的CSS文件,如果需要改变网站风格,叧需要修改公共CSS文件就可以了,相当的方便,这才是我们xHTML+CSS制作页面提倡的方式。
4、导入外部样式
导入样式和链接样式比较相似,采用import方式导入CSS样式表,建议大家使用链接样式。CSS技巧:import与link的具体区别
四种样式的优先级按照“就近原则”:行内样式>页面内部样式>链接样式>导入样式
三、CSS的基本语法
选择符{属性1:值1;属性2:值2;……}
1、CSS选择器:
HTML标签选择器(HTML标记):
<span style="font-family:SimSun;font-size:18px;"> h1{font-size:32px;}</span>
HTML选择器很方便,但是一下就把整个页面的所有相应的标记都改变了样式,显得不够灵活。
类选择器:允许同一元素有不同样式(通过选择类实现)
定义:
<span style="font-family:SimSun;font-size:18px;"> .redone{color:red;}</span>应用:
<span style="font-family:SimSun;font-size:18px;"> <h2 class="redone">标题</h2> <p class="redone">段落</p></span>
通用选择器:
*表示所有的html标签
<span style="font-family:SimSun;font-size:18px;"> *{ margin:0px; padding:0px; }</span>
ID选择器:ID选择器在某一个HTML页面中只能使用一次,就像只有一个身份证(ID)一样,不能重复。
id属性值是唯一的,与class不同
一般用于网页中的“独一无二元素”,如页脚、页眉等
定义:
<span style="font-family:SimSun;font-size:18px;"><span class="com">#header{width:960px;border:1px solid #666;}</span></span>
应用:
<div id="header">我的网站</div>
选择器集体声明:
h1,h2,h3,h4,h5,h6{color:#900;}
选择器的嵌套(派生选择器):通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
#div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/
四、CSS属性
说明:1、不建议在font-family中设置超过宋体/黑体之外的字体,会导致未装字体的计算机显示不正常
由于中文文字的复杂性,点阵装的字体并不是全都适合于浏览器观看,因此推荐使用标准的宋体用于中文文字的显示,如果需要其他装饰性字体,应当多使用图片方式来替代纯文本的显示.
2、字体大小的单位,绝对单位:in,cm,mm,pt;相对单位:em,ex,px,%;
二、文本属性:
3、背景属性
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
css作业练习:
一、设计如图所示的网页,要求
1)标题文字居中,字的大小为32px,颜色为#666,有下划线;
2)段落文字的大小为14px,首行缩进,行高为180%;
3)第一行的CSS的文字效果为文字大小28px,加粗,颜色为蓝色;
4)第一行CSS的英文全称效果为斜体,背景色#ddd
参考代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS介绍</title> <style> h1{ text-align: center; font-size: 32px; color:#666; text-decoration: underline; } p{ font-size: 14px; text-indent: 2em; line-height: 180%; } .key{ font-size: 28px; font-weight: bold; color: #00f; } .tip{ font-style: italic; background: #ddd; } </style> </head> <body> <h1>CSS介绍</h1> <p><span class="key">CSS</span>(<span class="tip">Cascading Style Sheets</span>) 层叠样式表,是控制网页布局样式,并能够真正做到网页表现与内容分离的一种标记语言。相对于传统 HTML 的简单样式控制而言, CSS 能够对网页中的对象的位置排版进行象素级的精确控制,支持几乎所有的字体字号样式,以及拥有对网页对象盒模型样式的控制能力,并能够进行初步的页面交互设计,是目前最优秀的表现设计标记语言。归纳起来 CSS 2.0 有以下几个主要优势。 </p> </body> </html>
- WEB程序设计之CSS(一)
- WEB程序设计之CSS(二)
- WEB程序设计之CSS(三)
- WEB程序设计之HTML(一)
- Web基础之CSS(一)
- 精通CSS:高级web标准解决方案之读书笔记(一)
- Web学习篇之---css基础知识(一)
- web前端之JavaScript高级程序设计一:变量、作用域
- web程序设计之php基础(1)
- web程序设计之javascript基础(2)
- WEB程序设计之HTML(二)
- WEB程序设计之javascript
- WEB程序设计之DOM
- CSS之Div+Css布局(一)
- CSS响应式 Web 设计(一)
- windows程序设计之计时器(一)
- CSS之浮动(一)
- web开发之css知识点理解与回顾(一)对齐
- 判定回文串
- error C2440: “=”: 无法从“const char [11]”转换为“LPCWSTR”
- java架构师之路
- UIScrollview的使用
- 经典游戏中的游戏编程
- WEB程序设计之CSS(一)
- 开贴之言
- Java的编译时异常和运行时异常的区别
- 第九周项目5 程序填充
- web定时任务之spring
- 创建单例类
- Struts2中过滤器和拦截器的区别
- SH整合的BaseDao
- Java学习笔记(二)