首页 > 其他分享 >css笔记

css笔记

时间:2023-04-03 10:35:02浏览次数:44  
标签:Title color 标签 笔记 height css 选择器 red

3.CSS样式

css,专门用来“美化”标签。

  • 基础CSS,写简单页面 & 看懂 & 改。
  • 模块,调整和修改。

3.1 快速了解

<img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>

3.2 CSS应用方式

1. 在标签上

<img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>

2. 在head标签中写style标签(*)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>

3.写到文件中(*)

.c1{
    height:100px;
}

.c2{
    color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>

3.3 选择器

  • ID选择器

    #c1{
        
    }
    
    <div id='c1'></div>
    
  • 类选择器(最多)

    .c1{
        
    }
    
    <div clss='c1'></div>
    
  • 标签选择器

    div{
        
    }
    
    <div>xxx</div>
    
  • 属性选择器

    input[type='text']{
    	border: 1px solid red;
    }
    .v1[xx="456"]{
    	color: gold;
    }
    
    <input type="text">
    <input type="password">
    
    <div class="v1" xx="123">s</div>
    <div class="v1" xx="456">f</div>
    <div class="v1" xx="999">a</div>
    
  • 后代选择器

    .yy li{
        color: pink;
    }
    .yy > a{
        color: dodgerblue;
    }
    
    <div class="yy">
        <a>百度</a>
        <div>
            <a>谷歌</a>
        </div>
        <ul>
            <li>美国</li>
            <li>日本</li>
            <li>韩国</li>
        </ul>
    </div>
    

关于选择器:

多:类选择器、标签选择器、后代选择器
少:属性选择器、ID选择器

关于多个样式 & 覆盖的问题:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

补充:下面的不要覆盖我。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red !important;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

3.4 样式

1. 高度和宽度

.c1{
    height: 300px;
    width: 500px;
}

注意事项:

  • 宽度,支持百分比。
  • 行内标签:默认无效
  • 块级标签:默认有效(霸道,右侧区域空白,也不给你占用)

2. 块级和行内标签

  • 块级
  • 行内
  • css样式:标签 -> display:inline-block

示例:行内&块级特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;

            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>

    <span class="c1">联通</span>

    <span class="c1">联通</span>

    <span class="c1">联通</span>
</body>
</html>

示例:块级和行内标签的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div style="display: inline;">中国</div>
    <span style="display: block;">联通</span>
</body>
</html>

注意:块级 + 块级&行内。

3.字体设置

  • 颜色
  • 大小
  • 加粗
  • 字体格式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: #00FF7F;
            font-size: 58px;
            font-weight: 600;
            font-family: Microsoft Yahei;
        }
    </style>
</head>
<body>
    <div class="c1">中国联通</div>
    <div>中国移动</div>
</body>
</html>

4.文字对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;

            text-align: center; /* 水平方向居中 */
            line-height: 59px; /* 垂直方向居中 */
        }
    </style>
</head>
<body>
    <div class="c1">郭智</div>
</body>
</html>

5.浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>左边</span>
        <span style="float: right">右边</span>
    </div>
</body>
</html>

div默认块级标签(霸道),如果浮动起来,就不一样了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

如果你让标签浮动起来之后,就会脱离文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: dodgerblue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>
    </div>
    <div>你哦啊呀</div>
</body>
</html>

6.内边距

内边距,我自己的内部设置一点距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话</div>
        <div>
            小朋友你是否下水道发
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话</div>
        <div>
            小朋友你是否下水道发
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding: 20px 10px 5px 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话</div>
        <div>
            小朋友你是否下水道发
        </div>
    </div>
</body>
</html>

7.外边距

外边距,我与别人加点距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
</body>
</html>

案例:小米商场

