css基础

最新推荐文章于 2023-08-18 20:40:23 发布
最新推荐文章于 2023-08-18 20:40:23 发布
阅读量176 收藏
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tom199611/article/details/103129696
版权

同时执行两个类选择器。

        .mini{
            font-size: 22px;
        }

        .yellow{
            color: yellow;
        }
        
	<div class="yellow mini">这是第二个div</div>

id选择器

        #p1{
            color: green;
            font-size: 99px;
            font-weight: normal;
        }
	<p id="p1">这是一个p标签</p>

类选择器

	<div class="yellow mini">这是第二个div</div>
	        .yellow{
            color: yellow;
        }
        .mini{
            font-size: 22px;
        }

层级

.box span{}   

	<div class="box">层级选择器主要应用在选择父元素下的<span>子元素</span>，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，<em>防止命名冲突</em>。
	层级选择器主要应用在选择父元素下的子元素，或者子元素下面的<span class="span02">子元素</span>，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
	层级选择器主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
	</div>

选择到两处，

.box .span02{}

	<div class="box">层级选择器主要应用在选择父元素下的<span>子元素</span>，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，<em>防止命名冲突</em>。
	层级选择器主要应用在选择父元素下的子元素，或者子元素下面的<span class="span02">子元素</span>，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
	层级选择器主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
	</div>

只选择到一处

组选择

    <style>
    
    .box01,.box02{

        font-size: 32px;
        color: red;
    }
    
    </style>

<body>

    <div class="box01">这是第一个div</div>
	<div class="box02">这是第二个div</div>
	<div class="box03">这是第三个div</div>

class = box01,or.box02,全部选择到

伪类选择器：

标签之前 a::after
鼠标悬停 a::hover
标签之后 a::before

    <style>
        a{
            color: red;
        }
        a:hover{
            font-size: 32px;
            color:royalblue ;
        }

        .box01::before{
            content: '哈哈';
        }
        .box02::after{
            content: '嘻嘻嘻';
        }
    
    </style>
</head>
<body>
    <a href="http://www.itcast.cn" class="link">传智播客</a>
    <a href="http://www.itcast.cn" class="link">传智播客</a>
	<div class="box01">这是第一个div</div>
	<div class="box02">这是第二个div</div>

div的盒子
在这里插入图片描述

border ：设置边框线
border : solid 5px red;
border：线条格式 粗细 颜色

solid 实线/dashed 虚线
border-top: ;
border-left: ;
border-right: ;

margin: 外边距，同级别控件的距离
margin-top,margin-right,margin-bottm

padding: 内部边距，1 控件边框到内部文字的距离。 2 控件内部的子控件之间的距离

padding-top，padding-right, padding-bottm,padding-left

margin：50px，auto；
上面间隙margin 50px，左右居中

内边距padding 5px： 该标签内部的内容，相距这个标签的距离。
padding 3px,3px,3px,4px; 控件顺时针的边的内距。

text-indent: 50px ; 段落首行缩进50像素点

margin合并 取较大的的一点疑惑

   <style>
        div{
			background-color:gold;
            width:200px;
            height:200px;
            border:solid black 2px;
        }
    
        .box01{
                margin-bottom: 50px;
        }
        .box02{

                margin-top: 30px;
        }
        /* 两块并不是 80px ，而是两者距离取大 */
    
    </style>
</head>
<body>


    <div class="box01">1</div>
	<div class="box02">2</div>

开发中只设置mar-top 让mar-botm = 0px;

在这里插入图片描述

	<div class="box">
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
		<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
	</div>

只设置mar-top = 20 ,不设置mar-btom
然后让最后一个div 设置mar-btom=20px 即可。

margin塌陷

块内文本居中

        display: inline-block;
        text-align: center;

文本在块内的上下居中

        height: 45px;
        line-height: 45px;

首行缩进

text-intent : px;

块的左右居中

marging : 离上面的距离px auto;

margin的技巧

上下div多个重叠，每个div要显示的border 2px的话。
那么上下两个相邻的div的border会重叠两次。4px了
对于div 添加margin-top :-1px 减去一半

    <style>
        .main{
            height: 150px;
            width: 200px;
            background: pink;
            margin: 50px auto;
        }

        .main div{

            height: 30px;
            width: 200px;
            background: yellow;
            border: solid 1px green;
            margin-bottom: -1px;

        }


    </style>
</head>
<body>

    <div class="main">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="last"></div>
    </div>

块在块内的垂直居中？ 怎么做？

文字在块内的垂直居中可以用，line-height : heightpx;
块在块内的垂直居中呢？

塌陷bug

想让内部的块在父块居中，内块设置margin-top ,发现效果传给了 父块的margin-top。

    <style>
        .con{

            width:300px;
            height:300px;
            background-color:gold;
        }
        .box{
			width:200px;
			height:100px;
            background-color:green;
            margin-top: 100px;
        }

    </style>
</head>
<body>
    <div class="con">
        <div class="box"></div>
    </div>

