• 04003_CSS


    1、DIV相关的技术

      (1)DIV是一个html标签,一个块级元素(单独显示一行)。它单独使用没有任何意义,必须结合CSS来使用,主要用于页面的布局;

      (2)Span是一个html标签,一个内联元素(显示一行)。它单独使用没有任何意义,必须结合CSS来使用,主要用于对括起来的内容进行样式的修饰;

    2、CSS的作用

      (1)HTML:它是整个网站的骨架;

      (2)CSS:它是对整个网站的骨架的内容进行美化(修饰)。

    3、CSS如何使用

      (1)语法和规范

      (2)选择器{

        属性名1:属性值1;

        属性名2:属性值2;

        属性名3:属性值3;

        }

      (3)CSS基本选择器

        ①元素选择器:所有相同

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>元素选择器</title>
     7         <style>
     8             div{
     9                 font-size: 30px;
    10                 color: pink;
    11             }
    12         </style>
    13     </head>
    14     <div></div>
    15     <div></div>
    16     <div></div>
    17     <div></div>
    18     <div></div>
    19 
    20     <body>
    21     </body>
    22 
    23 </html>

      运行结果:

      

        ②类选择器:部分相同

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>类选择器</title>
     7         <style>
     8             .div2 {
     9                 font-size: 30px;
    10                 color: pink;
    11             }
    12         </style>
    13     </head>
    14     <div class="div2"></div>
    15     <div></div>
    16     <div class="div2"></div>
    17     <div></div>
    18 
    19     <body>
    20     </body>
    21 
    22 </html>

      运行结果:

      

        ③id选择器:单个

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>id选择器</title>
     7         <style>
     8             #div5 {
     9                 font-size: 30px;
    10                 color: pink;
    11             }
    12         </style>
    13     </head>
    14 
    15     <body>
    16         <div>id</div>
    17         <div></div>
    18         <div></div>
    19         <div id="div5"></div>
    20     </body>
    21 
    22 </html>

      运行结果:

      

      (4)CSS其他选择器

        ①层级选择器

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>层级选择器</title>
     7         <style>
     8             div p {
     9                 font-size: 30px;
    10                 color: pink;
    11             }
    12         </style>
    13     </head>
    14 
    15     <body>
    16         <div></div>
    17         <div></div>
    18         <div>
    19             <p></p>
    20         </div>
    21         <div></div>
    22         <div></div>
    23     </body>
    24 
    25 </html>

      运行结果:

      

        ②属性选择器

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>属性选择器</title>
     7         <style>
     8             input[type='text']{
     9                 background: red;
    10             }
    11             
    12             input[type='password']{
    13                 background: blue;
    14             }
    15         </style>
    16     </head>
    17 
    18     <body>
    19         用户名:<input type="text" name="username" /><br />
    20          密码:<input type="password" name="password" />
    21     </body>
    22 
    23 </html>

      运行结果:

      

     4、CSS引入方式

      (1)内部引入

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>内部引入元素选择器</title>
     7         <style type="text/css">
     8             div {
     9                 font-size: 30px;
    10                 color: pink;
    11             }
    12         </style>
    13     </head>
    14     <div></div>
    15     <div></div>
    16     <div></div>
    17     <div></div>
    18     <div></div>
    19 
    20     <body>
    21     </body>
    22 
    23 </html>

      运行结果:

      

      (2)行内引入

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>行内引入元素选择器</title>
     7         <style type="text/css">
     8             div {
     9                 font-size: 30px;
    10                 color: pink;
    11             }
    12         </style>
    13     </head>
    14     <div></div>
    15     <div></div>
    16     <div></div>
    17     <div></div>
    18     <!--就近原则,谁近谁生效-->
    19     <div style="font-size: 20px;color: blue;"></div>
    20 
    21     <body>
    22     </body>
    23 
    24 </html>

      运行结果:

      

      (3)外部引入 

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>外部引入元素选择器</title>
     7         <link rel="stylesheet" href="style.css" type="text/css">
     8 
     9         <body>
    10             <div></div>
    11             <div></div>
    12             <div></div>
    13             <div></div>
    14             <div></div>
    15         </body>
    16 
    17 </html>

      在同一目录,新建style.css

    1 div {
    2     font-size: 30px;
    3     color: pink;
    4 }

      运行结果:

      

    5、CSS浮动

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>CSS浮动</title>
     7         <style>
     8             #one {
     9                 border: 1px solid red;
    10                 width: 300px;
    11                 height: 150px;
    12                 float: left;
    13             }
    14             
    15             #two {
    16                 border: 1px solid black;
    17                 width: 300px;
    18                 height: 150px;
    19             }
    20             
    21             #three {
    22                 border: 1px solid blue;
    23                 width: 300px;
    24                 height: 150px;
    25             }
    26             /*清除浮动*/
    27             
    28             #clear {
    29                 clear: both;
    30             }
    31         </style>
    32     </head>
    33 
    34     <body>
    35         <div id="one"></div>
    36         <div id="clear"></div>
    37         <div id="two"></div>
    38         <div id="three"></div>
    39     </body>
    40 
    41 </html>

      运行结果:

      

      

      

    6、CSS盒子模型

      (1)手机---内容(content);

      (2)泡沫---padding;

      (3)手机与包装盒的间距---boder;

      (4)与其他盒子的间距--margin;

      

  • 相关阅读:
    log4net插入access自定义字段
    前端规范
    烤冷面项目进度文档
    响应式布局及bootstrap(实例)
    HTML嵌套规则
    前端规范2-CSS规范
    前端规范1-HTML规范
    入驻博客园
    .net中运用solr提升搜索效率(入门)
    .net 使用validator做数据校验
  • 原文地址:https://www.cnblogs.com/gzdlh/p/8134204.html
Copyright © 2020-2023  润新知