CSS入门基础
- 认识CSS
- 传统HTML设计网页版面的缺点
- CSS的特点
- CSS的排版样式
13.1 认识CSS
CSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS2规范也于1998年02月通过W3C的审核与推荐,所以CSS并不是专为XHTML所设计的,CSS还可以被其他标记语言拿来制作排版样本,如HTML,XML文件都可以应用CSS,来美化网页的设计,大家如果学会CSS,在HTML,XHTML,XML文件中都可以使用.
13.2 传统HTML设计网页版面的缺点
使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上,而这对XHTML而言更是如此,因为XHTML有意将原先HTML中有关网页版面的标记或属性遗弃不用,如<font>,<center>,color,background,bgcolor等等,所以对XHTML文件而言,其排版与显示的功能比HTML文件更弱,所以使用XHTML来设计网页更需要搭配CSS排版样本.
13.3 CSS的特点
HTML排版时的缺点:
设置麻烦,修改麻烦,功能严重不足.
CSS样式排版的优点:
排版属性功能完整,排版文件可以独立存在,可以共用排版文件
CSS样式排版的分类:
内行排版样式,,内嵌式排版样式,,链接式排版
13.4 CSS的排版样式
行内排版样式:
格式:<标记名称 style="属性1:属性值1;属性2:属性值2">…</标记名称>
例 :<p style="font-size:20pt;color:red;text-align:center">排版样式</p>
排版专用标记:<div>与<span>
div占用的位置是一行，span占用的是内容有多宽就占用多宽的空间距离
两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。
详解：1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：
测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>
2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span>
内嵌式排版样本:
内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又必须在<head>..</head>之间.
与其功能,又可以分为三种,
- 标记定义型
- class定义型
- id定义型
标记定义型格式:
<head>
<style type="text/css">
标记名称{
属性1:属性值1;
属性2:属性值2;
}
标记名称{
属性1:属性值2;
属性2:属性值2;
}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
class定义型格式（多重使用）:
<head>
<style type="text/css">
.定义名称{
属性1:属性值1;
属性2:属性值2;
}
.定义名称1,.定义名称2{
属性1:属性值1;
属性2:属性值2;
}
</style>
</head>
<body>
<标记名称 class="定义名称">…</标记名称>
</body>
id定义型格式（唯一使用）:
<head>
<style>
#定义名称{
属性1:属性值1;
属性2:属性值2;
}
#定义名称1,#定义名称2{
属性1:属性值1;
属性2:属性值2;
}
</style>
</head>
<body>
<标记名称 id="定义名称">…</标记名称>
</body>
"行内"和"内嵌式"排版定义的优先级:
CSS 规定,范围越小,优先级越高.
由小到大排列:
- 行内
- class和id定义型
- 标记定义行
id 的优先级高于class级.
外部排版样式定义:
独立的样式排版:
标记名称{属性1:属性值1;属性2:属性值2;}
.定义名称{属性1:属性值1;属性2:属性值2;}
在<head>…</head>之间使用<link>
格式:
<head>
<link rel="stylesheet" type="text/css" href=URL />
</head>
在<head>…</head>之间使用import
格式：
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
CSS入门基础的更多相关文章
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- CSS入门基础学习二
我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...
- 【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS
整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...
- 学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...
- CSS 入门基础
一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...
- css入门基础知识
一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...
- 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
- HTML中CSS入门基础
HTML.CSS 实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中, ...
- CSS入门基础学习一
一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...
随机推荐
- 用JavaScript获取一个超链接的绝对URL地址
对于Web程序员来说,处理简单的URL格式也许会成为一场噩梦.试想一下,一个网址里有很多组成部分都会影响你对它的解析方法: 是否以/字符开头 是否以//开头 是否以?号开头 是否以#号开头 …等等 当 ...
- gei shilei d
body, p { margin: 0; padding: 0; font-size: 16px; } div { margin: 0 auto; } .wrapper { width: 1080px ...
- ping(1)
/* ping program for learning IP protocol author: jeff date: 2014/10/25 */ #include <stdio.h> # ...
- BZOJ 4027 [HEOI 2015] 兔子与樱花 解题报告
这个题看起来好神的感觉.实际上也好神... 我们可以考虑设 $f_u$ 表示以 $u$ 为根的子树中最多能删多少个点, 再设 $g_u$ 表示以 $u$ 为根的子树中删了 $f_u$ 个点之后,$u$ ...
- android TabActivity的局限性 是否还有存在的必要性
TabActivity的局限性 是否还有存在的必要性 其实谷歌有此举动,我们也应该早就想到了,为什么会这么说呢?那就要从TabActivity的原理开始说起了. 做个假定先: 比如我们最外面的Act ...
- NEERC 2010, Eastern subregional contest
只能把补了的题目放这儿了,先留个坑,怕忘记. Problem G URAL 1806 Mobile Telegraphs 题意是:给定n个电话号码,每个号码是一个长度为10的仅含'0'~'9'的字符串 ...
- Delphi中一些DLL的运用（要传递Application和Screen，似乎还忘了传递提示控件）
dll 调用部分: {****************************************************************} { } { Project: DllDebug ...
- 【HDOJ】1203 I NEED A OFFER!
DP问题. #include <stdio.h> #define MAXNUM 10002 int main() { int m, n; int cost[MAXNUM]; // the ...
- puTTY与SecureCRT的比较
从网上看到别人对这两个工具的比较:从windows访问linux,除了samba之外,日常操作用得最多的大概就是PuTTY和SecureCRT Putty是免费的,SecureCRT是收费的(当然,有 ...
- Memcached 两款.NET客户端的郁闷事儿
不久以后就要负责一个比较大的项目,有多大?反正就是挺大的.现在处于筹备阶段,我主要负责系统框架搭建,在系统缓存这一块决定采用Http运行时缓存+memcached. memcached 以前用过几次 ...