`

关于CSS(DIV属性,背景,连接,边框,虚线,实线,布局与命名)

    博客分类:
  • HTML
阅读更多
div属性

  div属性

  color : #999999 文字颜色

  font-family : 宋体 文字字型

  font-size : 10pt 文字大小

  font-style:itelic 文字斜体育

  font-variant:small-caps 小字体

  letter-spacing : 1pt 文字间距

  line-height : 200% 设定行高

  font-weight:bold 文字粗体

  vertical-align:sub 下标字

  vertical-align:super 上标字

  text-decoration:line-through 加?h除线

  text-decoration:overline 加顶线

  text-decoration:underline 加底线

  text-decoration:none ?h除连接底线

  text-transform : capitalize 首字大写

  text-transform : uppercase 英文大写

  text-transform : lowercase 英文写

  text-align:right 文字*右对齐

  text-align:left 文字*左对齐

  text-align:center 文字置中对齐

  这些是一些简单的文字效果,可以应用到css的页面中。 

  背景

  background-color:black 背景颜色

  background-image : url(image/bg.gif) 背景图片

  background-attachment : fixed 固定背景

  background-repeat : repeat 重复排列-网页预设

  background-repeat : no-repeat 不重复排列

  background-repeat : repeat-x 在x轴重复排列

  background-repeat : repeat-y 在y轴重复排列

  background-position : 90% 90% 背景图片x与y轴的位置

  链接

  A 所有超连接

  A:link 超连接文字格式

  A:visited 浏览过的连接文字格式

  A:active 按下连接的格式

  A:hover 鼠标移至连接

  边框

  border-top : 1px solid black 上框

  border-bottom : 1px solid #6699cc 下框

  border-left : 1px solid #6699cc 左框

  border-right : 1px solid #6699cc 右框

  border: 1px solid #6699cc 四边框

  虚线

  <textarea style="border:1px dashed pink">

  实线

  <textarea style="border:1px solid pink">

  ===========================================================================

  DIV 网页布局规范的对CSS的类及id命名

  Web开发者(也就是您)可以通过创建CSS类及id名称并使用这些名称来对div以及其他的页面元素、标签进行标识。对开发人员来说,在命名重新定义XHTML标记(tags)的CSS selectors时,必须保证其与预定义的标记准确匹配,但就类以及id选择器名称而言,则仁者见仁,智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。

  在阅读了由Andy Clarke(of Stuff and Nonsense and All That Malarkey)以及Eric Meyer所撰写的关于CSS类以及id命名规范的系列文章之后,我开始思考在自己的Web站点设计过程中对类以及ids的命名方式。

  直观命名

  当在设计Web页面以及需要对一个div进行标识的时候,最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示:

  top-panel

  horizontal-nav

  left-side

  center-column

  right-col

  这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义,因此满足了标识页面元素以及相应的CSS样式的需要。

  但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置,因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时,这些命名没有涉及文档内容的结构。因此,下面给出了对CSS类以及ID命名更好的方法。

  结构化命名

  结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记(markup)中的类和id名称。

  有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容(content)以及标记(markup)进行重用。当你理解这种方式时,很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频(audio)等外观格式上显得非常不合适。因此,应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。

  可以按照如下所示的结构化方式来对类以及id名称命名:

  branding

  main-nav

  subnav

  main-content

  sidebar

  这些名字同直观命名方式一样非常易懂,但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记(structural markup)的初衷,即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。

  即使你不打算在其他的媒体上对Web页面进行格式修改,使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如,结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当,因为无论它出现在页面的哪一边,这个名字仍然对开发人员来说直观易懂。

  一些命名惯例

  Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一,但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表:

  header

  content

  nav

  sidebar

  footer

  这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢?尽管这是我所希望的,但我并不这么认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时,使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便,尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。
分享到:
评论

相关推荐

    1300张图片训练效果

    1300张图片训练效果

    springboot116基于java的教学辅助平台.zip

    教学辅助平台的出现,是为了更好地服务于教育工作者和学生,提高教学效果和学习效率。该平台集成了多个功能模块,旨在为用户提供全面、便捷的教学辅助服务。 平台首页作为导航入口,提供了清晰的界面布局和便捷的导航功能,方便用户快速找到所需功能。需要注意的是,“首页”这一选项在导航菜单中出现了多次,可能是设计上的冗余,需要进一步优化。 “个人中心”模块允许用户查看和管理自己的个人信息,包括修改密码等账户安全设置,确保用户信息的准确性和安全性。 在教育教学方面,“学生管理”和“教师管理”模块分别用于管理学生和教师的信息,包括学生档案、教师资料等,方便教育工作者进行学生管理和教学安排。同时,“课程信息管理”、“科目分类管理”和“班级分类管理”模块提供了课程信息的发布、科目和班级的分类管理等功能,有助于教育工作者更好地组织和管理教学内容。 此外,“课程作业管理”模块支持教师布置和批改作业,学生可以查看和提交作业,实现了作业管理的线上化,提高了教学效率。而“交流论坛”模块则为学生和教师提供了一个交流和讨论的平台,有助于促进师生互动和学术交流。 最后,“系统管理”模块为平台管理员提供了系统配置.

    yolo算法-火灾探测数据集-3466张图像带标签-火灾fire_detect-oqlpv.zip

    yolo系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值

    基于go语言的参数解析校验器项目资源.zip

    基于go语言的参数解析校验器项目资源

    matlab主成分分析代码

    matlab主成分分析代码

    华南农业大学在四川2020-2024各专业最低录取分数及位次表.pdf

    那些年,与你同分同位次的同学都去了哪里?全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据,高考志愿必备参考数据

    Spire.XLS是一个基于.NET的组件

    Spire.XLS是一个基于.NET的组件,使用它我们可以创建Excel文件,编辑已有的Excel并且可以转换Excel文件.dll

    基于爬虫技术的股票分析系统.doc

    现如今,随着互联网的发展,人们获取信息的方式也各有不同。以前的传统方式的信息流与电视,报纸,书籍,信件,等等,因为互联网的使用,现在的互联网媒体已经成为人们获取信息的最重要来源。更新互联网,让人们得到最新、最完整的信息变得越来越容易。 现在企业已经越来越重视互联网所能带来的利益,借助互联网来对自己的企业进行营销推广已经获得绝大部分企业的认可。本文我们主要进行的是股票分析系统网站的设计。何为股票分析,就是指股票投资人之间的根据市场价格对已发行上市的股票进行的买卖。而国内股票市场的迅速发展让这次开发设计显得十分必要。通过该股票分析系统网站,我们可以随时随地通过该股票分析网站,了解股票行业最新信息;根据股票行业分析来进行相关交易。本网站采用的是Springboot技术和mongodb数据库,运用 stock、 vue2、echarts、bootstrap等技术,使用eclipse开发工具完成股票数据的爬取分析。

    厨房食品佐料检测数据集VOC+YOLO格式602张18类别.zip

    文件太大放服务器了,请先到资源详情查看然后下载 样本图参考:blog.csdn.net/2403_88102872/article/details/143395913 数据集格式:Pascal VOC格式+YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):602 标注数量(xml文件个数):602 标注数量(txt文件个数):602 标注类别数:18 标注类别名称:["apple","chocolate","cloth","cononut_water","detergent","fanta","gelatin","kuat","mustard","nescau","peanut","pear","sauce","shoyo","sponge","tangerine","tea","treloso"] 18种常见的厨房食品和佐料,包括苹果、巧克力、椰子水、洗涤剂、饮料、明胶、芥末、花生、酱油等

    基于卷积神经网络参数优化的情感分析论文code_cnn-text-classification.zip

    基于卷积神经网络参数优化的情感分析论文code_cnn-text-classification

    河北传媒学院在四川2020-2024各专业最低录取分数及位次表.pdf

    那些年,与你同分同位次的同学都去了哪里?全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据,高考志愿必备参考数据

    Python实现的人脸识别系统及其应用

    内容概要:本文档详细描述了一个基于 Python 的人脸识别系统的构建过程,涵盖了从系统设计理念到具体功能实现的各个方面。首先介绍了系统总体设计流程,包括摄像头图像捕获、人脸检测、特征值计算、特征均值处理以及分类识别。接着深入探讨了 Dlib、NumPy、OpenCV 等关键技术库的应用,特别是 Dlib 人脸检测器接口、人脸预测器接口和人脸识别模型的具体使用方法。最后,本文档介绍了如何通过 Euclidean 距离进行人脸特征比对,实现人脸的成功识别与身份确认。此外,还讨论了人脸识别在实际生活中的多种应用场景和重要意义。 适用人群:具有一定编程基础的软件开发者和技术爱好者,尤其是从事机器学习、图像处理和计算机视觉领域的专业技术人员。 使用场景及目标:①开发人脸识别系统,实现实时图像处理和人脸特征提取;②掌握 Dlib、NumPy、OpenCV 等技术库的实际应用技巧;③深入了解人脸识别技术在安全监控、身份认证、智慧社区等领域的应用。 其他说明:本文档提供了丰富的理论背景和技术实现细节,帮助读者更好地理解和应用人脸识别技术。此外,还包括了一些实用的编码技巧和最佳实践,有助于提高开发效率和代码质量。

    轻量级高性能GO语言开发框架。支持MVC、依赖注入、动态返回.zip

    轻量级高性能GO语言开发框架。支持MVC、依赖注入、动态返回

    stm32的串口hex文件发送与文本文件发送

    stm32的串口hex文件发送与文本文件发送

    广西医科大学在四川2020-2024各专业最低录取分数及位次表.pdf

    那些年,与你同分同位次的同学都去了哪里?全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据,高考志愿必备参考数据

    macOS_Sonoma_14.1.1.rdr.split.003

    macOS_Sonoma_14.1.1.rdr.split.003

    天津财经大学珠江学院在四川2020-2024各专业最低录取分数及位次表.pdf

    那些年,与你同分同位次的同学都去了哪里?全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据,高考志愿必备参考数据

    400699526844862小爱同学.apk

    400699526844862小爱同学.apk

    微信小程序在校内服务平台的应用及开发

    内容概要:本文介绍了基于微信小程序的校园一体化服务平台的设计与开发。该平台利用微信小程序的便捷性和广泛的用户基础,结合JSP技术和MySQL数据库,实现了个人中心、用户管理、寻物启事管理、物品分类管理、失物招领管理、表白广场管理、吐槽大会管理、二手交易管理、交易类型管理、拼车出行管理和系统管理等多项功能。整个系统具有操作简单、易维护、灵活实用等特点。 适合人群:具有一定编程基础的学生和教师,以及希望深入了解微信小程序开发的技术人员。 使用场景及目标:主要用于高校内的信息管理,如失物招领、物品分类、二手交易等,提升校园生活的便捷性和效率,改善用户体验。 其他说明:系统开发过程中,重点考虑了技术可行性、经济可行性和操作可行性,并进行了详细的系统测试,确保系统的稳定性和可靠性。

    Java课程设计之销售管理系统

    (1)课程设计项目简单描述 鉴于当今超市产品种类繁多,光靠人手动的登记已经不能满足一般商家的需求。我们编辑该程序帮助商家完成产品、商家信息的管理,包括产品、客户、供应商等相关信息的添加、修改、删除等功能。 (2)需求分析(或是任务分析) 1)产品类别信息管理:对客户的基本信息进行添加、修改和删除。 2)产品信息管理:对产品的基本信息进行添加、修改和删除。 3)供应商信息管理: 对供应商的基本信息进行添加、修改和删除。 4)订单信息管理:对订单的基本信 息进行添加、修改和删除。 5)统计报表:按选择日期期间,并按产品类别分组统 计订单金额,使用表格显示统计结果

Global site tag (gtag.js) - Google Analytics