你不曾领略的CSS——【牛腩新闻发布系统】

一、背景:

  随着互联网的发展,网页对个性化要求也不断的提高。HTML,HyperTextMarkupLanguage,超文本标记语言,原来就是一说明文,但是用户需要更多的标签和属性,然后就就一个劲的添HTML标签和属性,造成网页内容和样式混乱,不容易维护。所以,就在这个时候CSS横空出世,实现了网页内容和样式的分离,极大的提高了编写、修改页面的效率!

二、CSS是什么?

CSS(CasCading Style Sheets),层叠样式表,就是样式、内容像汉堡包一样,一层一层叠起来,夹心的~

三、CSS选择器是什么?

要使用CSS对HTML页面中的元素实现一对一(ID)、一对多(class)、或者多对一(标签)的控制,需要用到CSS选择器。其实它就是一媒婆,给css和html牵线搭桥的。

ID选择器就像身份证一样,一人一个,更具针对性;类选择器在easyUI里面很常用,例如把easyUI里面控件中的class设置成easyUI-datagrid,表格样式就能得到很好的统一,个人觉得如果做附带不少子系统的大系统,class选择器有一统江湖的好本领;标签选择器,不管你的脑袋(head),还是胳膊腿(body)的,都在标签的控制范围内~

CSS选择器的种类和优先级:

ID选择器>class选择器>HTML标签选择器

下面通过一个小DEMO来验证一下选择器的优先级:

1.首先在客户端创建一个CSS样式表,代码如下,

/*
*创建人:王美
*创建时间:2015年2月23日16:14:53
*/

/*css样式*/

/*标签选择器*/
body {
    color:#f0f;/*粉红色*/
}

/*类选择器*/
.menu {
    color:#f00; /*红色*/
}

.title {  /*新闻标题样式*/
   color:#00f; /*蓝色*/
}

/*ID选择器*/
#special {
    font-weight:bold ;/*粗体*/
    color:#0f0;/*绿色*/
}

2.建立一个HTML页面:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<!--
		创建人:王美
		创建时间:2015-02-23 15:56:31
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>css测试</title>

    <link href="css/StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <span id="special" class="menu">栏目四</span>
    <span class="menu">栏目五</span>
    <span class="menu">栏目六</span>
    <span class="title">这是<span> 一</span>条新闻标题</span>
    434434343434346464
</body>
</html>

3.运行后显示结果:

4.综上所述,栏目四的ID是special,类是menu,special在css中颜色为绿色,menu的字体颜色为红色,栏目四为绿色,证明优先级 ID选择器>class选择器;body
HTML标签里面,有class的为红色,默认bodyHTML标签格式为粉红色,证明优先级 class选择器>HTML标签选择器

四、总结

  抽象推动编程进步。

时间: 2024-10-08 01:25:37

你不曾领略的CSS——【牛腩新闻发布系统】的相关文章

牛腩新闻发布系统笔记——怎么写CSS

根据这牛腩学习敲新闻发布系统已经有一段时间了,挺佩服牛腩的,讲那么多东西,我听着也不觉得枯燥,反而有种,一不留神就会错过很多东西的感觉,所以有些地方也是重复又重复的在看. 这篇博客就总结总结小编在学习牛腩新闻发布系统的时候一些笔记.可能知识还比较原生态,but who cares.现在先提炼出来,以后慢慢的体会和升华吧. 牛腩一部分可以说是和机房相似,也是让我从.net到c#的一个过渡.中间一部分就是讲div +css了.里面的知识说多也不多的,根据不同的需求,它又有各种变形和组合,这加起来就有

牛腩新闻发布系统之CSS和HTML

牛腩新闻发布系统前台和后台的设计正在进行中,是停下来做一下总结的时候了.在敲这个系统的时候虽然用的语言和机房收费不太一样,但是共同点还是非常的多的.终于明白天下的语言都是一样的.这次我想对CSS和HTML进行一下总结为后面更好的学习做好铺垫. CSS:  特点:实现网页内容与样式的分离  Css选择器优先级:ID选择器>类选择>HTML选择器  Css核心内容:标准流,盒子模型,盒子之间的浮动,定位等. Css称为级联样式表.在牛腩新闻发布系统的前台设计中,懂得了id选择器和class选择器

有趣的CSS盒子模型——【牛腩新闻发布系统】

前言 传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用css排版后,通过由css定义的大小不一的盒子和盒子嵌套来编排网页.css盒子模型是div排版的核心. 说白了就是以前没用css盒子模型,html中的元素就像一堆散乱的苹果:用了之后,就变成整箱整箱的苹果摞到一起.这种方式排版的网页,代码简洁,更新方便,容易兼容多种浏览器.    css盒子模型元素和计算 通过定义一系列与盒子相关的属性(内容content.填充padding.边框border.边界margin)来控制各个

