CSS之我不会

news2024/9/21 20:32:59

一、选择器

作用：选择页面上的某一个后者某一类元素

基本选择器

1.标签选择器

格式：标签{}

<h1>666</h1>

<style>
 	h1{
 		css语法
 	}
</style>

2.类选择器

格式：.类名{}

<h1 class="name">666</h1>
<style>
	.name{
		css语法
	}
</style>

3.id选择器

格式：#名称{}

<h1 id="name">666</h1>
<style>
	#name{
		css语法
	}
</style>

高级选择器（只说一个id+class组合）

格式：id

<style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            line-height:50px;
            font: bold 20px/50px Arial;
        }
        /*
        属性名,属性名 = 属性值（正则）
              = 表示绝对等于
             *= 表示包含
             ^= 表示以...开头
             $= 表示以...结尾
             存在id属性的元素
                a[]{}
         */
        a[id]{
        /*
        a标签使用id的元素
        */
            background: deeppink;
        }
        a[id=first]{
            /*
            id=first的元素
            */
            background: greenyellow;
        }

        a[class*="links"]{
            /*
            class 中有links的元素
            */
            background: green;
        }

        a[href^=http]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
        a[href$=pdf]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
</style>

<p class="demo">
    <a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a>
    <a href="" class="links item active" target="_blank " title="test">链接</a>
    <a href="img/hello.html" class="links item">网页</a>
    <a href="img/str1.png" class="links item">png</a>
    <a href="img/str2.jpg" class="links item">jpg</a>
    <a href="abc" class="links item">链2</a>
    <a href="/fy.pdf" class="links item">pdf</a>
    <a href="/quit.pdf" class="links item">pdf2</a>
    <a href="dump.doc" class="links item">doc</a>
    <a href="kiko.doc" class="links item last">doc2</a>
</p>

二、美化

1.字体 font

  1. font-family：字体
  2. font-size：字体大小
  3. font-weight：字体粗细
  4. color：字体颜色

2.文本样式 text

  1. 文本对齐方式：text-align：center
  2. 首行缩进: text-indent：2em
  3. 行高: line-height：300px
  4. 下划线:text-decoration
  • text-decoration:underline /下划线/
  • text-decoration:line-through /中划线/
  • text-decoration:overline /上划线/
  • text-decoration:none /超链接去下划线/
  1. 图片、文字水平对齐 （行内元素对齐）
img,span{
    vertical-align: middle;
}

6.文本阴影

<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>

<h1>文本阴影效果！</h1>

在这里插入图片描述

3.超链接伪类

	<style>
        /*超链接有默认的颜色*/
        a{
            text-decoration: hotpink;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: dodgerblue;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color:green
        }
        /*点击之后的状态*/
        a:visited{
            color:mediumpurple;
        }
    </style>

列表 ui li

有序 ui li
无序 ol li
list-style-type: circle
list-style-type: square
list-style-type: upper-roman
list-style-type: lower-alpha

背景

1.背景颜色 background-color

2.透明度 opacity

3.背景图片 background-image: url("name.jpg")

三、布局

布局三大核心：盒子模型、浮动、定位

1.元素的显示模式

1.块元素（block）

又称：块级元素 特点：

  1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
  2. 默认宽度：撑满父元素。
  3. 默认高度：由内容撑开。
  4. 可以通过 CSS 设置宽高。
  1. 主体结构标签： <html> 、 <body>
  2. 排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
  3. 列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
  4. 表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、 <caption>
  5. <form> 与 <option>

2.行内元素（inline）

又称：内联元素 特点:

  1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排 列。
  2. 默认宽度：由内容撑开。
  3. 默认高度：由内容撑开。
  4. 无法通过 CSS 设置宽高。
  1. 文本标签： <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
  2. <a> 、 <label>、<span>、<input>

3.行内块元素（inline-block）

