本文详细介绍了CSS的书写规范，包括行内样式、内部样式和外部样式的选择器使用，如基础选择器、包含选择器、属性选择器等。此外，还讨论了伪类和伪元素选择器，以及字体样式、文本对齐、边框、背景、浮动、盒子模型等多个方面，展示了CSS在网页布局和设计中的重要应用。最后提到了媒体查询，用于根据不同设备和屏幕尺寸适配样式。
css：层叠样式表
css书写规范：
| 选择器{ 属性名：属性值； 属性名：属性值； } |
1.行内样式(不推荐使用)
<body>
<div style="width:700px; height:50px; background-color:aqua;"></div>
</body>2.内部样式
（尽量使用外部样式（简洁、清楚、易查询））
<style>
div{
...
}
</style>3.外部样式
| 1.命名.css 2.在css中写入内容 div{ ... } 3.引入html中 <head> <link rel="stylesheet" href="./.."> </head> |
4.基础选择器
| 标签选择器：选择当前页面中所有符合的标签 id选择器，#id值 类选择器，class（类），·class类名 *通配符选择器，选中所有元素 |
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器：选择当前页面中所有符合的标签 */
h1{
color: aliceblue;
}
/* id选择器，#id值 */
#box1{
color: aliceblue;
}
/* 类选择器，class（类），·class类名 */
.box{
background-color: aliceblue;
}
/* *通配符选择器，选中所有元素 */
*{font-size: 60px;}
</style>
</head>5.包含选择器
/* 子代选择器 */
ul>li{
background-color: aliceblue;
}
/* 后代选择器 */
ul li{
background-color: aliceblue;
}6.逗号选择器（复合选择器）
div,
p,
h1{
background-color: aliceblue;
}
/* 设相同属性，将元素逗号隔开 */7.属性选择器
/* type为text的input */
input[type="text"]{
background-color: aliceblue;
}
/* 具有name属性的 */
input[name]{
background-color: aliceblue;
}
/* type中包含e的 */
input[type*="e"]{
background-color: aliceblue;
}
/* type中以p开头的 */
input[type^="p"]{
background-color: aliceblue;
}
/* type中以l结尾的 */
input[type$="l"]{
background-color: aliceblue;
}8.伪类选择器（元素在不同样式中的样式）
/* 1.未访问的链接样式 */
a:link{
color: aliceblue;
}
/* 2.访问后的样式 */
a:visited{
color: aliceblue;
}
/* 3.鼠标悬停时的样式 */
a:hover{
color: aliceblue;
}
/* 4.点击之后按住鼠标不松 */
a:active{
background-color: aliceblue;
}
/* 获取焦点时的样式<按住tab键> */
a:focus{
color: aliceblue\;
}
/* 通过鼠标悬停ac从而改变div的样式
+表示下一个
~表示之后所有兄弟元素*/
a:hover+div{
color: pink;
}9.结构伪类选择器
/* ul在li上的第7个孩子 */
ul li:nth-child(7){
background-color: aliceblue;
}
/* 最后一个孩子 */
ul li:last-child{
background-color: aliceblue;
}
/* 第一个孩子 */
ul li:first-child{
background-color: aliceblue;
}
/* 顺序为奇数的孩子 */
ul li:nth-child(2n+1){
background-color: aliceblue;
}
/* 顺序为偶数的孩子 */
ul li:nth-child(2n){
background-color: aliceblue;
}
/* 1.父亲 2.排序 3.儿子 */
.father.son:nth-child(2){
background-color: aliceblue;
}
/* 1.父亲 2.儿子 3.排序 */
.father.son:nth-of-type(2){
background-color: aliceblue;
}10.伪元素选择器
/* 在p前添加内容及颜色 */
p::before{
content: "";
color: aliceblue;
}
/* 对提示语的改变 */
input::placeholder{
color: aliceblue;
}
/* 选中后颜色的改变 */
div::selection{
color: aliceblue;
}11. 字体样式
p{
/* 字体大小/字号 */
font-size: 12px;
/* 字体类型 */
font-family: "宋体";
/* 字体的粗细：normal/400(正常)，bold/700(加粗) */
font-weight: 400;
/* 字体样式（倾斜） */
font-style: italic;
/* 复式写法 style weight (size family)必要 */
font:italic 700 20px '宋体';
}12.文本对齐方式
span{
/* 文本的对齐方式：水平居中 */
text-align: center;
/* 显示形式转化成行内块元素（才能进行上述的对其方式） */
display: block;
}13.文本修饰
/* 文本的修饰 none(不修饰),line-through(删除线),underline(下划线),overline(上边线) */
a{
text-decoration: none;
}14.text-transform(大小写的转换)
/* 小写转大写uppercase,大写转小写lowercase */
ul li:nth-child(1){
text-transform: uppercase;
}15.行高（行间距之间的距离）
/* 可通过设置行高进行垂直居中的操作，（单行文本借助行高垂直居中） */
p{
line-height: 50px;
}16.文本溢出
div{
width: 200px;
height: 200px;
background-color: aliceblue;
/* Y轴滚轮 */
overflow: auto;
/* 隐藏滚轮 */
overflow: hidden;
/* Y+X轴的滚轮均有 */
overflow: scroll;
/* 单行文本加省略号 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}17.背景相关
body{
width: 200px;
height: 200px;
background-color: aliceblue;
/* 平铺背景图片（可重复） */
background-image: url(./...);
/* 不重复平铺 */
background-repeat: no-repeat;
/* 固定不动 */
background-attachment: fixed;
/* 沿右下角显示图片 */
background-position: right bottom;
/* 强行占满 */
background-size: cover;
/* 复合要求非强制性的顺序 */
background: pink url(./...) no-repead fixed right bottom;
}18.列表样式
/* 建立无序列表（十行）简写：ul>li*10{li$} */
li{
/* 去掉默认形式 */
list-style: none;
/* 数字 */
list-style: decimal;
/* 小圆点 */
list-style: disc;
/* 空心小圆点 */
list-style: circle;
/* 实心正方形 */
list-style: square;
}19.轮廓线
input{
/* *******轮廓线的形式(取消轮廓线)******* */
outline-style: none;
/* 双划线double,虚线dash,点状轮廓dotted */
/* 轮廓线的颜色 */
outline-color: aqua;
/* 轮廓线的厚度(加厚) */
outline-width: thick;
/* 常用写法 */
outline: none;
}20.边框
div{
width: 200px;
height: 200px;
background-color: aliceblue;
/* 边框宽度 */
border-width: 3px;
/* 边框颜色 */
border-color: aliceblue;
/* 边框样式 */
border-style: solid;
/* 边框角的弧度(百分比/数字) */
border-top-left-radius: 50%;
}21.合并相邻边框
table{
/* 合并相邻边框 */
border-collapse: collapse;
}22.颜色
/* 前景色（字体颜色） */
p{
/* 普通版 */
color: red;
/* 三原色调色版 */
color:rgb(rgb(150, 94, 94), rgb(94, 153, 94), blrgb(75, 75, 127)
}
/* 背景色（高级版）：三原色调色，alpha(透明通道)0~1 */
div{
background-color: rgba(rgb(199, 133, 133), rgb(121rgb(88, 88, 174)9, 121), blue, 0.1);
opacity: 0.3;/* 透明度调节（0-1）隐藏后保留原位 */
}23.元素的隐藏方式
/* 1.设置透明度隐藏（保留原来的位置） */
opacity:0;
/* 2.display控制元素的显示与隐藏（也可用来转化元素的显示方式）(不保留原来的位置) */
display : none ;
/* 3.visibility:hidden;(保留原来的位置) */
visibility:hidden;
24.鼠标样式及防拖拽
textarea{
/* 文本防拖拽 */
resize: none;
/* 鼠标样式（手指） */
cursor:pointer
}24.绝对定位
| 绝对定位会放弃原来的位置，子代逐级查找父级元素是否有相对定位，如果有，以父亲为参考，如果没有，继续向上查找 father -->grandfather -->浏览器 绝对定位将元素固定在相对于其位置最近的祖先 |
.son{
/* 绝对定位，放弃原来位置，脱离文档流 */
position: absolute;
top: 50px;
background-color: aliceblue;
}
.father{
/* 相对定位 */
position: relative;
}
day4:
1.盒子模型
盒子大小：由content内容、padding外边距、border边框决定
2.边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
/* 2px边框粗细 solid边框类型 black边框颜色 */
}
</style>
</head>
<body>
<div>1</div>
</body>
</html>3.内边距--留白
（内容距离边框的距离）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid black;
/* 2px边框粗细 solid边框类型 black边框yanse */
padding-top: 10px;
/* 盒子内容离顶部距离（可通过此方法加高盒子） */
padding-left: 10px;
/* 盒子内容离左侧距离（可通过此方法加宽盒子） */
padding: 10px;
/* 上下左右均离边框10px */
padding: 10px 50px;
/* 上下 */
padding: 10px 20px 30px;
/* 上 左右 下 */
padding: 10px 20px 30px 40px;
/* 上 右 下 左 */
/* padding的值不能为负 */
/* 行内元素的左右边距可准确设置 */
}
</style>
</head>
<body>
<div>1</div>
</body>
</html>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>
div {
width: 300px;
height: 300px;
border: 2px solid black;
}
.box1,
.box2 {
display: inline-block;
}
/* 将块元素转换为行内块 */
.box1 {
margin-bottom: 20px;
margin-right: 20px;
margin-left: 20px;
margin-top: 40px;
/* 上 右 下 左 */
margin: 10px 20px 30px 40px;
}
.box3 {
/* 实现元素的水平居中 */
margin: 0 auto;
}
.box2 {
margin-left: -30px;
/* 外边距可以为负数 */
}
</style>
</head>
<body>
<div class="box1">
我是盒子的内容区域，你是谁？
</div>
<div class="box2">
我是盒子的内容区域，你是谁？
</div>
<div class="box3">
我是盒子的内容区域，你是谁？
</div>
</body>
</html>5.外边距塌陷
</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>
.father {
width: 800px;
height: 800px;
background-color: pink;
/* 父盒子里，第一个子盒子的margin-top值会被父盒子抢掉：解决方案如下： */
/* 1、给父元素加边框 */
/* border: 1px solid black; */
/* 2、给父元素添加内边距 */
/* padding: 10px; */
/* 3、overflow: hidden; (处理文本溢出) 偏方 */
overflow: hidden;
}
.father>div {
/* 设置所有子盒子的性能 */
width: 100px;
height: 100px;
}
.son1 {
background-color: aqua;
margin-bottom: 20px;
margin-left: 20px;
/* 父盒子里，第一个子盒子的margin-top值会被父盒子抢掉*/
margin-top: 200px;
}
.son2 {
background-color: blueviolet;
margin-bottom: 30px;
}
.son3 {
background-color: chocolate;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
</div>
<p>cbjdscdsc</p>
</body>
</html>6.避免padding盒子撑大
（限制盒子的大小）
<!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: 300px;
background-color: pink;
padding: 30px;
/* 解决padding影响盒子大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
dncjdcjndcnjcndjcdj
</div>
</body>
</html>7.flex布局
flex为弹性布局，弹性项目如何增大或缩小以适应其弹性容器中可用的
<!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 {
display: flex;
/* 改子元素排列方式 */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
/* 改变主轴对其方式 */
/* space-between:两边贴边，中间评分剩余空间 */
justify-content: space-between;
/* space-around：平分在子项的两边 */
justify-content: space-around;
/* 两两平分，空隙相同 */
justify-content: space-evenly;
/* 全部放行中间，无间隙 */
justify-content: center;
/* 允许换行 */
flex-wrap: wrap;
/* 侧轴单行 */
align-items: center;
/* 侧轴对齐方式 */
align-content: center;
/* 两边贴上下两侧，中间评分剩余空间 */
align-content: space-between;
/* 平分在子项的同一列 */
align-content: space-around;
/* 全部放列中间，无间隙 */
align-content: space-evenly;
width: 800px;
height: 1000px;
background-color: pink;
margin: 0 auto;
}
.box>div {
/* flex: ; 占用剩余空间的多少 */
width: 170px;
height: 100px;
background-color: aqua;
}
/* .box div:nth-child(3) {
background-color: pink;
} */
.box div:nth-of-type(3) {
/* background-color: red; */
/* order 值越小，排列越靠前 没有设置的子项目，默认为0 */
order: -1;
}
/* ul {
display: flex;
} */
</style>
</head>
<body>
<div class="box">
<div>我是盒子1</div>
<div>我是盒子2</div>
<div>我是盒子3</div>
<div>我是盒子4</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
<div>我是盒子5</div>
</div>
<!-- <ul>
<li><a href="#">去百度</a></li>
<li><a href="#">去百度</a></li>
<li><a href="#">去百度</a></li>
<li><a href="#">去百度</a></li>
</ul> -->
</body>
</html>8.去除标签默认外边距
<!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>
body {
margin: 0;
/* 去除默认margin值 */
}
ul {
margin: 0;
padding: 0
/* 去除默认的padding、margin值; */
}
* {
margin: 0;
padding: 0;
/* 利用通配符，在写程序前将一切干扰结果的默认值去除 */
}
</style>
</head>
<body>
sasas
<ul>
<li>woshili</li>
</ul>
</body>
</html>9.字体
<!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>
@font-face {
/* @font-face为字体元素 */
font-family: 123;
src: url(./翩翩体-简.ttf);
}
div {
font-family: 123;
}
</style>
</head>
<body>
<div>
1231
</div>
</body>
</html>10.渐变
<!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: 300px;
/* 渐变的方向及颜色，第一个参数为方向，后面可以带多种颜色并用逗号隔开 */
background-image: linear-gradient(to right, red, pink, green, blue);
/* 重复线性渐变，第一个参数为旋转角度 */
background-image: repeating-linear-gradient(45deg, yellow, pink, red);
/* 镜像渐变 */
background-image: radial-gradient(red, pink, blue, greenyellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>11.css继承性
(1).会继承的：字体属性、文本属性、文字颜色---（不影响布局的元素）
(2).不会继承的：边框、背景、内外边距、宽高---（影响布局的元素）
12.布局练习
。。。。。。
13.浮动
（起初用于）文字环绕图片
<!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>
img {
/* 文字环绕 */
float: left;
/* 向左浮动，文字包围图片 */
width: 100px;
}
</style>
</head>
<body>
<img src="../../day1/灰太狼.jpg" alt="">
灰太狼，动画片系列《喜羊羊与灰太狼》及其衍生作品中的正面主角（前18部为反派男
夜太狼的表弟，红太狼的丈夫，狼堡的主人。同时也是爱老婆、疼爱孩子的好丈夫、好爸爸
</body>
</html>14.浮动
<!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>
.father {
background-color: rgb(39, 53, 155);
}
.son1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.son2 {
/* 左浮动，脱离文档流（位置所在空间高度发生变化） */
float: left;
width: 300px;
height: 200px;
background-color: aqua;
}
.son3 {
float: left;
width: 600px;
height: 100px;
background-color: red;
}
p {
/* 清除浮动 */
clear: both;
}
ul li {
float: right;
}
/* 文档流是文档中可显示的对象在排列时所占位置 */
/* 当所有的儿子都脱离文档，会使父盒子塌陷 */
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
<p>我是一段文字</p>
</div>
<ul>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
<li><a href="">1</a></li>
</ul>
</body>
</html>day5
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>
div {
width: 300px;
height: 300px;
background-color: pink;
/* 10px:x轴的偏移量
20：y轴的偏移量
inset:内阴影
30：模糊半径
（未设inset则默认外阴影）*/
box-shadow: inset 10px 20px 30px;
}
p {
/* 文字阴影 */
text-shadow: 10px 10px 2px;
}
</style>
</head>
<body>
<!-- <img src="" alt=""> -->
<div></div>
<p>
我是一段文字
</p>
</body>
</html>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>
p {
/* 以几列进行显示 */
column-count: 3;
/* 列于列之间的间距的 */
column-gap: 30px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, non culpa consectetur deleniti asperiores
corporis pariatur mollitia animi omnis fuga sint deserunt debitis, hic iste ad ex! Pariatur, velit vel!
Dignissimos commodi deleniti molestiae totam nam velit, ea repudiandae? Delectus totam deleniti atque
perspiciatis officiis vitae dolor nisi vero adipisci, nihil quisquam quas in. Eum minus laboriosam aliquam optio
esse!
Commodi, ad aliquam iure cupiditate eum non voluptas, optio distinctio id praesentium eaque rerum, amet est hic
quas! Et dolorum dignissimos atque officiis, eos modi quisquam animi est ut tenetur.
Porro, enim reprehenderit soluta cumque deleniti rerum iure ipsam illo, tenetur delectus iste cupiditate!
Laborum quos, fugit repudiandae perspiciatis quod, dolorem commodi provident ea excepturi blanditiis, laboriosam
distinctio ipsum consectetur.
</p>
</body>
</html>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>
/* @media only screen and (min-width: 320px) and (max-width: 480px) */
div {
width: 400px;
height: 50px;
background-color: aqua;
}
@media screen and (min-width: 900px) {
div {
background-color: pink;
color: rgb(195, 19, 48);
}
}
</style>
</head>
<body>
<div>cnjdcldkcd</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
