CSS---网页编程(三)网页化妆技术CSS学习、CSS盒子模型

原创 2017年04月25日 12:24:43

CSS网页编程

CSS概述
CSS是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
那么CSS和HTML是如何在网页代码中相结合的呢?通过四种方式:style属性 、style标签、导入和链接。

CSS与HTML相结合的四种方式
后三种都是一般定义在头部

☆ 1、style属性方式

<p style="background-color:#FF0000; color:#FFFFFF">
    p标签段落内容。 
</p>

☆ 2、style标签方式

<style type=”text/css”>
    p { color:#FF0000;}
</style>

☆ 3、导入方式

<style type="text/css">
     @import url(myDiv.css)
</style>

☆ 4、链接方式

<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" /> 

相关语法

由上到下,由外到内。优先级由低到高。——总之,一般情况是以后加载为主,但还有细节优先级问题(后面会讲到)。

☆CSS代码格式

选择器名称 { 属性名:属性值;属性名:属性值;…….}
  • 属性与属性之间用 分号 隔开
  • 属性与属性值直接按用 冒号 连接
  • 如果一个属性有多个值的话,那么多个值用 空格 隔开。

选择器

就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器(标签本身就是封装数据的容器)。

☆选择器共有三种:

  1. html标签名选择器。使用的就是html的标签名。
  2. class选择器。其实使用的是标签中的class属性。
  3. id选择器。其实使用的是标签的中的id属性。

每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。
在定义的中,多个标签的class属性值可以相同,而id值要唯一,因为JavaScript中经常用。

* ☆选择器的优先级 *

标签名选择器  <  class选择器  <  id选择器  < style属性 

扩展选择器

☆关联选择器

标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就可以用此选择器。例如:

p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>湖南城市学院</b>段落样式</p>
<p>P标签段落</p> 

☆组合选择器
对多个选择器进行相同样式的定义。例如,我们想对“div中的标签”和“类名为cc”的区域设置相同的样式,则可以定义如下的组合选择器:

.cc, div b{/*不同选择器之间用逗号分开*/
  background-color:#0000ff;
  color:#fff;
} 

☆伪元素选择器
其实就在html中预先定义好的一些选择器,称为伪元素。

格式:标签名:伪元素。类名 标签名。类名:伪元素。

  • 超链接a标签中的伪元素
a:link  超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态(未点击)。
a:active 点击超链接时的状态。
  • 段落p标签中的伪元素
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。
  • 自定义伪元素
    :focus 具有焦点的元素
div:hover{
    background-color:#f00;
    color:#fff;
  }

CSS的盒子模型1

这里写图片描述

◇边框(border)

border-topborder-bottomborder-leftborder-right

◇内边距(Paddings):内边距

padding-toppadding-bottompadding-leftpadding-right

◇外补丁(Margins):外边距

margin-topmargin-bottommargin-leftmargin-right

CSS的盒子模型2

☆CSS布局——漂浮

◇ float : none | left | right
    none : 默认值。对象不飘浮
    left : 文本流向对象的右边
    right : 文本流向对象的左边
clear : none | left | right | both
    none :  默认值。允许两边都可以有浮动对象 
    left :  不允许左边有浮动对象 
    right :  不允许右边有浮动对象 
    both :  不允许有浮动对象

CSS的盒子模型3

☆CSS布局——定位
◇ position : static | absolute | fixed | relative


 - static :  默认值。无特殊定位,对象遵循HTML定位规则。
 - absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义。
 - fixed :  未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。 
 - relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置。
版权声明:本文为博主原创文章,大家一起学习进步。

css盒子模型创建网页布局

盒子模型 CSS在描述HTML元素时,会形成一个矩形框,可以将矩形框形象的看成一个盒子。每个HTML元素,都具有盒子模型。 使用盒子模型创建网页布局index.html + out.cssind...
  • guguant
  • guguant
  • 2017年01月16日 16:52
  • 1112

看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记

一、盒子模型(box model) 一个盒子又4部分组成:content(内容)、padding(填充)、border(边框)和margin(外边界) 盒子模型有两种: (1)标准W3C盒子模...

CSS属性,盒子模型以及浮动和定位技术相关

接上一篇,现在继续来说说CSS的常见的一些属性。

css盒子模型

  • 2016年08月22日 15:40
  • 35KB
  • 下载

css盒子模型

  • 2016年02月14日 17:43
  • 230KB
  • 下载

css基础学习(3)(盒子模型,动画)

一个简单的盒子模型框架boxM.html BoxM

CSS盒子模型结构

  • 2013年06月30日 13:58
  • 14KB
  • 下载

CSS+DIV-盒子模型示例.zip

  • 2013年11月03日 17:17
  • 183KB
  • 下载

css3弹性盒子模型 flex与box 菜鸟学习笔记

记录一下学习弹性布局的学习笔记 弹性布局是未来的布局趋势 在移动端弹性布局可施展拳脚...
  • gjc9620
  • gjc9620
  • 2015年06月04日 09:23
  • 825

css布局学习2--盒子模型

1.在以前的css布局中,元素在页面中实际大小是有width+border+padding  确定得。如图1所示,两个div的大小一致,但在页面实际看来却不同 图1     以前的页面开发者,为了...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS---网页编程(三)网页化妆技术CSS学习、CSS盒子模型
举报原因:
原因补充:

(最多只允许输入30个字)