【精选】CSS入门必看知识点大合集

CSS简介

在这里插入图片描述

CSS概念

CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表

CSS文件后缀名为.css

CSS用于HTML文档中元素样式的定义

为什么需要CSS

使用css的唯一目的就是让网页具有美观一致的页面

语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值组成

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h3 {color: red;font-size: 50px;}</style>
</head><body><h3>标题标签</h3></body></html>

CSS的引入方式

内联样式(行内样式)

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性

温馨提示

缺乏整体性和规划性,不利于维护,维护成本高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p style="color: red;font-size: 30px;">我是P标签</p>
</body>
</html>

内部样式

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

温馨提示

单个页面内的CSS代码具有统一性和规划性,便于维护,但是在多个页面之间容易混乱

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: red;font-size: 50px;}</style>
</head>
<body><p>我是第一个P标签</p><p>我是第二个P标签</p>
</body>
</html>

外部样式(推荐)

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部

<link rel="stylesheet" type="text/css" href="xxx.css">

选择器一

在这里插入图片描述

CSS语法 规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)

全局选择器

可以与任何元素匹配,优先级最低,一般做样式初始化

<style>*{margin: 0;padding: 0;}
</style>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{color: red;}</style>
</head><body><p>第一个p标签</p><p>第二个p标签</p><p>第三个p标签</p><p>第四个p标签</p><p>第五个p标签</p><h1>一级标题</h1><ul><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul><ul><li></li><li></li><li></li><li></li><li></li></ul></body>
</html>

元素选择器

HTML文档中的元素,p、b、div、a、img、body等。

标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”

<style>p{font-size:14px;}
</style>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: red;}</style>
</head>
<body><p>第一个P标签</p><p>第二个P标签</p><p>第三个P标签</p><p>第四个P标签</p><h3>三级标题</h3>
</body>
</html>

再比如说,我想让“学完前端,继续学Java”这句话中的“前端”两个变为红色字体,那么我可以用<span>标签把“前端”这两个字围起来,然后给<span>标签加一个标签选择器

<style>span{color: green;}
</style>
<p>学完了<span>前端</span>,继续学Java</p>
span{color: red;
}

温馨提示

  1. 所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input、div等
  2. 无论这个标签藏的多深,一定能够被选择上
  3. 选择的所有,而不是一个

类选择器

规定用圆点 . 来定义,针对你想要的所有标签使用

优点

灵活

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{width:800px;
}

class属性的特点

  1. 类选择器可以被多种标签使用
  2. 类名不能以数字开头
  3. 同一个标签可以使用多个类选择器。用空格隔开
<h3 class="classone  classtwo">我是一个h3啊</h3>
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>  // 错误
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red{color: red;}.green{color: green;}.size{font-size: 50px;}</style>
</head>
<body><p class="red size">第一个P标签</p><p class="green">第二个P标签</p><p>第三个P标签</p></body>
</html>

选择器二

ID选择器

针对某一个特定的标签来使用,只能使用一次。css中的ID选择器# 来定义

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#one{color: red;}</style>
</head>
<body><p id="one">第一个P标签</p><p>第二个P标签</p><p>第三个P标签</p>
</body>
</html>
<h2 id="mytitle">你好</h2><style>#mytitle{color: red;}
</style>

特别强调

  1. ID是唯一的
  2. ID不能以数字开头

合并选择器

语法:选择器1,选择器2,...{ }

作用:提取共同的样式,减少重复代码

<style>.p,.san{color: red;}</style>

选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

字体属性

在这里插入图片描述

CSS字体属性定义字体,颜色、大小,加粗,文字样式

color文本的颜色

规定文本的颜色

div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

font-size文本的大小

设置文本的大小

能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

温馨提示

chrome浏览器接受最小字体是12px

font-weight文本的粗细

设置文本的粗细

描述
bold定义粗体字符
bolder定义更粗的字符
lighter定义更细的字符
100~900定义由细到粗 400等同默认,而700等同于bold
H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

font-style文本的字体样式

指定文本的字体样式

描述
normal默认值
italic定义斜体字

font-family字体

font-family属性指定一个元素的字体

温馨提示

每个值用逗号分开

如果字体名称包含空格,它必须加上引号

font-family:"Microsoft YaHei","Simsun","SimHei";
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: #ff0000;font-size: 30px;font-weight: 700;font-style: italic;font-family: "微软雅黑";}</style>
</head>
<body><p>我是P标签</p>
</body>
</html>

背景属性

CSS背景属性主要有以下几个

