0
点赞
收藏
分享

微信扫一扫

前端基础笔记03

mafa1993 2022-02-17 阅读 106

1.html:5   Tab   补全h5结构

  如:

  <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

</body>

</html>

2.html中的空格合并现象

 html中对缩进空格换行不敏感

 不管有多少空格缩进换行 浏览器只会当做一个空格来解析

 &nbsp 占得是一个汉字的长度,是空格的两倍

 空格  占得是半个汉字的长度

3.如何显示一段标签

  去掉标签的尖括号 <>

  用&lt  &gt代替

二、没有语义的标签

   div 

   1.默认占一整行

   span

   1.宽高跟内容相关

   2.一行可以放多个span标签

   查看div或者span的大小  在浏览器右键检查(审查元素)

   可在浏览器修改  但是并不会修改源码   修改font-size 按向上键

   css中color是字体颜色   没有font-color这个属性

   1.0 英文单词表示

   2.0 16进制表示

       #000000——》#000  6个数12个相同写作一个

                               34个相同写作一个

                               56.。。。。。。

   3.0  RGB表示

 color:rgb(0,0,0);分别对应红绿蓝

rgb表示的颜色范围最广  其次16进制  其次英文单词

字体的连写:

 font:font-style  font-weight  font-size  font-family 

 font:italic      900           20px       "微软雅黑"

 注意:font-style  和  font-weight是可选属性  

       font-size   和  font-family一定要写

4 id选择器与类选择器之间的区别 

  类名 相当于人的姓名  (可以重复)

多对多

1.一个标签可以有多个类名

2.一个类名可以作用于多个标签

 id名 相当于人的身份证号(不可以重复)

       1.只能给一个标签设置这个id名

       2.一个标签只能有一个id名

  一般来说 id名不是给css使用的,而是给javascript使用的

5  id与类名的命名规则

   命名的取值范围只能是

    0-9  a-z  A-Z  _   -     并且不能以数字开头 

6  其它选择器

1 通配符选择器   *{ }

 2 并集选择器

p{ color:red}     ==========》》p,div{ color:red}

div{ color:red}                                

 3 交集选择器

 p.you{ color:red} ===========》》结果会是小明显示红色

 <p class="you">小明</p>

 <p>小白</p>

<div class="you">小红</div>

交集选择器书写时注意:选择器的名称组成中如果有标签名 

                            那么标签名必须写在最前面 

   4 后代选择器

 .father p{ color:red }===========》》结果会显示哈哈  呵呵  嘻嘻红色

  <div class="father">

       <p>哈哈</p>

       <p>呵呵</p>

       <div>

           <p>嘻嘻</p>

       </div>

    </div>

    <p>啦啦</p>


 5 子代选择器

    .father>p{color:red}=============》》将会显示哈哈  呵呵红色

    <div class="father">

       <p>哈哈</p>

       <p>呵呵</p>

       <div>

           <p>嘻嘻</p>

       </div>

    </div>

    <p>啦啦</p>

注释:

   html中的<!---->和css中的/**/ 都是不可以嵌套的  嵌套会导致后面浏览器只识别

                                    第一个>或者*/ 而发生错误

三种样式:

1.嵌套样式

   <style>

      div{color:red}

   </style>

2.行内样式

   <p style="color:red;font-size:20px"></p>

3.外联样式

    新建一个css文件  1.css

   <link rel="stylesheet" href="1.css" type="text/css">

    注意:不需要加上style标签


举报

相关推荐

0 条评论