CSS，给我们不一样的体验

 又遇见了CSS，第一次接触它是在牛腩新闻发布系统中，那时候，知道了它是用来帮助我们调整网页样式布局的。有了之前的实践，现在从理论出发，继续学习CSS。对于一个网页设计者来说，都知道HTML语言是网页制作的基础。但如果希望网页能够美观、大方，并且升级方便，维护轻松，那么就必须学习CSS，CSS在其中扮演者重要的角色。一.为什么会有CSS。CSS的出现，与传统的HTML语言有着各种缺陷有关。主要包括：

维护困难，修改标记花费时间长
标记不足，文字间距、段落缩进等标记很难找到
网页过“胖”，没有统一的样式控制，体积过大
定位困难，整体布局页面，模块间位置混乱，过多的<table>标记。

二.CSS是什么。 CSS（Cascading Style Sheet），层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。 CSS以HTML语言为基础，提供了丰富的格式化功能，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格。 三.怎么使用CSS控制页面。 使用CSS控制页面，不仅仅只是一种方法，行内样式、内嵌式、链接式和导入式都属于方法之一。下面一一学习一下。 1.行内样式 它利用style属性，设置不同的CSS样式，各样式之间互不影响，分别显示自己的样式效果。总结：最为简单的方法，但由于需要为每一个标记设置style属性，后期维护成本高，网页容易过胖。 2.内嵌式 它将CSS写在<head>与</head>之间，并且用<style>和</style>标记进行声明。总结：所有的CSS代码集中在一个区域，方便后期维护。但对于拥有很多页面的网站，对于不同页面都希望采用同样的风格，就比较麻烦。 3.链接式 HTML文件： CSS文件：它将HTML代码与CSS代码分离。总结：使用频率最高，最为实用的方法。将HTML页面本身与CSS样式风格分离为两个或多个文件，实现页面框架HTML代码和美工CSS代码的完全分离，前期制作和后起维护都十分方便。后台技术人员和美工设计者可以很好地分工合作。对于同一个CSS文件，可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面，使得网站整体风格统一，后期维护的工作量也大大减少。 4.导入样式 常用的有以上几种@import语法，可以选择任意一种放在<style>与</style>标记之间。总结：与链接样式表功能基本相同，语法和运作方式上略有区别。采用import方式导入的样式表，在HTML文件初始化时，会被导入HTML文件内，作为文件一部分。而链接样式表是在HTML的标记需要格式时才以链接的方式引入。最大的用处可以让一个HTML文件导入很多的样式表。四种方式，如果同时出现在HTML文件中，那么就会根据优先级来对网页样式进行布局。行内样式的优先级最高，其次是链接式，再次是内嵌式，最后是导入式。 五.体验CSS 1.简单的页面框架

<html>
<head>
<title>体验CSS</title>
</head>
<body><div>CSS简介</div><div>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标
准通用标记语言的一个子集）等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设
计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级
的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根
据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
</div>
</body>
</html>

        2.插入图片

<div><img src="bike.jpg" border="0">层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标
准通用标记语言的一个子集）等文件样式的计算机语言。.......
</div>

     3.加入CSS控制

<head>
<title>体验CSS</title>
<style>
body{padding:0px;margin:0px;background-color:#FFFF99; /*设置背景颜色*/
}
#title{font-size:19px;           /*字号*/font-weight:bold;         /*粗体*/text-align:center;        /*居中*/padding:15px;             /*间距*/background-color:#FFFFCC; /*背景色*/boder:1px solid #FFFF00;  /*边框*/
}
#content{padding:6px;              /*间距*/font-size:13px;           /*字号*/line-height:130%;         /*行间距*/
}
</style>
</head><span style="font-family:KaiTi_GB2312;font-size:18px;">
</span>

        4.控制图片

img{float:left;               /*图文混排*/filter:alpha(opacity=100,finishopacity=0,style=2); /*渐变效果*/
}

        这样，加入一个简单的CSS文件，就制作出了和第一张完全不一样的网页效果，看着确实清新了很多。没做之前，总觉得要在HTML文件中再加上个CSS文件，那会是多么复杂。现在做完了，发现其实还是很简单的，真正领略了CSS带给我们的一种不一样的视觉体验。

CSS，给我们不一样的体验相关推荐

css 左边阴影_css揭秘-用户体验
选用合适的鼠标光标难题鼠标指针的用途不仅在于显示鼠标在屏幕上的位置,还可以告诉用户当前可以执行什么动作.这在桌面应用程序中是十分普遍的用户体验实践,但在网页应用中却往往被忽视. 解决方案 css3 ...
css 遥控器界面,智能电视用户体验设计之遥控器篇
今天有请负责智能电视APP设计一年半的@卜卜胡萝卜1992 给大家分享一些实用的设计经验,科普智能电视用户体验的基础知识.接上一篇继续探讨问题,本篇关于遥控器. 那种一大条上面都是按钮的遥控器在互联网 ...
CSS学习笔记——动画animation初体验(小熊案例)
文章目录一.动画概念二.动画基本用法 1.动画模板 2.动画的使用 3.小熊案例总结一.动画概念动画是CSS3的一个重要用法,动画使元素逐渐从一种样式变为另一种样式.您可以随意更改任意数量的 ...
html表ge模板_16款用户体验优秀的HTML CSS价格表格模板附演示及下载
网友热度 159,461 ℃ - 4条评论如果我们在访问某些产品销售类网站的时候,看到产品的价目展示用户体验,很大程度上会影响我们的购买需求,所以说我们在自己.客户的网站价目表格展示的时候,用上特有 ...
hbuilder新建web apk项目_【CUCS】Ionic利用你喜欢的(html css js) web技术创建跨平台的移动app...
点击上方"CUCS" 可以订阅哦! Ionic 是一个强大的 HTML5 应用程序开发框架,号称 Advanced HTML5 Hybrid Mobile AppFramework ...
CSS 重构：样式表性能调优
内容简介 CSS 对于现代网站的用户体验至关重要,其地位不亚于决定着网站外形的 HTML 和让网站动起来的 JavaScript.本书作为 CSS 代码重构指南,不仅展示了如何编写结构合理的 CSS, ...
dw支持css3 html,通过DW设计网页时组织CSS的建议
应该连接到External CSS还是导入? 创建外部样式表以后,你需要把它附加在每个页面上(或是模板).要这样做,可以在CSS面板上淡季"附加样式表(Attach Style Sheet) ...
【css】前端换肤功能方案调研 css变量换肤实践
场景:应用要做深浅两套主题,内嵌h5页面要根据用户当前选择的主题渲染对应的主题样式. 技术栈:vue-cli3 + less + Vant 接到需求后,上网调研了几种方案:切换className.切换 ...
详解16个CSS新特性（2021最新版-下）
2021 CSS 的新特性和之前两年的相比有相似也有不同,本文就带大家继续看今年的 CSS 到底说了什么. 上篇指路:详解16个CSS新特性(2021最新版-上) CSS 等比缩放 CSS 等比缩放一 ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...

CSS，给我们不一样的体验

CSS，给我们不一样的体验相关推荐

最新文章

热门文章