css简单认识_学习笔记

<!DOCTYPE html>
<html>
<head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
       div{color:red;font-size:100px;}

    </style>
    
   <link rel="stylesheet" type="text/css" href="demo1.css"/>
</head>

<body>
   This is my HTML page. <br>
内嵌样式：
   把css的代码嵌入到html标签中
   <div style="color:red; font-size:100px;"> This is my HTML page.</div>
   语法：
      使用style属性将样式嵌入到html标签中
      属性的写法：    属性：属性值
      多个属性之间使用分号（；）隔开
   不建议使用
内部样式：
   在head标签中使用style标签进行css的引入
   
    语法：
        使用style标签进行css的引入
        
            属性： type：告知浏览器使用css解析器去解析（写法固定）
            属性的写法：    属性：属性值
          多个属性之间使用分号（；）隔开
外部样式：
   将css样式抽取成一个单独的css文件，谁去使用谁就对其引用
   
   语法:
       创建css文件将css属性写在css文件中
       在head中使用link标签进行引入
           
           rel：代表要引入的文件与html的关系
           type：告知浏览器使用css解析器去解析
           href：css文件的地址
       属性的写法：    属性：属性值
      多个属性之间使用分号（；）隔开
@import方式（不常用）
   <style type="text/css">
       @import url("css的文件地址");
    </style>
    link与@import方式区别
       有些浏览器不支持@import，所有浏览器都支持link
       import方式是等待html加载完毕之后在加载，
       import方式不支持js的动态修改

css选择器
   1.基本选择器
       元素选择器（标签选择器）
           语法：html标签名{css属性}
               
       id选择器   id具有唯一性
           <style type="text/css">
               #div1{background-color:red;}
               #div2{background-color:pink;}
           </style>
           <div id="div1">hello css1</div>
           <div id="div2">hello css2</div>
           语法：
               #id的值{css属性}
       class选择器（常用）
           <style type="text/css">
               .style1{background-color:red}
               .style2{background-color:pink}
           </style>
           <div class="style1">div1</div>
           <div class="style1">div2</div>
           <div class="style2">div3</div>
           语法：       ，class的值{css属性}
       id选择器>class选择器>元素选择器       同时对一个标签修饰，id选择器优先权最高
   2.属性选择器
       <style type="text/css">
           input[type='text']{background-color:red}
           input[type='password']{background-color:yellow}
       </style>
       <form   action="">
           name:<input type="text"/>   <br/>
           pass:<input type="password" /><br/>
       </form>
       语法:
           基本选择器[属性='属性值']{css属性}
   3.伪元素选择器(表示状态之间的切换)
       a标签的伪元素选择器
           <style type="text/css">
               a:link{color:blue}
               a:hober{color:red}
               a:active{color:green}
               a:visited{color:black}
           </style>
           <a href="#">请点击</a>
           语法：
               静止状态
                   a:link{css属性}
               悬浮状态
                   a:hover{css属性}
               触发状态
                   a:active{css属性}
               完成状态
                   a:visited{css属性}
   4.层级选择器
       <style type="text/css">
           #d1 .class2 span{color:red}
       </style>
           <div id="d1">
               <div class="class1">
                   <span>span1</span>
               </div>
               <div>
                   <span class="class2">span2</span>
               </div>
           </div>
           <div id="d2">
               <div class="class1">
                   <span>span1</span>
               </div>
               <div>
                   <span class="class2">span2</span>
               </div>
           </div>
       语法：父级选择器子级选择器 ......
css属性
   1.文字属性
       font-size：字体大小
       font-family：字体类型
   2.文本属性
       color：字体颜色
       text-decoration：下划线
           属性值：none underline（有下划线）
       text-align：对齐方式
           属性值：left right center
   3.背景属性
       background-color：背景颜色
       background-image：背景图片
           属性值的格式：   url("图片地址");
       background-repeat:平铺方式
           属性值：no-repeat（不平铺） repeat-x（横向平铺） repeat-y（纵向平铺） repeat（默认横向纵向平铺）
   4.列表属性
       <style type="text/css">
           ul{list-style-type:decimal-leading-zero;}
           ul{list-style-image:url("images/a.gif");}
       </style>
       <ul>
           <li>111111</li>
           <li>222222</li>
           <li>333333</li>
           <li>444444</li>
       </ul>

       list-style-type:列表项前的小标志
           属性值：...
       list-style-image:列表项前的小图片
           属性值：url("图片地址");
   5.尺寸属性
       <style type="text/css">
           #d1{width:100px;height:200px;background-color:red;}
       </style>
       <div id="d1">div1</div>
       width:宽度
       height:高度
   6.显示属性
       display:
           属性值：
               none：隐藏
               block：块级显示
               inline：行级显示
       使用案例
       <form action="">
               name:<input id="name" type="text" /><span id="span">对不起输入不符合要求</span>
               <br>
               pass:<input id="pass" type="password" />
               <br>
               <input id="btn" type="button" value="button" />
           </form>
           <style type="text/css">
               span{color:red;display: none}
           </style>
           <script type="text/javascript">
               document.getElementById("btn").onclick = function(){
                   document.getElementById("span").style.display = "inline";
               };
           </script>
   7.浮动属性
       float:
           属性值：left right
                   clear:清除浮动 left right both
           缺点：   (1)影响相邻元素不能正常显示
                   (2)影响父元素不能正常显示
盒子模型
   <style type="text/css">
       #moooncake{width:100px;height:100px;background-color:red;}
       #box{width:100px;height:100px;border:10 px solid green;padding:20px;margin:50px;}
   </style>
   <div id="box">
       <div id="mooncake">
           花里胡哨
       </div>
   </div>
   border:
       border-style:边框的线型
       border-color:边框的颜色
       border-width:边框的宽度

       border-top:上边框
       border-bottom：下边框
       border-left：左边框
       border-right：右边框
   padding:代表边框内部与内部元素之间的距离
       padding：10px               上下左右都是10px
       padding：1px 2px 3px 4px       上右下左分别是1px 2px 3px 4px
       padding：1px 2px               上下是1px 左右是2px
       padding:1px 2px 3px           上是1px 下是3px 左右是2px
       padding-top:               单独设置
   margin：代表边框外壁与其他元素之间的距离
       margin：10px                   上下左右都是10px
       margin：1px 2px 3px 4px       上右下左分别是1px 2px 3px 4px
       margin：1px 2px               上下是1px 左右是2px
       margin:1px 2px 3px           上是1px 下是3px 左右是2px
       margin-top:                   单独设置
</body>
</html>

css简单认识_学习笔记

猜你喜欢