CSS叠层样式表

font-family //字体系列
【CSS叠层样式表】font-size //字体大小
font-weight //字体粗细 100~900
font-style //文本风格 normal/italic
color //文本颜色
text-align //文本水平对齐
text-decoration //无装饰/下划线/上划线/删除线 none/underline/overline/line-through
text-indent //首行缩进单位px/em/……
line-height //行间距（行高）
1.CSS简介
1.1 HTML的局限性
HTML只关注内容的语义
1.2 CSS--网页的美容师
CSS 是层叠样式表(Cascading Style Sheets) 的简称。有时候也称之为 CSS样式表或级联样式表。
CSS 也是一种标记语言。CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等) 以及版面的布局和外观显示样式。
CSS最大价值：由 HTML 专注做结构，CSS 专注做样式，即结构与样式分离。
1.3 语法规范
CSS规则由两个主要部分构成：选择器以及一条或多条声明

文章插图

<title></title><!--样式写在title标签下面--> <style>p {/*选择p标签*/color: red; /*颜色为红色*/font-size: 20px; /*字号大小为20像素*/}</style></head><!--样式写在在head结束标签上面--><body>	<p>这是一段话 。</p></body></html>

文章插图
h1 { color: red; font-size: 20px; }h1 { color: red; font-size: 20px;}2. 样式大小写
H1 { COLOR: RED;}h1 { color: red;}3. 空格规范
属性值面前，冒号后面，保留一个空格。
选择器(标签)和大括号中间保留空格。
2. CSS基础选择器
2.1 CSS选择器作用
根据不同需求把不同标签选出来就是选择器的作用。简单来说，就是选择标签用的。
2.2 选择器分类
选择器分为基础选择器和复合选择器两大类。
基础选择器是由单个选择器组成的。基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。
2.3 标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器。

<style>p {color: red;}div {color: blue;}</style></head><body>	<p>我是p标签</p>	<p>我是红色</p>	<div>我是div</div>	<div>我是蓝色</div></body>

文章插图
优点：快速设置同标签样式
缺点：同标签不能分别设置样式 (可使用下方的类选择器)
2.4 类选择器
如果要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
第一步：使用class设置一个类名。
第二步：使用这个类名。格式为 "." 加类名。

	<style>.plum {color: #f1939c;}.orchid {color: #c08eaf;}.bamboo {color: #b9dec9;}.daisy {color: #e9ddb6;}	</style><ul><li class="plum">梅花</li><li class="orchid">兰花</li><li class="bamboo">竹</li><li class="daisy">菊花</li></ul>

文章插图
<style>.red {color: red;}.font35 {font-size: 35px;} </style><p class="red font35">Arthur</p>

文章插图
2.5 id选择器
第一步：使用 id 设置一个 id名。
第二步：使用这个 id名。格式为 "#" 加 id名。
<style>#ch {color: red;} </style><p id="ch">中国</p>

文章插图
<style>* {color: red;} </style><div><p>p标签</p></div><ul><li>无序列表</li></ul>

文章插图
3.CSS字体属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体) 。
3.1 字体系列
CSS 使用 font-family 属性定义文本的字体系列。【font-family字体系列】

	<style>h4 {font-family: 'Microsoft YaHei';}p {font-family: '宋体', Arial, Helvetica;}	</style><h4>石灰吟</h4><p>千锤万凿出深山，烈火焚烧若等闲 。</p><p>粉骨碎身浑不怕，要留清白在人间 。</p>

注意：
1. 各种字体用逗号隔开，上方p标签多种字体执行顺序为：先找宋体，没有的话找Arial字体，以此类推。
2. 中文或多个单词组成的字体，加引号。
3. 尽量使用用户系统都有的字体，保证不同电脑正常显示
4. 常见字体：body { font-family: 'Micorsoft YaHei', tahoma, arial, 'Hiragion Sans GB'; }
3.2 字体大小
CSS 使用 font-size 属性定义字体大小。
px(像素) 是网页常用单位。谷歌浏览器默认16px，不同浏览器默认字号不一样，尽量给一个明确的大小，一般给body设置字号。

	<style>body {font-size: 16px;}	</style><h1>石灰吟</h1><p>千锤万凿出深山，烈火焚烧若等闲 。</p><p>粉骨碎身浑不怕，要留清白在人间 。</p>

文章插图
注意：h标签不受影响，需要额外设置大小
3.3 字体粗细
font-weight: normal/bold/bolder/lighter/number
normal：正常字体
bold：粗体
bolder：特粗体
lighter：细体
number：100/200/……/800/900 ，400等同normal，700等同bold（一些值不起作用是因为大部分字体没有设计9套粗细字体）

	<style>body {font-weight: 900;}	</style><h1>石灰吟</h1><p>千锤万凿出深山，烈火焚烧若等闲 。</p><p>粉骨碎身浑不怕，要留清白在人间 。</p>

文章插图
3.4 文字样式
CSS使用 font-style 属性设置文本的风格。
font-style：normal/italic
normal：默认值，标准字体样式
italic：斜体字体样式

	<style>body {font-style: italic;}em {font-style: normal;}	</style><h1>石灰吟</h1><p>千锤万凿出深山，烈火焚烧若等闲 。</p><p>粉骨碎身浑不怕，要留清白在人间 。</p><em>不倾斜</em>

