• 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>

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

  • 相关阅读:
    实验六 进程基础
    实验五 shell脚本编程
    实验四 Linux系统搭建C语言编程环境
    实验三 Linux系统用户管理及VIM配置
    实验二 Linux系统简单文件操作命令
    实验一 Linux系统与应用准备
    实验八 进程间的通信
    实验七 信号
    实验六 进程基础
    实验五 shell脚本编程
  • 原文地址:https://www.cnblogs.com/zhangky/p/8011640.html
Copyright © 2020-2023  润新知