文章目录

• • • • 1. CSS快速入门
      • 2. 四种CSS导入方式
      • 3. 三种基本选择器
      • 4. 层次选择器
      • 5. 结构伪类选择器
      • 5. 属性选择器
      • 6. CSS样式

1. CSS快速入门

学习前端

CSS的优势

1. 内容与表现分离
2. 网页结构表现统一，可以实现复用
3. 样式十分丰富
4. 建议使用独立于HTML的CSS文件
5. 利用SEO，容易被搜索引擎收录

2. 四种CSS导入方式

样式优先级: 就近原则
1.行内样式

学习前端

2.内部样式

学习前端

3.外部样式:链接式

4.外部样式:导入式

3. 三种基本选择器

选择器优先级: id选择器 > class选择器 > 标签选择器
1.标签选择器 h1{}

学习Java
学习前端
学习后端

2.类选择器 .class的名称{}

学习Java
学习前端
学习后端

3.id选择器 #id名{}

学习Java
学习前端
学习后端

4. 层次选择器

1.后代选择器:在某个元素的后面；如:爷爷-->爸爸-->你-->儿子

/*body下的所有p便签*/
body p{background:red;
}

2.子选择器:一代，儿子

/*子选择器*/
body>p{background:green;
}

3.相邻兄弟选择器:相邻的兄弟(1个),相邻向下

/*邻弟选择器:只有一个,相邻(往下)的p标签*/
.active + p{background:red;
}
学习Java

4.通用选择器:当前选中元素的向下的所有兄弟

/*和p标签同级的往下，即该坪标签后面的p标签，不包括该p标签*/
.active~p{background:red;
}
学习Java

5. 结构伪类选择器

part1
part2
part3
1-1
2-2
3-3

5. 属性选择器

原始代码及效果

123456789

常用符号:

1.存在属性id的元素 a[]{}

/* 1.存在属性id的元素  a[]{} */
/* 用法1 */
a[id=demo]{background: pink;
}
/* 用法2 */
a[id]{background: pink;
}

2.class中含有links的元素

/* class中含有links的元素 */
a[class*="links"]{background: yellow;
}

3.选中href中以http开头的元素

/* 选中href中以http开头的元素 */
a[href^=http]{background: gold;
}

4.选中以pdf结尾的元素

/* 选中href中以pdf结尾的元素 */
a[href$=pdf]{background: aliceblue;
}

6. CSS样式

为什么需要网页美化?

1.有效的传递页面信息
2.美化网页，页面才能吸引用户
3.凸显页面的主题
4.提高用户的体验

span标签:重点要突出的字，使用span标签套起来

1.字体样式

font-family: 字体类型
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色
/*RGB 0~F
RGBA A:0~1(代表透明度)
*/

《魔道祖师》讲述了借他人身体复生的魏无羡和蓝忘机在寻找一具被肢解的无名尸体的五个部分的过程中，穿透重重迷障，戳破金光瑶谋害仙门百家的阴谋，并找出无名尸体被肢解、魏无羡十三年前被一步步逼至死路的真相的故事

用法1结果:

用法2结果:

2.文本样式

颜色 color:rgb (rgba)
文本对齐方式 text-align:center(常用)
首行缩进 text-indent:
行高 line-height:
装饰 text-decoration:
文本图片水平对齐 vertical-align:middle

3.鼠标状态

颜色 color:rgb (rgba)
文本对齐方式 text-align:center(常用)
首行缩进 text-indent:
行高 line-height:
装饰 text-decoration:
文本图片水平对齐 vertical-align:middle

、/*默认颜色*/
a{text-decoration:none;color:#000000;
}
/*鼠标悬浮的状态*/
hover{/*重要*/color:orange;font-size:50px;
}
/*鼠标按住为释放的状态*/
active{colro:lightblue;
}

文本样式、鼠标状态应用

春晓
【作者】孟浩然 【朝代】唐
春眠不觉晓，处处闻啼鸟。
夜来风雨声，花落知多少。
 
注释:
春日里贪睡不知不觉天已破晓，搅乱我酣眠的是那啁啾的小鸟。昨天夜里风声雨声一直不断，那娇美的春花不知被吹落了多少？

4.列表状态

/*ul li*/
list-style:1.none 去掉原点2.circle 空心圆3.decimal 数字4.square 正方形

淘宝
天猫新品
今日爆款
芭芭农场
天猫超市
阿里拍卖
充值中心
领淘金币

5.图片背景

图片背景学习

默认平铺

横向平铺

纵向平铺

不平铺