zoukankan      html  css  js  c++  java
  • HTML+CSS学习笔记

    一、html和CSS的关系

    1.HTML是超文本格式,它可以包含普通文字,图画,视频,声音的网页;CSS是HTML网页中文字的大小,颜色,边框的大小,颜色的修饰,总的来说CSS就相当于是HTML的外衣;

    二、HTML引入CSS的四种方法

    1.行内式
              行内式是在标HTML标签的style属性中写CSS样式。这种方法层级效应最高。

     <div style="color:red">行内式</div>

    2.嵌入式:

             嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

    <head>
        <style>
           .item{
               color: green;
           }
        </style>
    </head>
    <body>
            <div class="item">嵌入式</div>
    </body>

    3.链接式

            将一个.css格式的外部文件引入到HTML文件中,一般我们使用这种方法,语法如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <link href="mystyle.css" rel="stylesheet" />
    </head>
    
    <body>
    
    </body>
    
    </html>

    4.导入式

          将一个.css格式的外部文件导入HTML文件当中

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <style type="text/css">
            @import"style.css";
        </style>
    </head>
    
    <body>
    
    </body>
    
    </html>

       三、CSS选择器

          1.元素选择器------格式如下(HTML文件中的所有DIV标签跟P标签样式将被设置一下样式)

    <style type="text/css">
          div{
              color: black;
          }
          p{
              color: red;
          }
        </style>

         2.类选择器-------格式如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <style type="text/css">
          .item{
              color: black;
          }
          .item-one{
              color: green;
          }
        </style>
    </head>
    
    <body>
         <div class="item">类选择器</div>
         <div class="item-one">类选择器</div>
    </body>
    
    </html>

          3.id选择器-------格式如下(id选择器在同一个HTML文件中的名字是独一无二的,不能存在两个相同名字的id)

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <style type="text/css">
          #my-id{
              color: black;
          }
        </style>
    </head>
    
    <body>
         <div id="my-id">id选择器</div>
    </body>
    
    </html>

    编不下去了。。。。。。。。。

  • 相关阅读:
    一款前端文件上传工具
    聊一聊最近找工作的感受
    神秘的计算机网络----(1)
    月下无限连?拒绝无休止switch!
    计算机网络---序
    验证码识别
    两数之和
    Sanic框架基础之解决CORS跨域
    Sanic框架进阶之实现异步缓存组件
    asyncio异步模块的21个协程编写实例
  • 原文地址:https://www.cnblogs.com/zhangky/p/8011640.html
Copyright © 2011-2022 走看看