II.css
CSS：层叠样式表
层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题
1.样式
行内样式
<!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> <div style="width: 700px; height: 50px; background-color: pink;">我是一个盒子</div> </body> </html>
内部样式表
<!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 {
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
外部样式
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./13-外部样式.css"> </head> <body> <div></div> </body> </html>
css
div {
width: 300px;
height: 300px;
background-color: pink;
}
2.css选择器
1.基础选择器
<!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 {
color: rgb(32, 27, 28);
}
/* id选择器 #id*/
#box1 {
color: rgb(6, 106, 194);
}
/* 类选择器 .类名 */
.box1 {
background-color: pink;
}
/* 通配符选择器 选中所有的元素*/
* {
font-size: 60px;
}
</style>
</head>
<body>
<div>我是一个不允许编辑的盒子</div>
<p>我是一段文字</p>
<h1 class="box1">我是标题</h1>
<div id="box1">我是一个不允许编辑的盒子</div>
<div class="box1">我是一个不允许编辑的盒子</div>
</body>
</html>
.标签选择器
h1 {
color: rgb(32, 27, 28);
}
.id选择器
#box1 {
color: rgb(6, 106, 194);
}
.类选择器
.box1 {
background-color: pink;
}
.通配符选择器
* {
font-size: 60px;
}
2.包含选择器
<!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 {
background-color: pink;
}
/* 后代选择器 */
/* css样式表存在层叠性，后边的会将前边的覆盖掉 */
ul li {
background-color: aqua;
}
ul div>li {
background-color: brown;
}
</style>
</head>
<body>
<ul>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
<div>
<li>我是孙子</li>
<li>我是孙子</li>
</div>
</ul>
</body>
</html>
.子代选择器
ul>li {
background-color: pink;
}
.后代选择器
ul li {
background-color: aqua;
}
ul div>li {
background-color: brown;
}
3.逗号选择器
<!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 {
background-color: pink;
}
h1 {
background-color: pink;
}
p {
background-color: pink;
} */
/* 复合选择器 */
div,
p,
h1 {
background-color: aqua;
}
</style>
</head>
<body>
<div>我是一个div</div>
<p>我是小p</p>
<h1>我是标题</h1>
</body>
</html>
. 复合选择器
div,
p,
h1 {
background-color: aqua;
}
4.属性选择器
<!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>
input[type="text"] {
background-color: pink;
}
input[type="password"] {
background-color: aqua;
}
input[name] {
background-color: red;
}
/* *type的属性值里包含e的input元素
*/
input[type*="e"] {
background-color: blueviolet;
}
input[type^="p"] {
background-color: chartreuse;
}
input[type$="l"] {
background-color: red;
}
</style>
</head>
<body>
<form action="#">
<input type="text">
<input type="password">
<input type="email" name="email">
<input type="number">
</form>
</body>
</html>
5.伪类选择器
<!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>
/* a:link 、a:visited 、a:hover 、a:active */
/* 伪类选择器：元素在不同状态下的样式 */
/* ：link 为访问的来凝结样式 */
a:link {
color: green;
}
/* 访问之后的样式 */
a:visited {
color: red;
}
/* 获取焦点时的样式 */
a:focus {
color: blue;
}
/* 鼠标悬停时的样式 */
/*
+表示下一个
~表示之后所有的兄弟元素 */
a:hover+div {
color: pink;
}
/* active 用户点击之后按住鼠标 */
a:active {
background-color: pink;
}
div:hover {
background-color: pink;
}
</style>
</head>
<body>
<a href="#">点击我去百度
</a>
<div>我是一个div</div>
</body>
</html>
访问先后
a:link
a:visited
a:hover
a:active
6.结构伪类选择器
<!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:nth-child(9) {
background-color: pink;
}
ul li:last-child {
background-color: red;
}
ul li:first-child {
background-color: aqua;
}
ul li:nth-child(2n+1) {
background-color: blue;
}
ul li:nth-child(2n) {
background-color: rgb(33, 227, 124);
}
</style>
</head>
<body>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
<li>我是li6</li>
<li>我是li7</li>
<li>我是li8</li>
<li>我是li9</li>
<li>我是li10</li>
</ul>
</body>
</html>
单行
ul li:nth-child(9) {
background-color: pink;
}
首行
ul li:first-child {
background-color: aqua;
}
末行
ul li:last-child {
background-color: red;
}
偶数行
ul li:nth-child(2n) {
background-color: rgb(33, 227, 124);
}
奇数行
ul li:nth-child(2n+1) {
background-color: blue;
}
7.伪元素选择器
<!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::before {
content: "##3#";
color: pink;
}
p::after {
content: "and you";
color: red;
}
input::placeholder {
color: pink;
}
div::selection {
color: aqua;
}
</style>
</head>
<body>
<p>我叫缑欣</p>
<p>我叫缑欣</p>
<p>我叫缑欣</p>
<input type="text" placeholder="请输入用户名：">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam porro libero voluptatum consectetur
doloremque corrupti pariatur assumenda perspiciatis facere impedit, cum, autem voluptas repellendus provident
eius et ipsum ratione laudantium!
Corporis dicta repellat deleniti itaque blanditiis illo ipsum sed, libero quis vero, praesentium architecto hic
dolores debitis! Incidunt fugiat sed fugit aliquid officiis fuga quo sequi rerum, voluptas qui quia!
Iste consectetur corrupti sunt totam dolores quae provident dignissimos ipsum, odio maiores atque. Provident sit
maxime quidem fugiat eius illo corrupti, deserunt itaque accusantium. Consequatur quisquam distinctio architecto
suscipit vel.
Sit similique nisi pariatur molestiae obcaecati non voluptate sint. Iure veniam, ab praesentium, accusantium
quae eligendi reiciendis ipsa ad nihil atque obcaecati aut repellendus porro optio eaque itaque non
necessitatibus!
Vitae facere accusantium magnam, vero architecto dolore deleniti nobis quis, recusandae, officiis culpa magni ut
distinctio delectus odio obcaecati aspernatur! Qui optio placeat tempora recusandae explicabo aut earum
repellendus adipisci.
Quam magnam unde aperiam aliquam ut molestiae est nobis odio. Deserunt odit numquam atque modi facere
dignissimos laborum commodi architecto incidunt, officia, eveniet autem provident nesciunt et corporis quasi
ipsa!
Quaerat quod sint ea nostrum voluptas repellendus, assumenda minima numquam perferendis vel officiis dolorem
beatae nemo cum quae autem. Velit asperiores natus dolorem, et libero praesentium modi provident numquam
exercitationem.
Optio tempora fugiat eveniet debitis! Est unde blanditiis totam ullam quia debitis explicabo sit eaque quaerat,
minus molestiae. Libero quo consequatur doloribus pariatur aut impedit ullam fugiat aliquid! Libero, incidunt.
Laborum consectetur illo esse quasi voluptatem dolorum delectus eveniet. Eius nostrum non quia accusantium nam
tempore culpa praesentium iure cumque tempora id possimus, expedita ea in quod quae odit voluptatibus?
Laborum, a odit! Quibusdam suscipit neque architecto esse voluptate! Cupiditate, illum accusantium ipsam impedit
suscipit exercitationem odit repudiandae repellat, voluptatibus fugiat repellendus porro tempora? Nihil et nulla
minus reprehenderit iusto.]
</div>
</body>
</html>
3437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
