zoukankan      html  css  js  c++  java
  • 02-CSS基础与进阶-day2_2018-08-27-20-15-54

    css的书写位置
    1 内部样式 在head标签内部引入一style标签,在style标签内部写的css属于内部样式
    或者叫内联式
    2 行内样式
    <div style="font-size: 30px;">我很喜欢学习CSS,因为可以让网页变得美化</div>
    行内样式用的比较少,一般样式很少情况下可以采用行内式
    3 外部样式
    <link rel="stylesheet" href="index.css" type="text/css"/>
    项目中推荐使用,便于样式和结构分离和维护
    css元素的分类
    1 块级元素
    这些元素可以独占一行,宽高可以设置,假如不设置宽度,默认是父亲的100%
    如div、p、h1~h6,nav、header、section等
    2 行内元素
    这些元素可以并排(行内元素与行内元素),设置宽高无效,宽高由内容撑开
    如 span a em strong i 等
    3 行内块元素
    这些元素可以设置宽高,同时可以并排
    如 input img等
    css元素的转化
    display: inline; /*其他元素转行内元素*/
    display: block; /*其他元素转块级元素*/
    display: inline-block; /*把其他元素转行内块元素*/
    css
    选择器和样式属性
    选择器:标签选择器 id选择器 class选择器 通配符选择器
    结构性选择器 伪类选择器
    复合选择器(css2) 交集选择器(标签指定式) 并集选择器 后代选择器

     01css书写位置之内部样式.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
             /* css代码*/
             div  {
                 color: red;
             }
        </style>
    </head>
    <body>
        <div>我是内部样式作用的</div>
    </body>
    </html>

    02css行内样式.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div style="font-size: 30px;color:pink;">我很喜欢学习CSS,因为可以让网页变得美化</div>
    </body>
    </html>

    03css之外部样式.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link  rel="stylesheet"  href="index.css" type="text/css"/>
    </head>
    <body>
        <p>外部样式</p>
    </body>
    </html>

    index.css

    p {
        color: purple;
        font-size: 26px;
    }
  • 相关阅读:
    HDU 1058 Humble Numbers
    HDU 1160 FatMouse's Speed
    HDU 1087 Super Jumping! Jumping! Jumping!
    HDU 1003 Max Sum
    HDU 1297 Children’s Queue
    UVA1584环状序列 Circular Sequence
    UVA442 矩阵链乘 Matrix Chain Multiplication
    DjangoModels修改后出现You are trying to add a non-nullable field 'download' to book without a default; we can't do that (the database needs something to populate existing rows). Please select a fix:
    opencv做的简单播放器
    c++文件流输入输出
  • 原文地址:https://www.cnblogs.com/HiJackykun/p/11041857.html
Copyright © 2011-2022 走看看