属性描述
background-color设置背景颜色
background-image设置背景图片
background-position设置背景图片显示位置
background-repeat设置背景图片如何填充
background-size设置背景图片大小属性

background-color背景颜色

该属性设置背景颜色

<div class="box"></div>
.box{width: 300px;height: 300px;background-color: palevioletred;
}

background-image背景图像

设置元素的背景图像

元素的背景是元素的总大小,包括填充和边界(不包括外边距)。默认情况下background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

<div class="box"></div>
.box{width: 600px;height: 600px;background-image: url("images/img1.jpg");
}

background-repeat设置如何平铺背景图像

该属性设置如何平铺背景图像

说明
repeat默认值
repeat-x只向水平方向平铺
repeat-y只向垂直方向平铺
no-repeat不平铺
.box{width: 600px;height: 600px;background-color: #fcc;background-image: url("images/img1.jpg");background-repeat: no-repeat;
}

background-size设置背景图像的大小

该属性设置背景图像的大小

说明
length设置背景图片的宽度和高度,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto
percentage计算相对位置区域的百分比,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto
cover保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain保持图片纵横比并将图像缩放成适合背景定位区域的最大大小
.box{width: 600px;height: 600px;background-image: url("images/img1.jpg");background-repeat: no-repeat;background-size: 100% 100%;
}

background-position设置背景图像的起始位置

该属性设置背景图像的起始位置,其默认值是:0% 0%

