【网页设计自习室#010】CSS01

一.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;