image-20211119180301990

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .header {
            background: #333;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }

        .header .menu {
            float: left;
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="container">
        <div class="menu">
            <a>小米商城</a>
            <a>MIUI</a>
            <a>云服务</a>
            <a>有品</a>
            <a>开放平台</a>
        </div>
        <div class="account">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

</body>
</html>

总结

  • body标签,默认有一个边距,造成页面四边都有白色间隙,如何去除呢?

    body{
    	margin: 0;
    }
    
  • 内容居中

    • 文本居中,文本会在这个区域中居中。

      <div style="width: 200px; text-align: center;">武沛齐</div>
      
    • 区域居中,自己要有宽度 + margin-left:auto;margin-right:auto

      .container{
          width: 980px;
          margin: 0 auto;
      }
      
      <div class="container">
      	adfasdf
      </div>
      

标签:Title,color,标签,笔记,height,css,选择器,red
From: https://www.cnblogs.com/jzm123/p/17282321.html

相关文章

  • Vue3【Transition(效果、CSS 过渡、使用animation、TransitionGroup、 KeepAlive、Tele
    ......
  • 若分离HTML与CSS,要记得连接外部CSS文件
    使用下列代码即可连接,注意CSS文件名和HTML文件名相同:<linkrel="stylesheet"type="text/css"href="文件名.css">  应放在代码头,如下所示:<!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  &......
  • C#复习笔记-委托
       委托是一种引用类型,委托定义了了一类可以被委托实例调用的方法。它定义了方法的返回值类型和参数类型。定义了一个名为FeedBack的委托,返回一个int类型的值,带有一个int类型的参数。可以将任何类型或者结构中与委托类型匹配的方法传递给委托,可以是静态方法也可以是实例方法......
  • Django笔记十四之统计总数、最新纪录和空值判断等功能
    本篇笔记将介绍一些Django查询中统计总数、最新纪录和空值判断等功能。countin_bulklatest、earliestfirst、lastexistscontains、icontainsgt、gte、lt、ltestartswith、istartswithisnull1、count返回查询的QuerySet的总数。比如想查询Blog下name='hunte......
  • stm32定时器笔记
    参考资料: STM32-定时器详解STM32F103C8T6的学习(5)——定时器TM32定时器之预分频器详解stm32之TIM-基本定时器应用实例(详细)STM32TIM定时时间的计算《STM32单片机应用基础与项目实践》......
  • CSS2
    一、CSS基础1.CSS的编写位置编写位置有3种1.1行内元素<h1style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1>1.2内部样式<style>h1{color:red;font-size:40px;}</style>1.3外部样式建立一个单独的css文件夹,新建一个.css的样式文件如何在HTML文......
  • C++学习笔记
    char和string的区别字符串string:C++string详解,C++字符串详解(biancheng.net)string是字符串类型,是在C的基础上对字符数组做封装,是一个类,有自己的函数,存的是一个完整的字符串,确实是由字符组成的,但不能认为里面是一个个char数据类型组成的。因而单拎出来里面的字符不能认为是cha......
  • Java学习笔记14
    1.Arrays类​ Arrays类包含用于操作数组的各种方法(如排序和搜索)。该类没有构造函数,直接使用类名.方法名()的方法调用需要的方法。常用方法方法作用publicstaticStringtoString(数组)把数组拼接成一个字符串publicstaticintbinarySearch(数组,查找的元素)二......
  • css样式表的书写规范
    在学完css基础后,为了更好的写代码,学习书写规范必不可少,以下是部分规范:命名空间规范1.布局:以g为命名空间,例如:.g-wrap、.g-header、.g-content。2.状态:以s为命名空间,表示动态的、具有交互性质的状态,例如:.s-current、s-selected。3.工具:以u为命名空间,表示不耦合业务逻辑的......
  • 新概念2册L75笔记(复习一般过去时&系动词:变化)
    L75SOS单词理解语法理解一般过去时功能:发生在过去的事情;礼貌委婉。关键词:过去具体时间(yesterday/ago/last…)课文理解......