前言
CSS:Cascading Style Sheets 层叠样式表
CSS定义：可以设置 页中的样式，外观，美化
CSS中午名字：级联样式表，层叠样式表，样式表
CSS基础语法
CSS规则由两个主要组成部分：选择器，以及一条或多条声明
h1:选择器 {color:blue;font-size:12px;}：声明
注意：
1.在HTML中可以把样式定义在<style> </style>标签中
2.选择器：指定要改变样式的HTML元素
3.每条声明由一个属性和一个属性值组成
4.CSS声明以分 ”;”结束，声明以大括 {}括起来
基础语法
style标签 ：写在title标签后
选择器 {属性名1:属性名1;属性名2:属性值2}
color：代表颜色
font-size：代表字体大小，
px：代表像素单位
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* style标签 写在title标签后 选择器 {属性名1:属性名1;属性名2:属性值2} color：代表颜色 font-size：代表字体大小， px代表像素单位 */ div {color:red;font-size: 50px;} </style> </head> <body> <div>hello python</div> <div>hello python</div> <div>hello python</div> <div>hello python</div> </body></html>开发者工具的使用
1.打开方式：鼠标右键—检查
2.找到菜单：element 元素
3.鼠标左键点击想要看的元素标签
4.右侧会随之出现对应的CSS样式代码
5.可以设置颜色，设置字体大小
6.把设置后的颜色代码和设置后的字体代码放到 程序中即可
标签选择器
标签选择器：利用标签的名字来进行页面元素的选择，标签，标记的选择
<style> /* 可以使用标签的名字 来做内容的选择 */ div {color:red;} p{color:yellow;} </style> </head> <body> <div>hello python</div> <div>hello python</div> <p>hello world</p> <p>hello world</p>id选择器
#id=”值”
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #p1 {color: red;} #p2 {color: blue;} #p3 {color: aqua;} #p4 {color: aquamarine;} </style> </head> <body> <p id="p1">郑州</p> <p id="p2">北京</p> <p id="p3">上海</p> <p id="p4">广州</p> </body></html>id的值 命名规则
1.数字不能开头
2.不能使用中划线，下划线的符
3.不推荐使用中文
4.尽量见名知意：起名字的时候看到名字就知道其含义的效果 如p_red
5.必须具有唯一性
6.每个标签只能有一组键值对
class类选择器
给HTML标签添加class属性
在CSS中使用 “.class“明确进行选择
注意：class可以重复使用，每个标签可以有多个class属性，多个属性之间添加空格分隔
class类命名规则同id
<!– 类选择器
语法：.类名{值1 值2 ….}
<p class= “类名”> </p> –>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .bz{color:aquamarine;} .ldxns{font-size:20px;} </style> </head> <body> <p class="bz ldxns">班长</p> <p class="ldxns">学习委员</p> <p class="ldxns">数学课代表</p> <p class="ldxns">语文课代表</p> </body></html>CSS书写位置引入方式
内嵌式：css写在style标签中，放在title标签后面，HTML代码和CSS代码混在同一个文件中
外链式：HTML代码和CSS代码式分离的，通过<link rel=”stylesheet” href=”外链HTML.css”>连接在一起即可
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <audio src="音频.mp3" controls="controls"></audio> </body></html>p{color:greenyellow;font-size: 50px;}内嵌外链应用场景
1.内嵌式：应用在电商 站首页 对 站加载速度有要求，CSS和HTML代码一次性加载进来
2.外链式：除了电商 站首页外的地方，外链式 查看代码比较方便
行内式（了解）
css代码写在标签的身上，不推荐使用，修改不方便，重复代码太多 导致加载速度慢
<p style=”color:pink;”>郑州</p>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p style="color:pink;">郑州</p> <p style="color:yellow;">北京</p> <p style="color:gold;">上海</p> <p style="color:green;">广州</p> </body></html>鼠标移入伪类（了解）
:hover{属性: 值;} 鼠标移入动作执行后的CCS代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> p{color:red;} p:hover{color: aqua;} </style> </head> <body> <p>hello python</p> </body></html>并列并集选择器
使用场景：需要一句话选择多个元素的时候，可以使用逗 进行连接
语法格式：h1,div,span,p{ }
后台选择器
选择器中出现空格，代表着后代
div span() 找到div的后代span
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！