浅谈牛腩新闻发布系统

结束了漫长的C/S之旅,跨入B/S的学习,一切又是崭新的,充满希望. B/S的学习首先接触的便是牛腩老师的新闻发布系统,看了这么多年的网页终于要自己来编写一个网页了着实还是让我小小激动了一把.但是敲这个系统的时候总是有一种走迷宫,迷迷茫茫的感觉,什么跟什么啊... 于是,我机智的决定我要先把视频看一遍,至少要看一多半,至少得让我直到这个系统大概的框架吧.看了一半多终于形成了一个模糊的框架: 牛腩新闻发布系统分为前台和后台两部分,个人理解其实就像我们机房收费的UI层和B,D层的关系,前台负责显示给

牛腩新闻发布系统总结——网站发布和分页制作

牛腩新闻发布系统的视频看了将近半个月的时间,今天成功地把它发布了,哈哈.第一次看教学视频看得这么专注,都不带走思的,很不错.给小牛老师赞一个,嘿嘿! 言归正传,每学完一个阶段,最重要的就是总结,所以就允许我以倒序的形式,颗粒归仓吧! 牛腩新闻发布系统的发布 参考博文: win7下IIS的安装和配置 http://www.jb51.net/article/29787.htm VS2010网站发布详解 http://wanghaitaoboke.blog.163.com/blog/static/17

牛腩新闻发布系统-验证码搞通了吗?详细注释-秒懂

牛腩新闻发布系统添加新闻和登录界面用到了验证码,生活中经常遇到形形色色的验证码,数字和字母的,12306图片形式的,百度贴吧文字形式的等等.当时见得时候感觉很神奇,现在刚好学到了,感觉很有意思,接触了BS之后,越来越多的网页神秘的内容,会慢慢的被了解,这种渴望的感觉特别棒.见到了自己喜欢的那就应该认真的分析,理解验证码的产生,这里说的是数字和字母类型的,从简单的入手. 什么是验证码,它是干什么的? 验证码:是一种区分用户是计算机还是人的公共全自动程序.可以防止:恶意破解密码.刷票.论坛灌水,有效

点滴的积累---牛腩新闻发布系统总结

最近学习状态一直都不错,最近敲完牛腩新闻发布系统后又看了看<培养计划6.0>发现"牛腩新闻发布系统"的作用其实就是一个成语--抛砖引玉.在该新闻发布系统中基本上涉及到了B/S开发所需要具备的知识模块(HTML.Asp.net.XML.JavaScript.CSS.DIV.JQuery.AJAX).通过这个小的系统我的学习也将从C/S转移到B/S上,当然这个小的系统带给我的远远不止这些. 一.重新认识了软件开发的流程. 之前虽然学习过UML.软件工程等也算对系统开发有了初步的

牛腩新闻发布系统总结(一)——总体感受

牛腩新闻发布系统的学习差不多用了一个月,我对它的总体评价是"麻雀虽小,五脏俱全",这是我第一次开始接触网页设计,当我把它设计完时,满满的都是成就感,虽然自己按着牛老师的意思做的,不过依旧非常开心. 牛老师的视频看完我首先想说,他是个特别有耐心,全心全意为人民服务的人,完全从初学者的角度出发,第一个让我想看他其他视频的人,这个系统虽然说很小,不过每一步设计都都很关键,很准确,让我这个没有接触过完整项目开发的人不至于跑偏. 首先是项目设计思路:文档编写(数据库设计说明书. 概要说明书.详细

牛腩新闻发布系统-出错集锦(2)

接上篇<牛腩新闻发布系统-出错集锦(1)>  错误十: 分析及解决方案:查询的时候数据库中内容为空.在VB中也遇到过这样的错误,不过错误不是这样提示的.是关于EOF和BOF之类的错误提示. 窗口源中填写 <span style="font-size:18px;">EmptyDataText="该类别下暂无新闻!</span> 代码中填写 <span style="font-size:18px;"> if (d

牛腩新闻发布系统(一)

结束了软件工程的学习,开始学习牛腩的时候也就意味着我们的知识体系从C/S向B/S开始转化了.这里已没有具体的窗体,开始面向web开发. 一.软件工程过渡到牛腩新闻发布系统 在听牛腩讲解新闻发布从无到有,从最初只是一个需求,到系统初步成型,给我的感觉就是,软件不管是C/S还是B/S软件开发都还是一样的. 根据之前的机房收费系统的经验和牛腩详细讲解,我看到了更多地相似和曾经.后面一点点才是新的知识. 牛腩开始新闻发布系统的时候顺序也是根据需求写一个需求文档,然后画类图,设计数据库,画系统原型,回顾一