一.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 MyBody》(印尼)获得最佳故事片大奖，最佳男、女主角奖项分别由印度演员Deepak Dobriyal(作品《BaBa》)、日本演员Yukiko Shinohara(作品《Mrs. Noisy》)摘得，印度著名导演Raj RGupta(作品《Baba》)获得最佳导演奖，我国已故著名导演史文帜(代表作品《狼牙山五壮士》)获第59届亚太影展终身成就奖。</p><p class="lo">“开创中国电影科幻元年”的硬核科幻大片《流浪地球》以恢弘的场景设计，震撼的设计效果，先进的特效技术，严谨的科学探索，实现了中国科幻电影的全新跨越，在本届亚太影展获得多项提名，</p> <p>并最终斩获了“最佳科幻片”、“最佳视觉特效”和“最佳音效”三项大奖。在颁奖盛典尾声，在全场近千名来自世界各地的电影人的共同见证下，杨步亭、文隽、吴啸、丁海峰、马中轩、樊少皇等一众大咖共同上台启动了第60届亚太影展，深圳大视界集团再次获得第60届亚太影展独家主办权。</p>

font复合顺序
font:style weight size/line-height family;

【网页设计自习室#010】CSS01相关推荐

【网页设计自习室#003】网页设计基本规范和要求
一.基本页面规范 1.1 横向宽度页面尺寸:1920px 中间区域:1000px/1200px 分辨率:72 颜色:RGB 1.2 top区当前设计很少有此区域宽度:1920px 高度:35-- ...
【网页设计自习室#002】网站页面基本布局与结构
一.网站中基础概念 1.域名 1.1域名解析 http:www.baidu.com http:超文本传输协议 www:万维网 baidu.com:顶级域名,二级域名等子域名,唯一的存在 https:经 ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
html网页设计大赛作品介绍,HTML网页设计大赛--赛出风采
原标题:HTML网页设计大赛--赛出风采为了锻炼学生们的实际操作能力,让学生们能够将日常老师传授的知识做到学以致用,北大青鸟深圳嘉华学校会定期举办各种类型的知识竞赛.2019年6月11日在嘉华第一自 ...
php网页设计课程设计dreamweaver8_《动态网页制作》(PHP)课程标准
-1- <动态网页制作> ( PHP )课程标准课程代码 010******* 课程类别专业课程课程类型考试课课程性质必修课课程学分 5 课程学时 80 修读学期第 3 学 ...
名侦探柯南java_DW网页设计作业（名侦探柯南）
[实例简介] 名侦探柯南主题的DW的网页设计作业.非常不错. [实例截图] [核心代码] 4f41da02-6258-4040-92e7-1eec8636a01a └── 作业 ├── daoju.h ...
计算机网页设计布局与排版研究,论计算机网页设计的布局与排版
王禹智摘要:网页设计是一种直观的视觉语言,需要对其进行布局与排版.虽然网页设计与平而设计之间存在一定的区别,但是其两者依然存在一定的相似之处,网页设计应该充分借鉴利用平而设计的原则与方法.网页设计 ...
网页设计和用户界面设计
摘要:这是两个现在网页设计领域使用频率非常高的词.在大多数情况下,它们被相互替代.这个领域内外的很多人都认为这是两个意义基本一样的词.但是它们真的可以互相混淆么? 这是两个现在网页设计领域使用频率非常 ...
缩略图在网页设计中应用的35个优秀案例
这篇文章向大家推荐35个缩略图在网页设计中应用的优秀案例,希望下面这些网页设计实例能够帮助大家制作出更加优秀的网页作品. Shropshire Screen Arnaud Beelen Two Fis ...

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