您现在的位置是：网站首页> 编程资料编程资料

HTML (css样式规范)必看篇书写CSS的5个小技巧让你的样式更规范让样式表CSS代码更加专业规范 CSS 样式书写规范(推荐)

2023-10-09 372人已围观

简介 下面小编就为大家带来一篇HTML (css样式规范)必看篇。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

CSS样式规范

1.类选择器

2.标签选择器

3.id选择器

4.CSS样式的子选择器

类选择器

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

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

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

3.类选择器语法格式 .类名 （点加类名）

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

4.命名规范

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

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

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

XML/HTML Code复制内容到剪贴板
  1. >  
  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. >  
  2.   
  3. <html lang="en">  
  4.   
  5. <head>  
  6.   
  7.        <meta charset="UTF-8">  
  8.   
  9.        <title>Titletitle>  
  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. 上一篇：HTML中相似的标签和属性的区别详解细数html中的列表标签html中常用的标签总结(必看)HTML5新增加标签和功能概述html meta标签的使用总结(推荐)浅谈Html5中视频 音频标签 进度条的问题HTML块级标签汇总（小篇）HTML标签marquee实现滚动效果的简单方法(必看)

    下一篇：浅谈HTML代码中的空格和空行HTML中的5种空格各表示的意义HTML大于号、小于号、空格、引号等常用的转义代码写法一览表探讨HTML不同空格的特性与表现形式(推荐)浅析html 空格代码HTML/CSS中的空格处理及如何保留页面中的空格

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网