首页 > 其他分享 >css笔记

css笔记

时间：2023-04-03 10:35:02浏览次数：43  
标签：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…)课文理解......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99