又称：内联块元素 特点：

  1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排 列。
  2. 默认宽度：由内容撑开。
  3. 默认高度：由内容撑开。
  4. 可以通过 CSS 设置宽高。
  1. 图片： <img>
  2. 单元格： <td> 、 <th>
  3. 表单控件： <input> 、 <textarea> 、 <select> 、 <button>
  4. 框架标签： <iframe>

2.盒子模型

在这里插入图片描述

网页布局过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
  2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 （难点）
  3. 往盒子里面装内容

3.盒子模型（Box Model）组成

在这里插入图片描述

1.边框

 border : border-width || border-style || border-color;

在这里插入图片描述
边框样式 border-style 可以设置如下值：

  • none：没有边框即忽略所有边框的宽度（默认值）
  • solid：边框为单实线(最为常用的)
  • dashed：边框为虚线
  • dotted：边框为点线

2.内边距（padding）

和写属性
在这里插入图片描述
分写属性
在这里插入图片描述

3.外边距（margin）

在这里插入图片描述

margin 注意事项：

  1. 子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着 子元素）
  2. 上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素 的位置。
  3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。
  4. margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级 元素会在父元素中水平居中。
  5. margin 的值可以是负值

4.处理内容溢出

在这里插入图片描述

注意：

  1. overflow-x 、 overflow-y 不能一个是 hidden ，一个是 visible ，是实验性属性，不 建议使用。
  2. overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多 疑难杂症。

5.布局小技巧（重点）

  1. 行内元素、行内块元素，可以被父元素当做文本处理。

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如： text-align 、 line-height 、 text-indent 等。

  1. 如何让子元素，在父亲中 水平居中：

若子元素为块元素，给父元素加上： margin:0 auto
若子元素为行内元素、行内块元素，给父元素加上：text-align:center

  1. 如何让子元素，在父亲中 垂直居中：

若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子 总高) / 2。
若子元素为行内元素、行内块元素： 让父元素的 height = line-height ，每个子元素都加上： vertica

四、浮动 float

1.简介

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
在这里插入图片描述

2.元素浮动后的特点

  1. 🤢脱离文档流。
  2. 😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽
    高。
  3. 😊不会独占一行，可以与其他元素共用一行。
  4. 😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
  5. 😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。

3.解决浮动产生的影响

3.1元素浮动后会有哪些影响

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟 无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

3.2 解决浮动产生的影响（清除浮动）

解决方案：

  1. 方案一： 给父元素指定高度。
  2. 方案二： 给父元素也设置浮动，带来其他影响。
  3. 方案三： 给父元素设置 overflow:hidden 。
  4. 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
  5. 方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推
    荐使用
.parent::after {
content: "";
display: block;
clear:both;
}

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2109120.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

uniapp组件知识记录

uniapp组件知识记录

