【精选】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之类…

qt双击treeview节点之后,完成编辑,获取完成编辑得信号

Qt 中&#xff0c;要获取 QTreeView 节点完成编辑的信号&#xff0c;您可以使用 QTreeView 的 doubleClicked 信号以及重写相应的编辑触发函数。通常情况下&#xff0c;完成编辑后会触发 closeEditor 信号。 以下是一个示例代码&#xff0c;演示了如何实现这个功能&#xff1a…

【亚太杯思路助攻】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…

C#结合JavaScript实现上传视频到腾讯云点播平台

目录 需求 关键代码 界面元素布局 C# 实现服务端的签名类 上传视频的JS实现 视频演示 小结 需求 在云培训系统里&#xff0c;制作视频课件是我们的主要工作之一&#xff0c;制作完成后如果将这些素材存储到服务器并进行分发播放&#xff0c;是摆在我们面前的一个问题。…

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;即第一主成分…

OpenCV将两张图片拼接成一张图片

OpenCV将两张图片拼接成一张图片 示例代码1示例代码2 可以用opencv或者numpy的拼接函数&#xff0c;直接将两张图拼接到一起&#xff0c;很简单方便&#xff0c;参考代码2&#xff0c;推荐此方式。新建图片&#xff0c;将两张图片的像素值填充到新图片对应位置上即可&#xff0…

leetcode 32最长有效括号 34在排序数组中查找元素的第一个和最后一个位置

32. 最长有效括号 给你一个只包含 ( 和 ) 的字符串&#xff0c;找出最长有效&#xff08;格式正确且连续&#xff09;括号子串的长度。 示例 1&#xff1a; 输入&#xff1a;s "(()" 输出&#xff1a;2 解释&#xff1a;最长有效括号子串是 "()" 示例 2&a…

python 二分查找函数应用——bisect_left(nums,target),bisect_right(nums,target)

bisect_left(nums,target),bisect_right(nums,target)是python内置的函数&#xff0c;可以便捷的帮我们完成一些有序序列的查找工作&#xff0c;现在将用三个样例进行讲解演示 前提注意事项&#xff1a; 导入函数模块 待处理序列必须有序&#xff01;&#xff01;&#xff0…

浅谈WPF之各种Template

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

26 - 原型模式与享元模式:提升系统性能的利器

原型模式和享元模式&#xff0c;前者是在创建多个实例时&#xff0c;对创建过程的性能进行调优&#xff1b;后者是用减少创建实例的方式&#xff0c;来调优系统性能。这么看&#xff0c;你会不会觉得两个模式有点相互矛盾呢&#xff1f; 其实不然&#xff0c;它们的使用是分场…

TC397 EB MCAL开发从0开始系列 之 [15.1] Fee配置 - 双扇区demo

一、Fee配置1、配置目标2、目标依赖2.1 硬件使用2.2 软件使用2.3 新增模块3、EB配置3.1 配置讲解3.2 模块配置3.2.1 MCU配置3.2.2 PORT配置3.2.3 Fls_17_Dmu配置3.2.4 Fee配置3.2.5 Irq配置3.2.6 ResourceM配置4、ADS代码编写及调试4.1 工程编译4.2 测试结果4.3 测例源码->

2023年学习Go语言是否值得?探索Go语言的魅力

关注公众号【爱发白日梦的后端】分享技术干货、读书笔记、开源项目、实战经验、高效开发工具等&#xff0c;您的关注将是我的更新动力&#xff01; 作为一门流行且不断增长的编程语言&#xff0c;Go语言在2023年是否值得学习呢&#xff1f;让我们来看看学习Go语言的好处以及为何…

Java使用Maven打包jar包的全部方式

1. spring-boot-maven-plugin插件&#xff08;在springboot项目中使用&#xff09; <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><executions><execution><goals>…