说明
left top左上角
left center左 中
left bottom左 下
right top右上角
right center右 中
right bottom右 下
center top中 上
center center中 中
center bottom中 下
x% y%第一个值是水平位置,第二个值是垂直位置,左上角是0% 0%,右下角是100% 100% 。如果只指定了一个值,其他值默认是50%。默认是0% 0%
xpos ypos单位是像素
.box{width: 600px;height: 600px;background-color: #fcc;background-image: url("images/img1.jpg");background-repeat: no-repeat;background-position: center;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 500px;height: 500px;background-color: #ffff00;}.box2{width: 1000px;height: 1000px;background-image: url("1.webp");background-repeat: no-repeat;background-size: cover;background-position: center center;}</style>
</head>
<body><div class="box"></div><div class="box2"></div>
</body>
</html>

文本属性

text-align元素文本的水平对齐方式

指定元素文本的水平对齐方式

描述
left文本居左排列,默认值
right把文本排列到右边
center把文本排列到中间
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

text-decoration下划线、上划线、删除线

text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等

描述
underline定义下划线
overline定义上划线
line-through定义删除线
h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

text-transform控制文本的大小写

text-transform 属性控制文本的大小写

描述
captialize定义每个单词开头大写
uppercase定义全部大写字母
lowercase定义全部小写字母
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

text-indent首行文本的缩进

text-indent 属性规定文本块中首行文本的缩进

p{text-indent:50px;
}

温馨提示

负值是允许的。如果值是负数,将第一行左缩进

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1{text-align: center;text-decoration: underline;text-transform: lowercase;}.p2{text-indent: 30px;}</style>
</head>
<body><p class="p1">这是一个P标签</p><p class="p2">元素的背景是元素的总大小,包括填充和边界(不包括外边距)。默认情况下background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小从图像的左上角显示元素大小的那部分</p>
</body>
</html>

表格属性

使用 CSS 可以使 HTML 表格更美观

表格边框

指定CSS表格边框,使用border属性

table, td { border: 1px solid black; 
}

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

表格宽度和高度

width和height属性定义表格的宽度和高度

table { width:100%; } 
td { height:50px; }

表格文字对齐

表格中的文本对齐和垂直对齐属性

text-align属性设置水平对齐方式,向左,右,或中心

td { text-align:right; }

垂直对齐属性设置垂直对齐

td { height:50px; vertical-align:bottom; }

表格填充

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性

td { padding:15px; }

表格颜色

下面的例子指定边框的颜色,和th元素的文本和背景颜色

table, td, th { border:1px solid green; }  //边框颜色
td { background-color:green; color:white; } //背景颜色  字体颜色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table, td { border: 3px solid black; //表格边框}table{border-collapse: collapse;//表格边框折叠*}table{width: 500px;//表格宽度}td{text-align: center;//表格内文本对齐方式padding: 10px;//表格填充}td{background-color: aqua;color: brown;//表格背景颜色与字体颜色}</style>
</head>
<body><table><tr><td>文本框</td><td>文本框</td><td>文本框</td></tr><tr><td>文本框</td><td>文本框</td><td>文本框</td></tr><tr><td>文本框</td><td>文本框</td><td>文本框</td></tr></table>
</body>
</html>

关系选择器

关系选择器分类

  1. 后代选择器
  2. 子代选择器
  3. 相邻兄弟选择器
  4. 通用兄弟选择器

后代选择器

定义

选择所有被E元素包含的F元素,中间用空格隔开

语法

E F{}
<ul><li>宝马</li><li>奔驰</li>
</ul><ol><li>奥迪</li>
</ol>
ul li{color:green;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul li{color: #00ff00;}</style>
</head>
<body><ul><li>苹果</li><li>香蕉</li><li>蔬菜<ol><li>黄瓜</li><li>茄子</li></ol></li></ul>
</body>
</html>

子代选择器

定义

选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示

语法

E>F{}
<div> <a href="#">子元素1</a><p> <a href="#">孙元素</a> </p><a href="#">子元素2</a>
</div>
div>a{color:red
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div>a{color:red}</style>
</head>
<body><div> <a href="#">子元素1</a><p> <a href="#">孙元素</a> </p><a href="#">子元素2</a></div></body>
</html>

相邻兄弟选择器

定义

选择紧跟E元素后的F元素,用加号表示,选择相邻的第一个兄弟元素,只能向下选择

语法

E+F{}
<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>
h1+p{color:red;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1+p{color:#00ffff;}</style>
</head>
<body><h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p>
</body>
</html>

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F,作用于多个元素,用~隔开,只能向下选择

语法

E~F{}
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
h1~p{color:red;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1~p{color:#00ffff;}</style>
</head>
<body><h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DB2—03(DB2中常见基础操作)

DB2—03&#xff08;DB2中常见基础操作&#xff09; 1. 前言1.1 oracle和mysql相关 2. db2中的"dual"2.1 SYSIBM.SYSDUMMY12.2 使用VALUES2.3 SYSIBM.SYSDUMMY1 "变" dual 3. db2中常用函数3.1 nvl()、value()、COALESCE()3.2 NULLIF() 函数3.3 LISTAGG() …

论文《Unsupervised Dialog Structure Learning》笔记:详解DD-VRNN

D-VRNN模型和DD-VRNN模型 总体架构 离散-可变循环变分自编码器&#xff08;D-VRNN&#xff09;和直接-离散-可变循环变分自编码器&#xff08;DD-VRNN&#xff09;概述。D-VRNN和DD-VRNN使用不同的先验分布来建模 z t z_t zt​之间的转换&#xff0c;如红色实线所示。 x t x_t…

Rust错误处理:Result

文章目录 简介错误匹配 Rust基础教程&#xff1a; 初步⚙ 所有权⚙ 结构体和枚举类⚙ 函数进阶⚙ 泛型和特征⚙ 并发和线程通信⚙ cargo包管理⚙ 可空类型Option Rust进阶教程&#xff1a; 用宏实现参数可变的函数⚙ 类函数宏 简介 Rust中没有提供类似try…catch之类…

【亚太杯思路助攻】2023年第十三届APMCM亚太地区大学生数学建模竞赛——(文末领取方式)

2023年第十三届APMCM亚太地区大学生数学建模竞赛——正式开赛&#xff01;&#xff01;&#xff01; 赛题已由高分雅思学姐翻译完成&#xff0c;我们的O奖学长也在第一时间分析了赛题&#xff0c;帮助大家最快时间&#xff0c;选择最适合是自己的赛题。 B题 C题 祝各位小伙伴都…

[Android]使用Retrofit进行网络请求

以下是使用 Retrofit 发送 POST 请求获取分页城市列表的 Kotlin 代码示例 1.在你的 build.gradle 文件中添加 Retrofit 和 Gson 的依赖 dependencies {......implementation("com.squareup.retrofit2:retrofit:2.9.0")implementation("com.squareup.retrofit2…

排序算法--归并排序

实现逻辑 ① 将序列每相邻两个数字进行归并操作&#xff0c;形成floor(n/2)个序列&#xff0c;排序后每个序列包含两个元素 ② 将上述序列再次归并&#xff0c;形成floor(n/4)个序列&#xff0c;每个序列包含四个元素 ③ 重复步骤②&#xff0c;直到所有元素排序完毕 void pri…

JVM垃圾回收相关算法

目录 一、前言 二、标记阶段&#xff1a;引用计数算法 三、标记阶段&#xff1a;可达性分析算法 &#xff08;一&#xff09;基本思路 &#xff08;二&#xff09;GC Roots对象 四、对象的finalization机制 五、MAT与JProfiler的GC Roots溯源 六、清除阶段&#xff1a;…

基于PCA算法的点云平面拟合

平面拟合 1、平面拟合2、参考文献3、相关代码 1、平面拟合 PCA 是一种数学变换的方法&#xff0c;利用降维的思想在变换中保持变量的总方差不变&#xff0c;将给定的一组变量线性变换为另一组不相关的变量&#xff0c;并且使变换后的第一变量的方差最大&#xff0c;即第一主成分…

浅谈WPF之各种Template

前几天写了一篇文章【浅谈WPF之控件模板和数据模板】&#xff0c;有粉丝反馈说这两种模板容易弄混&#xff0c;不知道什么时候该用控件模块&#xff0c;什么时候该用数据模板&#xff0c;以及template和itemtemplate之间的关系等&#xff0c;今天专门写一篇文章&#xff0c;简述…

富士康转移产线和中国手机海外设厂,中国手机出口减少超5亿部

富士康和苹果转移生产线对中国手机制造造成了巨大的影响&#xff0c;除此之外&#xff0c;中国手机企业纷纷在海外设厂也在减少中国手机的出口&#xff0c;2022年中国的手机出口较高峰期减少了5.2亿部。 手机是中国的大宗出口商品&#xff0c;不过公开的数据显示2022年中国的手…

每日OJ题_算法_双指针_力扣202. 快乐数

力扣202. 快乐数 202. 快乐数 - 力扣&#xff08;LeetCode&#xff09; 难度 简单 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为…

RT-Thread 线程间同步【信号量、互斥量、事件集】

线程间同步 一、信号量1. 创建信号量2. 获取信号量3. 释放信号量4. 删除信号量5. 代码示例 二、互斥量1. 创建互斥量2. 获取互斥量3. 释放互斥量4. 删除互斥量5. 代码示例 三、事件集1. 创建事件集2. 发送事件3. 接收事件4. 删除事件集5. 代码示例 简单来说&#xff0c;同步就是…

DockerHub 无法访问 - 解决办法

背景 DockerHub 镜像仓库地址 https://hub.docker.com/ 突然就无法访问了,且截至今日(2023/11)还无法访问。 这对我们来说,还是有一些影响的: ● 虽然 DockerHub 页面无法访问,但是还是可以下载镜像的,只是比较慢而已 ● 没法通过界面查询相关镜像,或者维护相关镜像了…

【Rxjava详解】(二) 操作符的妙用

文章目录 接口变化操作符mapflatmapdebouncethrottleFirst()takeconcat RxJava 是一个基于 观察者模式的异步编程库&#xff0c;它提供了丰富的操作符来处理和转换数据流。 操作符是 RxJava 的核心组成部分&#xff0c;它们提供了一种灵活、可组合的方式来处理数据流&#xf…

【如何学习Python自动化测试】—— 多层窗口定位

6 、 多层窗口定位 多层窗口指的是在操作系统图形界面中&#xff0c;一个窗口被另一个窗口覆盖的情况。在多层窗口中&#xff0c;如何定位需要操作的窗口&#xff1f; 一种常见的方法是使用操作系统提供的AltTab快捷键&#xff0c;可以在打开的所有窗口中快速切换焦点。如果需要…

20231122给RK3399的挖掘机开发板适配Android12

20231122给RK3399的挖掘机开发板适配Android12 2023/11/22 9:30 主要步骤&#xff1a; rootrootrootroot-X99-Turbo:~$ tar --use-compress-programpigz -xvpf rk356x_android12_220722.tgz rootrootrootroot-X99-Turbo:~$ cd rk_android12_220722/ rootrootrootroot-X99-Tur…

带记忆的超级GPT智能体,能做饭、煮咖啡、整理家务!

随着AI技术的快速迭代&#xff0c;Alexa、Siri、小度、天猫精灵等语音助手得到了广泛应用。但在自然语言理解和完成复杂任务方面仍然有限。 相比文本的标准格式&#xff0c;语音充满复杂性和多样性&#xff08;例如&#xff0c;地方话&#xff09;,传统方法很难适应不同用户的…

【每日OJ —— 20.有效的括号(栈)】

每日OJ —— 20.有效的括号&#xff08;栈&#xff09; 1.题目&#xff1a;20.有效的括号&#xff08;栈&#xff09;2.方法讲解2.1.解法2.1.1.算法讲解2.1.2.代码实现2.1.3.提交通过展示 1.题目&#xff1a;20.有效的括号&#xff08;栈&#xff09; 2.方法讲解 2.1.解法 利用…