Css的使用细谈

Css的使用细谈

Css可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.

Css简介

      

      (1) CSS是用于布局(layout)与美化网页的. (颜色,字体)

      (2) CSS是Cascading Style Sheets的英文缩写,即层叠样式表

      (3) CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). 

      (4) CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用.css为文件名后缀. 

      (5) CSS是大小写不敏感的,CSS与css是一样的. 

      (6) CSS是由W3C的CSS工作组产生和维护的。

     为什么需要层叠样式表(css)

    

       样式表能实现内容与样式的分离,方便团队开发,如图:

      

         看一下两个网页,外观不同但是样式相同:

        

CSS组成

    (1) 语法:

            CSS定义分别由:选择符、属性、属性取值组成,
            格式:selector{property:value}     

          (2) 单位:      

             相对长度单位:

     px 像素(Pixel)。 div{font-size:12px;} 

     em 相对于当前对象内文本的字体尺寸。 

     div{font-size:1.2em;}

     % 百分比  div{font-size:80%;} 

             绝对长度单位:

      pt 点(Point)。

      cm 厘米(Centimeter)。

      mm 毫米(Millimeter)。

      (3) 注释

     注释的内容会被浏览器忽略,可用于为样式表加注释及调试使用。

      CSS注释格式如下:/*  css注释  */   

       (4) 颜色单位   

       #rrggbb (如: #ffcc00)

       #rgb(如:#fc0)

       rgb(x,x,x) 其中x是一个0-255的整数值,如rgb(255,204,0)

       rgb(x%,x%,x%) 其中x是一个0-100的整数值,如rgb(100%,80%,0)

在HTML放置CSS方式

   我们用以下的三种方式打出在网页中显示的图片

      (1) 内联式

    用内联是打上图这几个字,是40px,蓝色字体为:

(2)内嵌式

用内嵌式打上图的几个字,40px,蓝色字体:

……

……

    (3)外部链接式

    在HTML文档中是为

    在CSS文档中是为

DIV+CSS对页面的布局

     一 . W3C盒子模型

      为了帮助理解必须了解盒子模型,每个HTML元素都可以看作一个装了东西的盒子,盒子具有宽度(width)和高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。如下

     

二  . 浮动设置

          虽然使用绝对定位可以实现页面布局,但由于调整某个区块框时其它区块的位置并不会跟随着改变,所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动,直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流(原始文档流)中,所以文档的普通流中的区块框表现得就像浮动框不存在一样。浮动设置如图:

三 . 行框与清理

在进行页面布局时,经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性,再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时,就会在行框中留出一定的宽度,而下面的某个区块框又恰好满足这个宽度,则很可能会向上提,和上一行并列的区块框在同一行排列。而这不并是我们想要的结果,所以可以使用clear属性解决这一问题,该属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。 示例图如下

四 . 浮框基本样式

单浮框

双浮框

多浮框

综合练习实例

做一个简单的css布局的综合实例

HTML文本中的代码为

在css中的代码为

这篇随笔就到这里,下个星期会继续写。如果掌握了HTML与CSS,网上的那些网页版面基本上都可以做出来了。

谢谢阅读。

时间: 2024-10-10 02:29:30

Css的使用细谈的相关文章

细谈HTML解析模块

 细谈HTML解析模块 Html在网页中所占的位置,用一个简单直观的图给展示一下:         HTML基本介绍 (1) HTML是用来制作网页的标记语言.    (2) HTML是Hypertext Markup Language的英文缩写,即超文本标记语言.    (3) HTML语言是一种标记语言,不需要编译,直接由浏览器执行.     (4) HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀.    (5) HTML是大小写

Java程序员从笨鸟到菜鸟之(五十一)细谈Hibernate(二)开发第一个hibernate基本详解

