菜鸟学CSS+DIV网页样式与布局——CSS初探

已经学习过HTML和XML来编写网页代码,当你设计好了网页,字体是黑色的,老大过来说改成紫色的,于是你一条一条呼哧呼哧的改好了,老大转了一圈又说,紫色不太好看,还是改成红色的吧!于是你愣了,呼哧呼哧又来了一遍。于是你开始害怕大Boss的再度光临,于是你开始害怕自己辛苦很久出的页面再遭更改……

一、引入CSS

就像开篇说的,为了应付HTML的变化,为了十分便利的控制页面,加上了CSS可以说是更为灵活,更为方便的应对变化。Web设计者和开发者小心地布好页面,完成所有嵌套的表格后,客户要求进行一点“小小”的更改。也许是一些很小的变化,比如“可不可以把图片向左下角移动一点?”之类的。如果只是一个页面,你可以深呼吸,然后呼哧呼哧做了改动。但是涉及到较大的站点网站,一个这样小小的变化就再也简单不了了。

为什么会这样呢?因为定义页面外观的标记本身就是页面的一部分。要看到实例,您只需到任何站点的任何页面上去数一下 font 和 table 标签的数量。只要您能够从实际页面的流程(或代码)中删除这些标记,或者采用更好的办法,即将其外置,您就可以进行集中更改。而这就是
CSS 所能做的。

CSS全称为Cascading
Style Sheets,即层叠样式表。是一种用来表现HTML和XML样式的计算机语言。

二、CSS基本语法

1、选择器声明

集体声明:

<span style="font-size:14px;">h1,h2,h3,h4,p{
    color:puple;
    font-size:15px;
}</span>

嵌套声明:

<span style="font-size:14px;">p b{       /* 嵌套声明 */
 color:maroon;    /* 颜色 */
 text-decoration:underline; /* 下划线 */
}</span>

2、选择器类别

标记选择器:

<span style="font-size:14px;">p{						/* 标记选择器 */
	color:blue;
	font-size:18px;</span>
<span style="font-size:14px;">}
<body>
	<p>class选择器与标记选择器1</p>
	<p>class选择器与标记选择器2</p>
	<p>class选择器与标记选择器3</p>
	<p class="special">class选择器与标记选择器4</p>
	<p>class选择器与标记选择器5</p>
	<p>class选择器与标记选择器6</p>
</body></span>

类别选择器:

例如:

<span style="font-size:14px;">.two{
 color:green;  /* 绿色 */
 font-size:20px;  /* 文字大小 */
}
.three{
 color:cyan;   /* 青色 */
 font-size:22px;  /* 文字大小 */
}</span>
<span style="font-size:14px;">
<body>
 <p class="two">class选择器2</p>
 <p class="three">class选择器3</p>
</body></span>

ID选择器:

<span style="font-size:14px;"><style type="text/css">
 #one{		/* id选择器 */
	text-decoration:underline;	/* 下划线 */
}
</style>

<body>
	<p id="one">集体声明p3</p>
</body></span>

学习前总结:

这幅图是在学CSS之前画的,  只是一个简单的预习,等学完之后会有再一次的总结的。这篇博客首先只简单的了解一下基本语法。接下来的博客会继续学习控制页面等一些样式。

其实HTML就相当于一滩可以实现网页效果的烂泥,是零散的,不是一个整体。加上了CSS之后,HTML或一些编写网页语言就有了灵魂,有了血液,可以牵一发而动全身,可以只需一个属性改变就整体变化样式。

用了CSS之后,随便大Boss怎么改颜色,只要他不嫌来回来去的浪费时间和精力,我们只需要修改一些属性的值就可以了,不会傻到像一些猿猿儿们一条一条的改呀改的。他们就怕有人说要改样式,而我们就不怕你改各种样式(只要别太离谱就行),秒秒钟搞定。

时间: 2024-10-13 08:24:26

菜鸟学CSS+DIV网页样式与布局——CSS初探的相关文章

精通CSS+DIV网页样式与布局--CSS段落效果

在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示效果.首先,我们来看一张导图: 接下来,小编会随着上图所示的脉络,对CSS段落设置进行相关简单的介绍,首先我们来看CSS段落设置中的对齐效果: 对齐效果 水平对齐方式 首先,我们来看一段水平对齐方式的代码以及运行效果: <span style="font-size:18px;">

精通CSS+DIV网页样式与布局--CSS文字效果

上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定的往下走,今天这篇博文,小编主要简单总结一下CSS的文字效果,首先,我们来看一张图: 接下来,小编会随着上面图示的脉络,一一进行讲解,都是一下简单的知识,有兴趣的小伙伴,可以动手和小编一起来实现以下代码实例. 文字的字体 在CSS中,我们采用了font-family来控制文字的字体,接着,我们来看一

精通CSS+DIV网页样式与布局--图片效果

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:     精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CSS文字效果 精通CSS

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式 精通CSS.DIV网页样式与布局(四) ——页面背景 精通CSS.DIV网页样式与布局(三)——中秋效果图 精通CSS.DIV网页样式与布局(二)—— 段落 精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究

精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q

CSS+DIV网页样式与布局——文字样式&amp;段落(一)

一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字.让CSS控制网页中的文字,使它不再那么枯燥平淡,从此网页文字变得绚丽多彩. 一.文字样式 文字样式主要包括文字的大小.颜色.字体等,具体包括如下 写一个小例子,综合运用上述所有的文字效果样式: 代码: <html> <head> <title>文字字体</title> <style> body

精通CSS.DIV网页样式与布局

CSS:Cascading Style Sheet--层叠样式表 概念:控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. CSS选择器: 1.标记选择器 h1{color:red;font-size:10px;} 2.类别选择器 .class{color:red;font-size:10px;} 3.ID选择器 #id{color:red;font-size:10px;} 滤镜的概念: CSS滤镜并不是浏览器的插件,也不符合CSS标准,而是微软公司为增强浏览器功能而特意开发的并整合在

精通CSS+DIV网页样式与布局--页面和浏览器元素

在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动条.首先我们来看一张思维导图: 接着,小编会跟随上述思维导图的足迹,慢慢探寻,丰富的超链接特效中,我们首先来介绍动态超链接,我们来看一下例子的代码和运行的效果:  动态超链接 <span style="font-size:18px;"><span style="

精通CSS+DIV网页样式与布局--页面背景

上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来设置背景颜色.背景图片.首先,我们来看一张图: 接着,小编会随着上述思维导图的脉络,对各个知识点进行详细讲解,首先,我们来看页面背景色,例子代码和运行效果如下所示:   页面背景色 <span style="font-size:18px;"><span style=&qu