文章插图
3.5 字体复合属性
<style>body{font:font-style font-weight font-size/line-height font-family;}</style>

	<style>body {/*倾斜、粗细700 字号16px/行高20px 字体宋体*/font: italic 700 16px/20px '宋体';}	</style><h1>石灰吟</h1><p>千锤万凿出深山，烈火焚烧若等闲 。</p><p>粉骨碎身浑不怕，要留清白在人间 。</p>

文章插图
注意：
1. 顺序不能乱，各个属性空格隔开
2. 不需要的属性可以省略，但必须保留 font-size 和 font-family 属性，否则 font 属性不起作用。
4.CSS文本属性
CSS Text(文本)属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
4.1 文本颜色
color 属性用于定义文本颜色。
color属性值示例预定义的颜色值red，green，blue等十六进制#FF0000(缩写#F00)，#52C136等RGB代码rgb(255,255,0)或rgb(100%,100%,0%)等

	<style>p {color: red;color: #f00;/*#ff0000*/color: rgb(255, 0, 0);/*rgb(100%,0%,0%)*/}	</style><p>这是一段文字</p>

文章插图

	<style>h1:nth-child(1) {text-align: left;}h1:nth-child(2) {text-align: center;}h1:nth-child(3) {text-align: right;}	</style><h1>居左默认</h1><h1>居中</h1><h1>居右</h1>

文章插图
4.3 装饰文本
text-decoration 属性规定添加到文本的装饰。可以给文本添加下划线、删除线、上划线等。【装饰】
属性值描述none默认，没有装饰。开发中常用来去掉a标签的下划线underline下划线overline上划线line-through删除线

	<style>p:nth-child(1) {text-decoration: none;}p:nth-child(2) {text-decoration: underline;}p:nth-child(3) {text-decoration: overline;}p:nth-child(4) {text-decoration: line-through;}	</style><p>无装饰 默认</p><p>下划线</p><p>上划线</p><p>删除线</p>

文章插图
4.4 文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
em是一个相对单位，就是当前元素(font-size)1个文字的大小。

	<style>p {text-indent: 2em;}	</style><p>首金产生！7月24日，东京奥运会女子十米气步枪决赛中，中国选手杨倩以251.8环摘得金牌，创造了新的奥运会纪录 。</p><p>决赛中杨倩第一组射击后成绩为51.9环排在并列的第五位，俄罗斯和韩国选手暂列第一 。</p>

文章插图
4.5 行间距
line-height属性用于设置行间距(行高)
<style>p {line-height: 50px;} </style>

文章插图
5.CSS引入方式
5.1 CSS的三种样式表
按照CSS样式书写的位置(或引入方式)，CSS样式表可以分为三大类：
1.行内样式表(行内式)
2.内部样式表(嵌入式)
3.外部样式表(链接式)
5.2内部样式表
内部样式表(内嵌样式表)式写到html页面内部，是将所有CSS代码抽取出来，单独放到<style>标签中。
<title></title><style>p {color: red;} </style></head><body> <p>内部样式表/内嵌样式表</p></body>5.3 行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。
<p style="color: red;">内容<p>5.4 外部样式表
实际开发常用，能让多个页面使用样式表，适合样式比较多的情况。单独写到CSS文件中，再把CSS文件引入HTML页面中使用
引入外部样式表分为两步：
1. 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
2. 在HTML页面中，使用<lilnk>标签引入这个CSS文件。
<link rel="stylesheet" href="https://tazarkount.com/read/CSS文件路径">rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档时一个样式表。
练习案例：新闻页面

文章插图

CSS

body {font: 16px/28px 'Microsoft YaHei';}h1 {font-weight: 400;text-align: center;}a {text-decoration: none;}.gray {color: #888;font-size: 12px;text-align: center;border-bottom: 1px solid #888;}.search {color: #666;width: 170px;}.btn {font-weight: 700;}p {text-indent: 2em;}.pic {text-align: center;}.pic img {border: 1px solid black;}.footer {color: #888;font-size: 12px;}

HTML

<h1>奥林匹克运动会</h1><div class="gray">2021-8-1 16:30:47 来源：<a href="https://tazarkount.com/read/#">百度百科</a><input class="search" type="text" placeholder="请输入查询条件"> <button class="btn">搜索</button></div><p>奥林匹克运动会（希腊语：Ολυμπιακο? Αγ?νε?；法语：Jeux olympiques；英语：Olympic Games；中文简称“奥运会”） 。</p><p>是国际奥林匹克委员会主办的世界规模最大的综合性运动会，每四年一届，会期不超过16日，是世界上影响力最大的体育盛会 。</p><h4>奥运会简介</h4><p class="pic"><img src="https://tazarkount.com/read/images/OG.jpg"></p><p>奥运会分为夏季奥林匹克运动会、夏季残疾人奥林匹克运动会、冬季奥林匹克运动会、冬季残疾人奥林匹克运动会、夏季青年奥林匹克运动会、冬季青年奥林匹克运动会、世界夏季特殊奥林匹克运动会、世界冬季特殊奥林匹克运动会、夏季聋人奥林匹克运动会、冬季聋人奥林匹克运动会十个项目组成 。</p><p>奥运会中，各个国家和地区用运动交流各国文化，以及切磋体育技能，其目的是为了鼓励人们不断进行体育运动 。</p><p class="footer">文本来源：百度百科 责任编辑：网友</p>