style标签的lang <template><view class"content"><h1 class"test"><span class"test1">我</span></h1>是谁</view> </template><style lang"scss">.content {// content中允…
阅读更多...
基于Java+SpringBoot+Vue+MySQL的高校物品捐赠管理系统

基于Java+SpringBoot+Vue+MySQL的高校物品捐赠管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于SpringBootVue的高校物品捐赠管理系统【附源码文档】、…
阅读更多...
数据结构代码集训day17（适合考研、自学、期末和专升本）

数据结构代码集训day17（适合考研、自学、期末和专升本）

习题来自B站up&#xff1a;白话拆解数据结构 今日习题如下&#xff1a; 1、写出二叉树的前、中、后序遍历 2、写出二叉树的非递归前序和中序遍历 二叉树有多种存储结构&#xff1a;双亲存储法、孩子兄弟链存储结构&#xff0c;二叉链表存储结构等&#xff0c;一般我们写代码题…
阅读更多...
如何实现一个定时任务？六种策略可实现

如何实现一个定时任务？六种策略可实现

目录标题 1、自定义单线程2、JDK ScheduledExecutorService3、 Spring Task4、Quartz5、Elastic-job6、xxl-job最后&#xff1a;思考更上一层1. 高性能2. 高并发3. 高可用 设计方案 1、自定义单线程 上图中&#xff0c;我们启动一个线程&#xff0c;该线程无限循环执行&#xf…
阅读更多...
STM32高级定时器生成互补PWM的原理与代码实现

STM32高级定时器生成互补PWM的原理与代码实现

文章目录 前言一 CubeMx配置1.1 TIM1 Mode and Configuration1.2 Paramter Settings 二 程序代码三 仿真分析总结 前言 互补 PWM&#xff08;Complementary PWM&#xff09;是指一对逻辑状态互为反相的 PWM&#xff08;脉冲宽度调制&#xff09;信号。这种信号配置常见于电机控…
阅读更多...
SQL进阶技巧：如何利用SQL解决趣味赛马问题？| 非等值关联匹配问题

SQL进阶技巧：如何利用SQL解决趣味赛马问题？| 非等值关联匹配问题

目录 0 问题描述 1 数据准备 2 问题分析 方法一：先分后合思想 方法2：非等值关联匹配 3 小结 0 问题描述 有一张赛马记录表，如下所示： create table RacingResults ( trace_id char(3) not null,race_date date not null, race_nbr int not null,win_name char(30) n…
阅读更多...
探索 Redis Set：命令、编码与应用实践

探索 Redis Set：命令、编码与应用实践

set 类型 一 . 常见命令1.1 sadd、smembers1.2 sismember1.3 spop、srandmember1.4 smove1.5 srem1.6 集合间操作交集 : sinter、sinterstore并集 : sunion、sunionstore差集 : sdiff、sdiffstore 小结 二 . 内部编码6.3 应用场景6.3.1 使用 Set 来保存用户的标签6.3.2 使用 Se…
阅读更多...
android kotlin基础复习 enum

android kotlin基础复习 enum

1、kotlin中&#xff0c;关键字enum来定义枚举类型。枚举类型可以包含多个枚举常量&#xff0c;并且每个枚举常量可以有自己的属性和方法。 2、测试代码&#xff1a; enum class Color{RED,YELLOW,BLACK,GOLD,BLUE,GREEN,WHITE }inline fun <reified T : Enum<T>>…
阅读更多...
Qt工程实践_06_Qt MSVC2O17编译器下的程序添加VS2017生成的动态链接库方法

Qt工程实践_06_Qt MSVC2O17编译器下的程序添加VS2017生成的动态链接库方法

文章目录 1. 利用VS2017生成动态链接库1.1 创建C++空项目1.2 添加.h和.cpp内容：添加了一个减法运算1.3 设置动态链接库目标计算机类型1.4 设置项目属性为动态库1.5 生成项目，复制需要的文件2. Qt程序使用VS2017生成的动态链接库方法2.1 创建Widget程序2.2 链接动态库文件2.2.…
阅读更多...
蚂蚁SEO｜AI养站程序是什么｜蚂蚁蜘蛛池

蚂蚁SEO｜AI养站程序是什么｜蚂蚁蜘蛛池

《AI 养站程序&#xff1a;开启网站运营新未来》 在当今数字化时代&#xff0c;网站运营的重要性日益凸显。而 AI 养站程序的出现&#xff0c;为网站运营者带来了全新的机遇与挑战。 一、什么是 AI 养站程序 AI 养站程序是利用人工智能技术&#xff0c;对网站进行自动化管理和优…
阅读更多...
MacBook air pro验机流程

MacBook air pro验机流程

由于苹果电脑价格相对较高&#xff0c;用户在网上购置之后&#xff0c;最好对机器要进行一下验机&#xff0c;以确保自己所购置的机器为原厂正品一手机。此外&#xff0c;在网上购置时&#xff0c;注意开相应的发票&#xff0c;方便后续的保修和换机等其他流程。 本文主要是介绍…
阅读更多...
中小学生学籍照片（390×480蓝底）手机拍照制作流程说明

中小学生学籍照片（390×480蓝底）手机拍照制作流程说明

近期各地中小学陆续开学&#xff0c;幼升小及小升初一年级新生一般要在十月份之前完成学籍档案采集&#xff0c;其中就包括了新生学籍证件照的采集&#xff08;即学籍照片&#xff09;&#xff0c;部分中部省份使用的学籍照片像素尺寸为390&#xff08;宽&#xff09;480&#…
阅读更多...
[C#学习笔记]注释

[C#学习笔记]注释

官方文档&#xff1a;Documentation comments - C# language specification | Microsoft Learn 一、常用标记总结 1.1 将文本设置为代码风格的字体&#xff1a;<c> 1.2 源代码或程序输出:<code> 1.3 异常指示:<exception> 1.4 段落 <para> 1.5 换行&…
阅读更多...
Vue+Element多套主题切换

Vue+Element多套主题切换

Vue3.x Element Plus与Vue2.x Element ui多套主题的切换方案 demo地址 VueElement更换主题: Vue Element项目&#xff0c;更换几套主题的方案 思路很简单&#xff0c;就是写好每套样式&#xff0c;写个切换功能&#xff0c;切换主题即可 具体实现方案&#xff1a; 准备多…
阅读更多...
物联网技术推动灌区智能化管理

物联网技术推动灌区智能化管理

物联网技术&#xff0c;作为信息技术革命的重要组成部分&#xff0c;正深刻地改变着传统行业的运作模式&#xff0c;其中在农业灌溉领域的应用尤为显著&#xff0c;为灌区的智能化管理开辟了新径。这一技术通过将传感器、智能网关、大数据分析与云平台紧密融合&#xff0c;实现…
阅读更多...
What is Node.JS and its Pros and Cons

What is Node.JS and its Pros and Cons

What is Node.JS and its Pros and Cons JavaScript is a client-side development tool. Node.js is a server-side development tool. And it’s only a runtime environment based on Chrome V8 so we don’t write some code in Node.js. Pros: JavaScript on a server …
阅读更多...
TypeScript 在 Vue.js 中的应用指南

TypeScript 在 Vue.js 中的应用指南

在前端开发中&#xff0c;TypeScript 和 Vue.js 的组合越来越受到青睐。TypeScript 的强类型系统和 Vue.js 的组件化架构相得益彰&#xff0c;可以帮助你编写更可靠和易维护的代码。如果你已经掌握了 TypeScript 的基本语法&#xff0c;但不太确定怎么将它与 Vue.js 配合使用&a…
阅读更多...
opencv 实现两个图片的拼接去重功能

opencv 实现两个图片的拼接去重功能

基础知识介绍 cv::Mat 是OpenCV库中用来表示图像和矩阵数据的核心类之一。它是一个多维数组&#xff0c;可以存储图像像素数据、矩阵数据以及其他类型的数据。以下是关于 cv::Mat 类的一些详细解释&#xff1a; 构造函数&#xff1a;cv::Mat 类有多个构造函数&#xff0c;可以用…
阅读更多...
JavaWeb(后端)

JavaWeb(后端)

Maven Apache Maven 是一个项目管理和构建工具&#xff0c;它基于项目对象模型(POM)的概念&#xff0c;通过一小段描述信息来管理项目的构建。 Maven的作用 依赖管理&#xff1a;方便快捷的管理项目依赖的资源(jar包)&#xff0c;避免版本冲突问题。 统一项目结构&#xff…
阅读更多...
Leetcode22括号生成(java实现)

Leetcode22括号生成(java实现)

今天分享的题目是Leetcode22括号生成&#xff0c;具体的题目描述如下&#xff1a; 本道题我们使用的解法是回溯。 解题思路&#xff1a; 我们主要是对括号出现的可能性进行一个收集。 我们以n2举例子&#xff0c;如下图 如果想要合法&#xff0c;那么一定是左括号开始&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023