首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

HTML (css样式规范)必看篇

所属分类： 网页制作 / HTML/Xhtml 阅读数： 573
收藏 0 赞 0 分享

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样式

XML/HTML Code复制内容到剪贴板
  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就想身份证编号一样，每个都是不同的

XML/HTML Code复制内容到剪贴板
  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.   
  17.         #box{width: 200px;height: 50px;background-color: bisque}  
  18.   
  19.         #boy,#boy1,#boy2{width: 200px;height: 50px;background-color: bisque;  
  20.   
  21.         border: 2px seagreen solid}  
  22.   
  23.         #gil,.doc{width: 200px;height: 50px;background-color: bisque;  
  24.   
  25.         border: 2px seagreen solid}  
  26.   
  27.         /*设置多个共享一个参数*/  
  28.   
  29.    
  30.   
  31.     </style>  
  32.   
  33.    
  34.   
  35. </head>  
  36.   
  37. <body>  
  38.   
  39.     <div id="gil"></div>  
  40.   
  41.     <div class="doc"></div>  
  42.   
  43.     <div class="doc"></div>  
  44.   
  45.    
  46.   
  47. </body>  
  48.   
  49. </html>  
样式结果

标签名选择器

用到多个标签使用相同的属性，可以写成选择器。方面下面所有用到这个标签时共有这个属性

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style type="text/css">  
  7.         /*标签名  选择器*/  
  8.         div{border: 10px salmon solid; width:99px;height: 20px}  
  9.     </style>  
  10. </head>  
  11. <body>  
  12.     <div>周杰伦</div>  
  13.     <div>孙其虎</div>  
  14.     <div>张杰</div>  
  15. </body>  
  16. </html>  

CSS样式的子选择器

XML/HTML Code复制内容到剪贴板
  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.         div b{color: crimson}  
  14.   
  15.         /*只影响 具有div 下的 b子标签受影响*/  
  16.   
  17.         div >b{color: skyblue}  
  18.   
  19.         /*只影响儿子，不影响孙子*/  
  20.   
  21.     </style>  
  22.   
  23. </head>  
  24.   
  25. <body>  
  26.   
  27.     <div><b>美国</b></div>  
  28.   
  29.     <div><b><b>中国</b></b></div>  
  30.   
  31.    
  32.   
  33. </body>  
  34.   
  35. </html>  
样式结果

二、样式优先级

1.CSS执行顺序，在同等优先级的情况下，下一行的如果与上一行的CSS有冲突一下一行为标准

在优先级不同的情况下，优先级高的覆盖优先级的低的。

2.选择器优先级顺序排列

第一名：行内样式 1000;
第二名：ID选择器 100;
第三名：元素名.类名 10;
第四名：类名
第五名：标签名 1;

3.主意事项：

当你写的CSS不起作用的时候，优先检测代码有没有写错
第二检查优先级情况有没有错

XML/HTML Code复制内容到剪贴板
  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.         .red{color: aqua}  
  14.   
  15.         .blue{color: crimson}  
  16.   
  17.         .dce{color: antiquewhite}  
  18.   
  19.         /*在同级中相同的属性，标准调用下面的*/  
  20.   
  21.         div{color: blue}  
  22.   
  23.         /*影响范围越广的，优先级越低*/  
  24.   
  25.    
  26.   
  27.         #blue{ color: springgreen}  
  28.   
  29.         #ket{color: blueviolet}  
  30.   
  31.         div.red{color: aqua}  
  32.   
  33.         /*类名>元素名*/  
  34.   
  35.         /*ID优先级最高*/  
  36.   
  37.         #alex b{color: chartreuse}  
  38.   
  39.         b{color: blue;border: 2px cornsilk solid}  
  40.   
  41.    
  42.   
  43.     </style>  
  44.   
  45. </head>  
  46.   
  47. <body>  
  48.   
  49. <div id="ket" class="red" style="color: black">优先sex</div>  
  50.   
  51. <!--在行内样式最高-->  
  52.   
  53. <div id="blue" class="red">优先</div>  
  54.   
  55. <div class="blue red dce"> 优先级</div>  
  56.   
  57. <div id="alex"><b>中国</b></div>  
  58.   
  59. <b>美国</b>  
  60.   
  61. </body>  
  62.   
  63. </html>  
样式

以上就是小编为大家带来的HTML (css样式规范)必看篇全部内容了，希望大家多多支持脚本之家~

原文地址：http://www.cnblogs.com/pythonxiaohu/archive/2016/06/25/5616511.html

更多精彩内容其他人还在看

XHTML入门学习教程:XHTML超级链接

超级链接<a>标签 毫不夸张的说，是超级链接把整个互联网连接了起来。超级链接几乎可以指向互联网上的任何资源，例如另外一个网页、一张图片、一首MP3歌曲等等。而利用XHTML建立超级链接的语法却非常简单，只需要一对<a></a>标签即可：
收藏 0 赞 0 分享

网页制作解惑:图象文件的路径

本文属于网页教学网闪电儿原创，转载可以去掉这句话，但是不要以任何借口或方式更改文章的内容，否则后果自负！转载请注明作者和出处。 很久以前一直到现在，有好多网友问过我类似的问题，尤其是拷贝了本站的一些图形图像特效代码后，总是图片显示不出来等问题出现，在这
收藏 0 赞 0 分享

HTML教程,简单学习HTML语言

1、<body background=图片文件名 bgcolor=颜色 text=颜色 link=颜色 vlink=颜色 alink=颜色>...</body>标记属性： background:设置网页的背景图像。bgcolor:设置网页的背景颜色。
收藏 0 赞 0 分享

HTML基础:HTML的基本结构

HTML的基本结构 　　超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 <HTML> 　　　<HEAD> 　　　　　　头 部 信 息 　　　</HEAD>
收藏 0 赞 0 分享

HTML教程,认识optgroup元素

select的分类选择,经测试IE和FF都能很好的支持该元素 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S
收藏 0 赞 0 分享

网页输入框的样式触发效果

　　这个例子主要学习两个参数onblur和onFocus.因为这两个参数以前很少遇到,baidu 一下明白了，onblur 是控件在失去焦点的时候触发的事件,而onFocus就是成为输入焦点的时候触发的事件,这两个参数都可以和className结合直接调用样式表类名
收藏 0 赞 0 分享

HTML教程,HTML默认样式

html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4,
收藏 0 赞 0 分享

超链接打开目标(target)的测试

链接的target属性决定了链接在哪边打开，它的值通常为以下五种：_blank、_self、_parent、_top和自定义，依次表示为：新窗口、当前窗口、父窗口、顶层窗口和框架。当所指名称的框架不存在时，自定义作用等同于_blank。今天我们主要测试一下当所指名称的框架处于不同
收藏 0 赞 0 分享

HTML优化加快网页速度

明显HTML，暗渡“公用脚本” 减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时，就可以考虑将这些公用部分单独分离出来。比如：我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件，然后再在页面中按如下
收藏 0 赞 0 分享

XHTML教程,简单认识XHTML基础知识

　　本文简单让大家认识一下XHTML,了解XHTML的基础知识 什么是XHTML 　　XHTML是The Extensible HyperText Markup Language(可扩展标识语言)的缩写。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XM
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22