一.CSS基础
1.1 CSS引入方式
①内嵌:写在style标签中(单个页面/通常放在head中)
②外联:单独写入.css文件中(多个页面)
③行内:写在标签中的style中(配合js做动效)
<link rel="stylesheet" href="./oe.css">
//外联式链接css文件
<style>
h1 {
color: aqua;
font-size: 99px;
background-color: crimson;
width: 99px;
}
</style>
<h1>占卜测试</h1>
<p>测测你是什么超级英雄</p>
<div style="font-size: 70px;">请输入你的个人信息</div>
p{
color: seagreen;
font-size: 50px;
}
二.CSS选择器
2.1标签选择器
标签名{
css属性名:属性值;
}
2.2类选择器
.类名{
css属性名:属性值;
}
//类选择器实现
类名只能由数字,字母,下划线,中划线构成
<div class="类名 类名 类名..."></div>
—————————————————————————————————————————————————————————————
测试
html//
<div class="kda">类选择器测试</div>
.kda{
color:blue;
font-size: 50px;
background-color: aqua;
height: 60px;
}
2.3id选择器(配合js)
#id属性值{
css属性名:属性值;
}
<div id="属性值"></div>
2.4通配符选择器(全选选择器)
<style>
*{
属性名:属性值;
}
</style>
//通常适用于去除标签默认的margin和padding属性值
三.CSS中文字文本样式
3.1文字样式
属性名 | 说明 | 使用 |
---|---|---|
font-size | 字体大小 | 以数字为主体,单位为px |
font-weight | 字体粗细 | (normal/bold)(100-900)(变细/变粗) |
font-style | 字体样式 | normal正常/italic倾斜 |
font-family | 字体类型 | 宋体/思源宋体/黑体/等 |
font属性连写 | 字体类型 | 一行代码实现多类指令 |
<style>
.ks {
font-size: 70px;
font-weight: 700;
font-style: italic;
font-family: 256 Bytes;
}
p{
font: 90px italic bold normal 黑体;
}
</style>
font连取:style weight size family;
<p>熬夜通宵2022</p>
<div class="ks">AOYETONGXIAO2022</div>
3.2文本样式
①
属性 | 说明 | 使用方式 |
---|---|---|
text-indent | 文本缩进 | 单位为px/em(一个字的大小) |
text-align | 文本水平对齐方式 | left/center/right(左中右) |
text-decoration | 文本修饰 | underline(下划线)/line-through(删除线)/overline(上划线)/none(无装饰线) |
line-height | 行高 | 数字+px/单数字表示为当前标签字数的倍数 |
<style>
p {
text-indent: 2em;
}
.bt {
text-decoration: underline;
color: red;
}
.lo{
text-decoration:line-through ;
}
</style>
<p class="bt">
2020年1月8日晚,第59届亚太影展颁奖盛典在中国澳门百老汇完美落幕,盛典现场,星光璀璨、佳作云集,原国家电影局副局长/中国电影集团公司董事长杨步亭、亚洲太平洋电影制片人联盟执行长潘夏(pansha)、香港著名电影人/香港金像奖四任主席文隽、香港著名电影人/监制黄柏高,著名演员葛优、丁海峰、吴樾、樊少皇、黎燕珊、陈奕名,全国政
协委员/香港特区政府顾问刘梦熊,著名导演马中轩、秦燕、陶盟喜等众多影视大咖出席了本次盛典。最终,最佳影片桂冠由来自马来西亚的电影《光》摘得,《Memories of My
Body》(印尼)获得最佳故事片大奖,最佳男、女主角奖项分别由印度演员Deepak Dobriyal(作品《BaBa》)、日本演员Yukiko Shinohara(作品《Mrs. Noisy》)摘得,印度著名导演Raj R
Gupta(作品《Baba》)获得最佳导演奖,我国已故著名导演史文帜(代表作品《狼牙山五壮士》)获第59届亚太影展终身成就奖。</p>
<p class="lo">
“开创中国电影科幻元年”的硬核科幻大片《流浪地球》以恢弘的场景设计,震撼的设计效果,先进的特效技术,严谨的科学探索,实现了中国科幻电影的全新跨越,在本届亚太影展获得多项提名,
</p> <p>
并最终斩获了“最佳科幻片”、“最佳视觉特效”和“最佳音效”三项大奖。
在颁奖盛典尾声,在全场近千名来自世界各地的电影人的共同见证下,杨步亭、文隽、吴啸、丁海峰、马中轩、樊少皇等一众大咖共同上台启动了第60届亚太影展,深圳大视界集团再次获得第60届亚太影展独家主办权。</p>
font复合顺序
font:style weight size/line-height family;