行内样式
通过元素属性style来定义行内样式
Style 属性值是CSS属性字符串通过分号拼接
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 CSS 行内样式</title>
</head>
<body>
<h1 style="color:blueviolet">CSS 测试</h1>
<p style="color:antiquewhite; text-decoration: underline;">
CSS 是web开发三剑客之一
</p>
</body>
</html>
内联样式
通过 head 头部的 <style>
元素来定义
内容按照常规的 CSS 语法书写
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 CSS 行内样式</title>
<style>
h1 {
color:red;
}
p {
color:green;
font-size: 20px;
/* 加粗 */
font-weight: bold;
}
</style>
</head>
<body>
<h1>CSS 测试</h1>
<p>
CSS 是web开发三剑客之一
</p>
</body>
</html>
外联样式
通过 head 头部的 <link>
元素来定义
文件内容按照常规的 CSS 语法书写
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外联样式</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>CSS 测试</h1>
<p>
CSS 外联测试
</p>
</body>
</html>
h1 {
color:red;
}
p {
color:green;
font-size: 20px;
/* 加粗 */
font-weight: bold;
text-decoration: underline;
}
通用选择器
用于选择HTML内部全部元素,也叫全匹配选择器,通常来说用来修改全局的样式,字体等
*{
margin: 0;
padding: 0;
box-sizing: content-box
font-family: 'Courier New', Courier, monospace;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 基本选择器</title>
<style>
*{
margin: 10px;
padding: 10px;
border: 1px solid rebeccapurple;
}
</style>
</head>
<body>
<h1>CSS 基本选择器</h1>
<h2>基本选择器之通用选择器</h2>
<p>通用选择器</p>
<h2>基本选择器之元素选择器</h2>
<p>元素选择器</p>
<h2>基本选择器之类选择器</h2>
<p>类选择器</p>
<h2>基本选择器之ID选择器</h2>
<p>ID选择器</p>
<h2>基本选择器之属性选择器</h2>
<p>属性选择器</p>
</body>
</html>
元素(标签)选择器
用于选择 HTML 一类元素,也称之为标签选择器
h1 {
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 基本选择器</title>
<style>
h2 {
color: blue;
}
p {
color:aquamarine;
}
</style>
</head>
<body>
<h1>CSS 基本选择器</h1>
<h2>基本选择器之通用选择器</h2>
<p>通用选择器</p>
<h2>基本选择器之元素选择器</h2>
<p>元素选择器</p>
<h2>基本选择器之类选择器</h2>
<p>类选择器</p>
<h2>基本选择器之ID选择器</h2>
<p>ID选择器</p>
<h2>基本选择器之属性选择器</h2>
<p>属性选择器</p>
</body>
</html>
类选择器
用于选择HTML一类元素,CSS语法是.classname
,通常用来筛选类名相同的元素,元素本身不需要相同,可以是任意元素
xxxxxxxxxx
* {
margin: 0;
padding: 0;
}
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Selector</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="lesson-card">
<h2 class="important">HTML 基础教程</h2>
<p>This is an amazing lesson.</p>
</div>
<section class="lesson-card">
<h2 class="important">CSS 基础教程</h2>
<p>This lesson is even better!</p>
</section>
<article class="lesson-card">
<h2>JavaScript 基础教程</h2>
<p>Everyone loves this lesson.</p>
</article>
</body>
</html>
xxxxxxxxxx
.important {
color:red;
}
.lesson-card {
border: 1px solid #ccc;
padding: 16px;
margin: 8px;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
ID 选择器 (优先级最高)
用于选择 HTML 内特定元素,语法是#id
,ID选择器的优先级是最高的
xxxxxxxxxx
#header {
background-color: yellow;
}
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Selector</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="lesson-card finish-lesson">
<h2 class="important">HTML 基础教程</h2>
<p>This is an amazing lesson.</p>
</div>
<section class="lesson-card" id="css-lesson">
<h2 class="important">CSS 基础教程</h2>
<p>This lesson is even better!</p>
</section>
<article class="lesson-card" id="javascript-lesson">
<h2>JavaScript 基础教程</h2>
<p>Everyone loves this lesson.</p>
</article>
</body>
</html>
xxxxxxxxxx
.important {
color:red;
}
.lesson-card {
border: 1px solid #ccc;
padding: 16px;
margin: 8px;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.finish-lesson {
border: 2px solid green;
}
#css-lesson {
border: 2px solid blue;
}
#javascript-lesson {
border: 2px solid red;
}
属性选择器
用于选择 HTML 内指定属性的元素,通常来说在表单类元素中应用比较多
xxxxxxxxxx
input[type="test"]{
border: 1px solid red;
}
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>属性选择器</title>
</head>
<body>
<h2>用户注册</h2>
<form>
<input type="text" name="username" placeholder="Enter your username"/>
<input type="password" name="password" placeholder="Enter your password"/>
<input type="email" name="email" placeholder="Enter your emial"/>
<input type="submit" value="Submit" />
</from>
</body>
</html>
xxxxxxxxxx
input[type="text"] {
border: 2px solid green;
padding: 2px;
border-radius: 8px;
margin-bottom: 2px;
}
input[type="email"] {
border: 2px solid rgb(0, 75, 128);
padding: 2px;
border-radius: 8px;
margin-bottom: 2px;
}
input[type="password"] {
border: 2px solid rgb(75, 0, 128);
padding: 2px;
border-radius: 8px;
margin-bottom: 2px;
}
input[type="submit"] {
background-color: green;
color:aliceblue;
border: none;
padding: 5px 10px;
border-radius: 8px;
margin-bottom: 2px;
cursor: pointer;
}
将具有相同 CSS 属性的元素进行分组选择
核心语法是逗号,通过,
将每组分开
xxxxxxxxxx
/*分组选择器应用于 h1, h2, p元素*/
h1, h2, p {
font-family: 'Arial', sans-serif;
color: #333;
margin-bottom: 16px;
}
/*额外的样式可以单独定义*/
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
p {
line-height: 1.6;
color: blue;
}
后代组合器
语法为空格,帮助开发者筛选目标元素后代的所有匹配元素
xxxxxxxxxx
/*后代选择器:选择.course-item内的所有p元素*/
.course-item p {
color: #555;
font-size:14px;
}
/*选择.reviews下的所有p元素*/
.reviews p {
font-style: italic;
color: #888;
}
子组合器
语法为>
,帮助开发者筛选目标元素的第一个子元素
xxxxxxxxxx
/*子组合器:选择.course-item内第一个p元素*/
.course-item > p {
color: #555;
font-size: 14px;
}
相邻兄弟组合器
语法为+
,帮助开发者筛选目标元素相邻的兄弟(后面那个兄弟)元素
xxxxxxxxxx
.description + p {
text-decoration: underline;
color: green;
}
后续兄弟组合器
语法为~
,帮助开发者筛选目标元素的所有兄弟元素
xxxxxxxxxx
.description ~ p {
text-decoration: underline;
color: green;
}
:hover
鼠标悬浮
xxxxxxxxxx
.lesson-card:hover {
border: 2px solid red;
color: blue;
text-decoration: underline;
}
:focus
表单聚焦
xxxxxxxxxx
input:focus {
border-color: red;
outline: none;
}
:nth-child(n)
选择列表当中的第几个元素
xxxxxxxxxx
/*给第二个course-item添加蓝色边框*/
.course-item:nth-child(2) {
border: 2px solid blue;
padding: 10px;
}
:first-child
选择列表的第一个
:last-child
选择列表的最后一个
::before
在元素之前插入内容
xxxxxxxxxx
/*在所有价格前面加美元符号*/
.price::before {
content: "$";
}
::after
在元素之后插入内容
::first-line
为元素第一行文本添加样式
::last-line
为元素最后一行文本添加样式
::first-letter
为元素首字母添加样式
颜色
color
字体颜色
xxxxxxxxxx
h1 {
color: blue;
color: #000000;
color: rgb(0,255,255);
}
background-color:
设置背景颜色 | background:
设置背景(不仅仅是颜色)
xxxxxxxxxx
h1 {
background-color: yellow;
}
div.container {
background: green;
}
字体
font-family:
字体样式
xxxxxxxxxx
body {
font-family: Arial, sans-serif;
}
font-size:
字体大小
xxxxxxxxxx
h1 {
font-size: 32px;
}
font-weight:
字体粗细
xxxxxxxxxx
p {
font-weight: bold;
}
文本
text-align:
设置文本对齐方式
xxxxxxxxxx
h1 {
text-align: center;
}
text-decoration:
文本装饰
xxxxxxxxxx
ulli {
text-decoration: line-through;
text-decoration: underline;
}
line-height:
设置行间距
xxxxxxxxxx
p {
line-height: 2 | 10px | 140%
}
其他属性
布局属性
position:
元素定位
display:
元素类型 display: flex;
小球盒子居中
float:
元素浮动
动画属性
transition:
transform: