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

HTML (css样式规范)必看篇

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

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

CSS样式规范

1.类选择器

2.标签选择器

3.id选择器

4.CSS样式的子选择器

类选择器

1.必背的固定结构,成为CSS样式标记。所有的样式都可以写成CSS样式的标记中

<style type="text/css">

</style>

2. type=“text/css” 意思是声明这个标记是css样式类型

type:类型的意思
text:文本的意思
css:叠层样式表

3.类选择器语法格式 .类名 (点加类名)

写的位置:在css样式的标记中
调用方法在HTML标签内部写上 class=类名

4.命名规范

建议是纯字母或字母后面加数字,请勿数字开头,其它虽然可以使用请问使用

5.为什么要把行内的css提取到css的标记中

优点一:保持HTML的层次清晰,方便检测错误
优点二:可以重复使用css样式

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4.   
  5. <head>  
  6.   
  7.     <meta charset="UTF-8">  
  8.   
  9.     <title>类选择器</title>  
  10.   
  11.     <style type="text/css">  
  12.   
  13.         /*类选择器*/  
  14.   
  15.         .box{width: 200px; height: 50px; background-color: aqua;border: 10px salmon solid}  
  16.   
  17.     </style>  
  18.   
  19. </head>  
  20.   
  21. <body>  
  22.   
  23. <div class="box"></div>  
  24.   
  25. <div class="box"></div>  
  26.   
  27. <div class="box"></div>  
  28.   
  29.    
  30.   
  31. </body>  
  32.   
  33. </html>  
样式结果

ID选择器

1. ID选择器的语法格式 #ID名称

写的位置:在CSS样式的标记中
调用方法在HTML标签内部写上 id="ID名称"
 
2. 命名规范

同类上一节的类名一样的道理

3. 为什么要把行内的CSS提取到CSS的标记中

优点一:保持HTML的层次清晰,方便检测错误
优点二:区分优先级,如果需要复用请选择类选择器

4. ID不允许重复调用,id就想身份证编号一样,每个都是不同的

  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4.   
  5. <head>  
  6.   
  7.        <meta charset="UTF-8">  
  8.   
  9.        <title>Title</title>  
  10.   
  11.        <style type="text/css">  
  12.   
  13.         /*ID选择器*/  
  14.   
  15.         /*ID唯一标识符的意思,设计的目的就是让id唯一性*/  
  16.   

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

  • HTML表单提交的几种方式_动力节点Java学院整理
  • HTML表单_动力节点Java学院整理
  • HTML大于号、小于号、空格、引号等常用的转义代码写法一览表
  • HTML中实现鼠标经停时整行(tr)变色
  • html格式化json的实例代码
  • html在消息按钮上增加数量角标的实现代码
  • html页面跳转传递参数问题
  • html、css和js注释规范用法小结
  • Html 实现动态显示颜色块的报表效果(实例代码)
  • html是什么文件 html文件如何打开

相关文章

  • 2017-08-05select不支持双击dbclick事件
  • 2017-08-05html无序列表标签和有序列表标签使用示例
  • 2017-08-05如何减少网页的内存使用与CPU占用
  • 2017-08-05HTML教程:title属性与alt属性
  • 2017-08-05为什么使用DOCTYPE HTML
  • 2017-08-05HTML select option基础理解及使用
  • 2017-08-05doctype的markup validation
  • 2017-08-05HTML是网页制作者必须要学习掌握的
  • 2017-08-05各种MOUSE鼠标形状的表示方法
  • 2017-08-05浅析html input 等值改变添加监听事件

文章分类

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

最近更新的内容

    • Form表单的action和onSubmit示例介绍
    • Html+css实现纯文字和带图标的按钮
    • ie6 失真问题
    • 百度输入法开放API 宣称可随意移植使用
    • html无序列表标签和有序列表标签使用示例
    • 用js互相调用iframe页面内的js函数
    • html marquee
    • html动态加载css样式和js脚本示例
    • 二个简单的菜单导航条示例
    • 通过label标记实现单选框点击文字也能选中

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

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