在上篇博客中,我们介绍了<hibernate基本概念和体系结构>,也对hibernate框架有了一个初步的了解,本文我将向大家简单介绍Hibernate的核心API调用库,并讲解一下它的基本配置.核心API的底层实现和源码解析将在以后的博客中一一为大家讲解. 首先我们一起来看一下开发一个hibernate应用程序的大体流程是什么样的(流程顺序可以颠倒): •创建Hibernate的配置文件 •创建持久化类 •创建对象-关系映射文件 •通过Hibernate API编写访问数据库的代码 关于配置

细谈RDD的弹性

细谈RDD的弹性 弹性之一:自动的进行内存和磁盘数据存储的切换   弹性之二:基于Lineage(血缘)的高效容错   弹性之三:Task如果失败会自动进行特定次数的重试 弹性之四:Stage如果失败会自动进行特定次数的重试,而且只会计算失败的分片 弹性之五:checkpoint和persist Checkpoint是比较重量级的操作,RDD操作,一般每次都会产生新的RDD,除了最后一个action操作触发作业以外.但是有时候,链条比较长或者计算比较笨重,考虑把数据放到磁盘上,这就是Checkp

JAVA基础细谈

JAVA基础细谈 一. 源文件和编译后的类文件     源文件的本质就是程序文件,是程序员编写,是人看的.而编译后的类文件是给电脑看的文件.一个类就是一个文件,无论这个类写在哪里,编译以后都是一个文件.源文件通过java编译生成类文件,后缀名为”.java“的是源文件,后缀为“.class”的为类文件.如图 这就是一个源文件和一个和它同名的类文件,文件名和类名一样,方便开发中的文件管理. 二. 语句    java程序的组成是类文件,类文件的组成是方法,方法的组成语句.语句是任何程序的基本单位,

细谈Spring(一)spring简介

Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架.  然而,Spring的用途不仅限于服务器端的开发.从简单性.可测试性和松耦合的角度而言,任何Java应用都可以从Spring中受益. Spring的核心是个轻量级容器(container),实现了IoC(Inversion of Control)模式的容器,Spring的目标是实现一个全方位的整合框架,在Spr

细谈 对象的初始化过程------内存中的实现过程?

今天对于内存的理解 又加深了一步: 对下面代码的理解: class Person { private String name="xiaohong"; private int age=23; private static String country="CN"; { System.out.println(name+" "+age); } public Person(String name,int age) { this.name = name; t

细谈微信提示已停止访问网页的解决方案,微信跳转链接的生成

相信大部分试用微信分享转发链接的时候,都很容易碰到链接在微信中无法打开的问题.通常这种情况微信会给个提示 “已停止访问该网址” ,导致这个情况的因素有以下三点. 1. 分享链接被多人举报. 2. 链接含违规内容,含敏感词. 3. 被腾讯检测系统判断为诱导分享内容. 被人举报我们无法阻止,因为现在行业竞争大,举报的人里其实用户占很少数,多数都是来自同行的恶意举报,这是没有办法的事.第一种情况我们无法避免,但是我们可以避免链接因含敏感词或者含违规内容从而被腾讯主动拦截. 那么有朋友问到底怎么避免呢?

细谈unity资源管理的设计

一.概要 本文主要说说Unity是如何管理的,基于何种方式,基于这种管理方式,又该如何规划资源管理,以及构建bundle,是后面需要详细讨论的. 二.Unity的资源管理方式 2.1 资源分类 unity项目中的资源,大体上可以分为外部导入资源和内部生成资源两种类型.外部导入资源: 美术生成的大部分资源,都是外部带入资源,模型,贴图,UI用图,基本是美术工具生成后,导入到工程中的.内部生成资源: 部分美术生成资源,例如材质,shader,特效,场景等,属于基于Unity引擎来制作生成的,此外各种

细谈XSS骚操作

细谈XSS骚操作 PayLoad 首先一个xss payload基本有以下几部分组成 [TAG]填充标签img svg video button... [ATTR]=Something 填充一些非必要的属性 src=1 xmlns="www.cnblogs.com/m0rta1s" [EVENT]填充事件属性onerror onload... [SAVE_PAYLOAD]填充JavaScript代码alert(1) top.alert(1) 大概就是这样 <[TAG] [ATTR