第二节 命名规范与css样式

1.1

1.1

命名规范

HTML命名规范

 1.见名知意（要用有语义的英文单词）：
 2.不要用中式英文；
 3.不能以数字作为开头，可以作为结尾；
 4.如果是多组名词组成的部分，需要在第二个及以上的首字母使用大写来标记；【小驼峰命名法】
 5.用-横杠来进行命名
 6.不要使用中文命名；

标签使用规范

1.所有书写均在英文半角状态下的小写
2. id，class必须以字母开头
3.所有标签必须闭合
4.html标签用tab键缩进
5、属性值必须带引号；可双向号可单引号
6.ul,li/ol,li/dl,dt,dd拥有父子级关系的标签
7.p,dt,h标签  里面不能嵌套块属性标签；特殊div 可以去嵌套这些
8.a标签不能嵌套a
9.内联元素不能嵌套块

常见块元素：div、ul、li、dl、dt、dd、p、h1-h6
常见的内联元素：a、span、lable、button、textarea、b、strong、select、em

css样式

选择器

1、标签选择器 p{}
2、id选择器 #myid{}
3、通配符选择器 *{}
4、类名选择器 .{}
5、后代选择器 ol li{background-color:pink;}
6、子级选择器: 直接父子 ol>li{background-color:blue;}

样式

• 1.背景

  div{
            width:500px;
            height:500px;
            background-color: deeppink;/* 背景颜色 */
            background-image: url('./img/raoyue.jpg'); /* 引入图片 ：url就是路径； */
            /*background-size: 200px 200px;   背景大小 ：宽度 高度 */
            /*background-size:cover;  cover 覆盖   */
            /* background-repeat: repeat;   */
  
            background-repeat: no-repeat;  
            /* background-repeat: repeat-x;   */
            /* background-repeat: repeat-y;   */
            /* 
                背景是否平铺：
                    no-repeat:不平铺 
                    repeat : 默认值；
                    repeat-x:
            */  
            /* background-position: right center;   */
            /* background-position:0% 50%; */
            /* background-position:0px center; */
            /*
                背景定位 ：
                    默认在左上角:left top
                    水平方向：
                        left 、 center 、 right
                    垂直方向：
                        top 、 center 、 bottom
                单位：
                    可以为方向位left 、 center 、 right；top 、 center 、 bottom
                    可以为百分比；50%；0%；
                    可以为像素单位：100px 100px;
                水平与垂直可以混合使用；
            */
        }

  background-size: 200px 200px;   /*背景大小 ：宽度 高度 */
  background-size:cover;  
  background-size:contain; 
  /*cover：是按照等比缩放铺满整个区域。如果显示比例和显示区域的比例相差很大某些部分会不显示，比如长度比宽度大很多，则宽度左侧会有一部分不显示。(常用) 
  100%：长宽100%显示，可能会拉升图片。 
  contain：也是等比缩放，按照某一边来覆盖显示区域的，会有白边*/
  background-attachment: fixed; /* 背景关联
  scroll：背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。
  fixed： 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格，所以它是不滚动的。
  local：这是CSS3新增的属性值。背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动*/

  背景复合写法

  background:no-repeat   center right/200px 250px rgb(224, 31, 31) url('./img/xinyi.jpg');

• 2.font字体与text

  font-size:16px;   /*默认字体大小为16px */
  font-family:"微软雅黑";  /* Microsoft YaHei默认值 */
  font-weight: normal; /*默认值为normal：自然 */
  font-style:italic; /* 倾斜 */
  
  字体的复合写法
  font: small-caps bold italic 40px "宋体" ; /* 最少两个 */

  文本：

  text-decoratio：none; /*去除下划线*/
  text-align:left;  /* 文本默认为左对齐 center 文本水平居中 justify 实现两端对齐文本效果*/
  white-space:nowrap; /* 文本不要换行 */
  overflow:hidden; /* 文本超出部分进行隐藏； */
  text-overflow:ellipsis; /* 文本显示以省略号显示； */
  display:-webkit-box; /* 改变样式 */
  -webkit-box-orient:vertical; /* 垂直方向排列 */
  -webkit-line-clamp:2; /* 文本需要显示多少行*/
  word-break: break-all; /* 在恰当的断字点进行换行 */
  <!-- 
  vertical-align: 垂直【方向的】对齐方式；
  属性值：
  top 上对齐
  middle 中对齐
  bottom 下对齐
  baseline 基线对齐【默认值】
  
  什么情况才会产生这个垂直对齐方式：
  display:inline / inline-block => 样式 ： 行内 / 行内块；
  块元素会不会【不会产生垂直对齐方式】？为什么?
  特征：独立占居一行；
  text-align: 文本对齐方式[水平方向]；
  left center        right
  -->