解决塌陷，给父块 加上边框即可。

    <style>
        .con{

            width:300px;
            height:300px;
            background-color:gold;
            border: 1px black solid;
        }
        .box{
			width:200px;
			height:100px;
            background-color:green;
            margin-top: 100px;
            margin-left: 50px;
        }
    
    
    
    </style>
</head>
<body>


    <div class="con">
        <div class="box"></div>
    </div>

第二种解决 塌陷，

溢出设置为 隐藏即可。

    <style>
        .con{

            width:300px;
            height:300px;
            background-color:gold;
            /* border: 1px black solid; */
            overflow: hidden;
        }
        .box{
			width:200px;
			height:100px;
            background-color:green;
            margin-top: 100px;
            margin-left: 50px;
        }
    
    
    
    </style>
</head>
<body>


    <div class="con">
        <div class="box"></div>
    </div>

也就是让 子块的margin-top：生效。

第三种解决塌陷的办法。

伪类选择器

   <style>
        .con{

            width:300px;
            height:300px;
            background-color:gold;
        }

        .con::before{
            content: '';
            display: table;
        }
        
        .box{
			width:200px;
			height:100px;
            background-color:green;
            margin-top: 100px;
            margin-left: 50px;
        }
    
    </style>
</head>
<body>

    <div class="con">
        <div class="box"></div>
    </div>

    .con::before{
        content: '';
        display: table;
    }

溢出部分是否显示？

     overflow: hidden;   超出部分 隐藏
     overflow:visible; 超出部分 显示
    overflow: auto; 超出部分 ，有滑轮滚动。

.box{
overflow:auto;
}

文本，标签上下居中，左右居中：
text-aling
和line-height

固定定位fixed

1.固定定位的时候如何设置居中？

        position: fixed;
        left: 50%;
        margin-left: -350px;

2 给弹框做出 周围暗色效果

弹框的 zindex：999
mask的div 的zindex ：998，定位设置成固定定位。


        .pop{
            height: 280px;
            width: 500px;
            background-color: violet;
            border: 1px black solid;
            position: fixed;
            left: 30%;
            top: 40%;

            z-index: 999;
        }


        .mask{  
            position: fixed;
            height: 100%;
            width: 100%;
            background-color: black;
            opacity: 0.3;
            
            z-index: 998;
        }

    <div>
        <div class="pop"><h1>弹框</h1></div>
        <div class="mask"></div>
    </div>
来杯柠檬茶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础语句
weixin_53968665的博客
12-25 1364
CSS
CSS——CSS基础知识
流楚丶格念的博客
06-26 7995
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础
书启鸿蒙知秋枫
12-28 5961
层叠这个词说明了一种情况，使用不同的选择器可能会同时选择到同一个标签，对这一个标签的同一个属性设置不同的值，就会产生样式重叠。CSS里不仅要使用选择器找到标签，找到标签以后还需要使用CSS的属性键值对设置标签的属性。使用类选择前，需要先给符合一定规律的标签按照特点进行分类，给这些标签添加class属性，再通过class属性来找到对应的元素。CSS不仅可以给HTML的标签添加样式，同时还可以对HTML里的标签进行布局，修改标签的位置。可以根据属性值的不同，给特定的标签设置样式。
CSS基础知识
ashfiqa的博客
01-21 2101
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础知识总结
Lotus_fragrance的博客
04-29 3276
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 2646
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
css基础知识
健康平安的活着的专栏
05-12 1873
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
CSS基础入门（详细总结笔记）
程序员阿龙的博客
08-12 3357
CSS基础入门，详细总结
项目CSS基础样式模板
小琳爱分享的博客
07-23 1152
项目CSS基础样式模板
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础教学1
08-03
CSS基础教学1 CSS是 Cascading Style Sheets 的缩写，译为层叠样式表，是一种用于描述网页样式的语言。CSS主要用于控制网页的布局、颜色、字体、背景等各种样式元素。 在本教程中，我们将学习如何使用CSS对...
css 基础样式 base.css
04-28
css基础样式
css基础.ppt
06-25
css基础教程，适合新手使用，仅供参考
1.03 CSS基础（）
最新发布
10-07
CSS 基础知识点 CSS（层叠样式表）是一种用于为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。它能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式...
学习CSS基础过程笔记
03-26
CSS 基础知识点总结 学习 CSS 基础过程笔记是前端开发者的必备技能之一，本笔记总结了 CSS 的基础知识点，涵盖选择器、常见样式、布局案例等多方面的内容。 选择器 选择器是 CSS 中最基本也是最重要的概念之一。...
CSS 基础使用.md
01-13
CSS 基础使用
CSS基础：浮动与定位详解
"本章主要介绍了CSS基础知识，包括CSS简介、引入CSS的方法、基本选择器、复合选择器以及盒子的浮动与定位等关键概念。CSS是层叠样式表的简称，用于设计网页样式，使网页呈现出丰富的效果。CSS可以应用于HTML、XHTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值