• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS 控制页面样式的4种方式和优先级问题

CSS 控制页面样式的4种方式和优先级问题

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,页面样式等相关知识,佚名 希望在学习及工作中可以帮助到您

本节主要讲解,两个内容,
第一:CSS如何控制页面样式,有几种方式;
第二:这些方式出现在同一个页面时的优先级。
使用xHTML+CSS布局页面,其中有个很重要的特点就是内容与表象相分离,内容指HTML页面代码,表象就是CSS代码了,如果把页面看成穿着衣服的人的话,人就是HTML,是内容,而衣服呢就是CSS,是表
象,现在出现的问题是,如何让CSS去控制页面?或者说,如何让衣服穿在人身上,好体现出人得风格特点;不同的CSS就可以使页面出现不同的风格适用不同的网站,而不同的衣服,人穿上后就会体现
出不同的职业。
第一:如何让CSS去控制HTML页面效果呢?
有这么4种方式,行内方式、内嵌方式、链接方式、导入方式
1)行内方式
行内方式是4种样式中最直接最简单的一种,直接对HTML标签适用style="",例如:
<p style="color:#F00; background:#CCC; font-size:12px;"></p>
虽然这种方法比较直接,在制作页面的时候需要为很多的标签设置style属性,所以会导致HTML页面不够纯净,文件体积过大,不利于搜索蜘蛛爬行,从而导致后期维护成本高。
2)内嵌方式
内嵌方式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- #div1{width:64px; height:64px; float:left;} #div1 img{width:64px; height:64px;} --> </style> </head> <body> <div id="div1"><img src="http://www.jb51.net/images/logo.gif" /></div> 全国的CSS爱好者汇聚于此,如果不来,你就OUT喽~我们的口号是: “分享自己的欢乐与痛苦,分享自己的经验与心得,分享自己的资料与资源” 如果您也愿意,就加入我们吧~ </body> </html>
提示:您可以先修改部分代码再运行
内嵌方式,大家应该也能意识到,即使有公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护也大,如果文件很少,CSS代码也不多,这种方式还是很不错
的。
3)链接方式
链接方式是使用频率最高,最实用的方式,只需要在<head></head>之间加上

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS first-letter伪类元素的特点
  • 2017-08-06CSS 选择器浅谈
  • 2017-08-06CSS中基代码base.css一览
  • 2017-08-06css中省去绝对地址前的http: 节省字节
  • 2017-08-06DIV设置float后父容器无法定位高度的问题解决方法
  • 2017-08-06纯css制作的漂亮好看的进度条
  • 2017-08-06利用CSS3的transform做的动态时钟效果
  • 2017-08-06纯CSS实现箭头、气泡让提示功能具有三角形图标
  • 2017-08-06DIV半透明代码 兼容主流浏览器
  • 2017-08-06CSS 控制因Html页面高度导致抖动的问题解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • IE8 css overflow:hidden不起作用
    • 纯CSS打造兼容各种浏览器的几何图形打包
    • 详谈IE条件注释
    • Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
    • CSS凹型导航按钮效果的实现代码
    • IE6 div最小高度去除方法以及IE6div垂直居中css样式
    • 浅析rem和em和px vh vw和% 移动端长度单位
    • 黑客选择CSS代码挂马 CSS挂马攻防实录
    • 如何布局登录页面
    • zTree v3.5 Css分解与dom结构说明

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有