CSS文字属性
- text-transform
用于设置文字的大小写转换
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.info {
/*首字母大寫 */
/* text-transform: capitalize; */
/*将所有字母变为大写字母 */
/* text-transform: uppercase; */
/* 将所有字母变为小写字母 */
text-transform: lowercase;
}
</style>
</head>
<body>
<div class="info">my name is why, AGE IS 18</div>
</body>
</html>
- text-indent
用于设置第一行内容的缩进
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-size: 40px;
/* em: 相对于字体的大小 */
text-indent: 2em;
}
</style>
</head>
<body>
<h2>标题</h2>
<p>
如果说1号公路环岛之旅是行走冰岛的经典路线，与动物为伴的生态游则是深入了解冰岛的“最佳打卡方式”。在人类踏足冰岛前，这片火山地区几乎没有陆地动物存在，唯一的例外就是北极狐。这种小型哺乳动物周身包裹着厚厚的皮毛，可以在最后一个冰河时期结束前穿越冰封的海洋，抵达冰岛安家，成为这里唯一的原生陆地哺乳动物。直到后来有人类踏上冰岛，兔子、羊、马、鹿等哺乳动物才走进了冰岛的生态系统。比如冰岛马，它们在1000多年前从挪威跟随冰岛第一批定居者来到冰岛并繁衍生存下来。成年冰岛马体型矮小，会被人误会为小马驹，但实际上冰岛马步伐稳健，善于行走在崎岖地带，哪怕是初学者也可驾驭，骑着冰岛马旅游已成为当地颇受欢迎的旅游项目。
</p>
</body>
</html>
- text-decoration
用于设置文字的装饰线
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
.baidu {
/* 下划线 */
text-decoration: underline;
cursor: pointer;
}
.google {
/* 删除线 */
text-decoration: line-through;
/* 设置文本的颜色(前景色) */
color: red;
}
.bing {
/* 上划线 */
text-decoration: overline;
}
a {
/* 没有样式 */
text-decoration: none;
}
</style>
</head>
<body>
<!-- a元素默认有添加text-decoration -->
<a href="http://www.baidu.com">百度一下</a>
<!-- span元素也添加装饰线 -->
<span class="baidu">百度一下</span>
<!-- 装饰线其他的值 -->
<span class="google">Google一下</span>
<span class="bing">必应一下</span>
<a href="http://www.taobao.com">淘宝一下</a>
</body>
</html>
- text-align
直接翻译过来设置文本的对齐方式;下面代码能够实现文本的居中对齐;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: #f00; /* #FF0000 => rgb(255, 0, 0) */
color: white;
/*
left: 文本左对齐 默认
right: 文本右对齐
justify：两端对齐
center： 文本居中对齐
*/
/* text-align */
text-align: center;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐;下面代码证明了不仅仅是文本，对于图片也是有效的，所以MDN的解释比直译更加的清楚
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: #f00;
height: 300px;
/* 让图片居中显示 */
text-align: center;
}
img {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/gouwujie01.jpg" alt="">
</div>
</body>
</html>
W3C中的解释:描述行内(块)级元素在其块级父元素的对齐方式；该属性对块级元素不能生效
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: #f00;
height: 300px;
text-align: center;
}
.content {
background-color: #0f0;
height: 200px;
width: 200px;
/* 解决方法1： 将.content元素改为行内块元素 达到内容居中的效果 */
/* display: inline-block; */
/* 解决方法2 */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
- text-align中的justify ---(了解)
justify是两端对齐，平均分配每一个空间，但是对最后一行无效；如果想要对最后一行生效，则需要加上text-align-last：justify这个属性
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
background-color: #f00;
color: white;
text-align: justify;
/* 对最后一行生效 */
text-align-last: justify;
}
</style>
</head>
<body>
<div class="box">
This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation. why
</div>
</body>
</html>
- letter-spacing与word-spacing
letter-spacing：设置的字母之间的间距
word-spacing：设置单词之间的间距
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
letter-spacing: 10px;
word-spacing: 30px;
}
</style>
</head>
<body>
<div class="box">my name is coderwhy</div>
</body>
</html>
CSS字体属性
- font-size
设置文字的大小
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 继承先略过 */
.home {
/* 浏览器默认是16px */
font-size: 20px;
}
.box {
/* 字体设置的方式一: px */
/* font-size: 50px; */
/* 了解: em -> 父元素的字体的尺寸 */
/* 字体设置的方式二: em */
/* 继承父类的20px，这边字体大小为40px */
/* font-size: 2em; */
/* 字体设置的方式三: 百分比% */
/* 这边的百分比相对于父元素的百分比*/
/* 16px */
/* font-size: 80%; */
/* 40px */
font-size: 200%;
}
</style>
</head>
<body>
<div class="home">
<div class="box">我是div元素</div>
</div>
<div class="box1">我是div元素</div>
</body>
</html>
- font-family
用于设置文字的字体，可以写多个值；原因是当你设置一个字体之后，如果用户计算机上没有安装该字体的话就会选择浏览器的默认字体，如果显示的是默认字体则可能效果没有这么好，于是可以支持设置多个字体，尽量让用户使用我们设置的字体；或者也可以使用@font-face指定的可以直接下载的字体。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 可以外部引入CSS -->
<link rel="stylesheet" href="./css/base.css">
<style>
/* 也可以直接设置 */
body {
font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif;
}
</style>
</head>
<body>
</body>
</html>
- font-weight
用于设置文字的粗细
常见的取值：
- 100|200|300|400|500|600|700|800|900
- normal：等于400
- bold：等于700
strong、b、h1~h6等标签的font-weight默认就是bold
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* font-weight: bold; */
font-weight: 700;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
<div>我是div元素</div>
</body>
</html>
- font-style
用于设置文字的常规、斜体显示；em、i、cite、address、var、dfn等元素的font-style默认就是italic
◼ normal：常规显示
◼ italic(斜体)：用字体的斜体显示(通常会有专门的字体)
◼ oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* 斜体: 字体本身支持斜体时, 显示的斜体 */
/* font-style: italic; */
/* 倾斜: 只是让文本进行倾斜，不管是否有斜体 */
font-style: oblique;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
<div>我是div元素</div>
</body>
</html>
- font-variant
font-variant可以影响小写字母的显示形式- normal：常规显示
- small-caps：将小写字母替换为缩小过的大写字母
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
font-variant: small-caps;
}
</style>
</head>
<body>
<div class="box">My Name Is Coderwhy</div>
</body>
</html>
- line-height
行高可以先简单理解为一行文字所占据的高度
行高的严格定义是：两行文字基线（baseline）之间的间距
line-height最常用的场景就是使**文本（仅限于文本）**垂直居中，它的原理就是设置行高之后，减去字体大小，剩余的值平均分配到文字的上下，达到行内居中的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 100px;
background-color: #f00;
color: #fff;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
- font字体属性的缩写
缩写顺序：font-style font-variant font-weight font-size/line-heightfont-family
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* 字体的属性 */
font-size: 30px;
font-weight: 700;
font-variant: small-caps;
font-style: italic;
font-family: serif;
line-height: 30px;
/* font字体缩写属性 */
/* 1.5的行高是相对于font-size的 */
font: italic small-caps 700 30px/1.5 serif;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
特性：
- font-style、font-variant、font-weight可以随意调换顺序，也可以省略
- /line-height可以省略，如果不省略，必须跟在font-size后面
- font-size、font-family不可以调换顺序，不可以省略
选择器
- 通用选择器 一个网页中往往存在多个元素，且元素之间存在嵌套关系，那么如何简单快速的去选中网页中的全部元素呢，通用选择器就是专门解决这个问题的，语法：*{css语法}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* * {
font-size: 30px;
background-color: #f00;
} */
/* div {
background-color: #f00;
} */
/* 更推荐的做法 */
body, p, div, h2, span {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>我是div元素</div>
<p>我是p元素</p>
<div>
<h2>我是h2元素</h2>
<p>我也是p元素 <span>呵呵呵呵</span> </p>
</div>
</body>
</html>
但是这个方式也有缺陷：通用选择器是将所有的元素都遍历一遍，不管你这个网页中是否存在其这个元素，那么则会影响效率
- 元素选择器
以元素的名称去选中对应的元素，比如使用div，则当前页面中的所有div元素都会被它选中 - 类选择器 类选择器则是选中class为指定值的元素，可以选中一个或多个
- ID选择器
ID选择器会选中id为指定值的元素，只能选中一个，因为ID属性在一个页面中必须是唯一的
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*元素选择器，会选中页面中所有的div元素*/
div {
color: red;
}
/*class选择器，会选中class值为box的元素，可以选中一个或多个*/
.box {
color: blue;
}
/*id选择器，会选中ID值为home的元素，只能选中一个*/
#home {
color: green;
}
</style>
</head>
<body>
<!-- 强调: 在同一个HTML文档中, id不要重复, 应该是唯一 -->
<div>我是div1</div>
<div class="box">我是div2</div>
<div id="home">我是div3</div>
<p class="box">我是p元素</p>
<h2 id="div">我是h2标题</h2>
<!-- class/id的名称比较复杂 -->
<div class="box one"></div>
<div class="box-one box-first"></div>
<div class="box_one box_first"></div>
<!-- 大驼峰/小驼峰 -->
<!-- <div class="boxOne BoxFirst"></div> -->
</body>
</html>
- 属性选择器 ---了解
有两种格式，格式一：选中拥有某个属性的元素；元素二：选中拥有某个属性，且属性值为指定值的元素；
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 指定有title属性的元素 */
[title] {
color: red;
}
/* 指定有title属性，且title属性值为div */
[title=div] {
background-color: blue;
}
</style>
</head>
<body>
<div>我是div元素</div>
<div title="div">我也是div元素</div>
<p>我是p元素</p>
<h2 title="h2">我是h2元素</h2>
</body>
</html>
- 后代选择器
后代选择器就是选中直接后代和间接后代的元素，有两种格式；
格式一：选中直接后代
格式二：选中间接后代和直接后代
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器 */
/* 格式二：选中class值为home的元素的所有后代为span的元素，包括直接后代和间接后代 */
.home span {
color: red;
font-size: 30px;
}
/* .home的子代的span元素设置一个背景 */
/* 格式一：选中class为home的直接后代元素 */
.home > span {
background-color: green;
}
</style>
</head>
<body>
<div class="home">
<span>啦啦啦啦</span>
<div class="box">
<p>我是p元素</p>
<span class="home-item">呵呵呵呵</span>
</div>
<div class="content">
<div class="desc">
<p>
<span class="home-item">哈哈哈哈</span>
</p>
</div>
</div>
</div>
<!-- 不希望被选中 -->
<span>嘻嘻嘻</span>
<div>
<span>嘿嘿嘿</span>
</div>
</body>
</html>
- 兄弟选择器
兄弟选择器一：相邻兄弟选择器+
兄弟选择器二：普遍兄弟选择器~
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box + .content {
color: red;
}
.box ~ div {
font-size: 30px;
}
</style>
</head>
<body>
<div class="home">
<div>叽叽叽叽</div>
<div class="box">呵呵呵呵</div>
<div class="content">哈哈哈哈</div>
<div>嘻嘻嘻嘻</div>
<div>嘿嘿嘿嘿</div>
<p>我是p元素</p>
</div>
</body>
</html>
- 交集选择器
需要同时符合两个选择器条件(两个选择器紧密连接)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.box {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
<p class="box">我是p元素</p>
</body>
</html>
- 并集选择器
符合一个选择器条件即可(两个选择器以,号分割)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 并集选择器 */
body, p, h1, h2 {
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>我是p元素</p>
<h1>我是h1元素</h1>
</body>
</html>
- 伪类选择器
- 认识伪类
- 伪类也是选择器中的一种，用于选中处于某种特定状态的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 需求: 哪一个div鼠标放上去, 文字变成红色 */
/* :hover伪类 */
div:hover {
color: red;
}
</style>
</head>
<body>
<div class="box">我是div1元素</div>
<div class="box">我是div2元素</div>
<div class="box">我是div3元素</div>
<!--
链接元素的伪类会比较多：未点击，点击时，点击后。。。
-->
<a href="http://github.com">github</a>
</body>
</html>
(1) 动态伪类
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:focus、:hover、:active
除了a元素，:hover、:active也能用在其他元素上
/* a元素的链接从来没有被访问过 */
a:link {
color: red;
}
/* a元素被访问过了颜色 */
a:visited {
color: green;
}
/* a/input元素聚焦(获取焦点) */
a:focus {
color: yellow;
}
/* a元素鼠标放到上面 */
a:hover {
color: blue;
}
/* 点下去了, 但是还没有松手 */
a:active {
color: purple;
}
/* 所有的状态下同样的样式 */
a {
color: orange;
}
</style>
</head>
<body>
<a href="http://www.mi.com">小米</a>
<a href="http://www.baidu.com">百度一下</a>
<input type="text">
<div>我是div元素</div>
</body>
</html>
- 伪元素
伪类与伪元素还是有区别的，伪类是元素的某种状态，而伪元素则是存在的某个元素，但是又和正常的div，span元素有区别
常见伪元素：- ::first-line: 针对首行文本设置属性 ---了解
- ::first-letter：针对首个字符设置属性 ---了解
- ::before：在一个元素的内容之前加入其他内容
- ::after：在一个元素的内容之后加入其他内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 800px;
background-color: #f00;
color: #fff;
}
/* .keyword {
font-size: 30px;
color: orange;
} */
.box::first-line {
font-size: 30px;
color: orange;
}
.box::first-letter {
font-size: 50px;
color: blue;
}
</style>
</head>
<body>
<div class="box">
<span class="keyword">雁门关，别名西陉关 ，坐落于我国山西省忻</span>州市代县以北约成员国20千米的雁门山。它是长城上的一个关键大关，与宁武关、偏关并称之为“外三关”。坐落于偏关县大河上，辖四侧墙，总长度数百公里。迄今仍有30千米储存完好无损，所有用砖遮盖，沿堤岸耸立，十分壮阔。“边关丁宁岩，山连紫塞，地控大河北，鑫城携手共进强。”这也是前人对偏关的赞扬。早在春秋战国时代，这儿便是赵武灵王攻克胡林的竞技场。唐朝名将在关东建有九龙庙，宋代建有魏镇、杨三关。现有的关城始建明洪武二十三年，是重点学科文物古迹。
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.before {
color: red;
}
.after {
color: blue;
}
/* 伪元素 */
.item::before {
content: "321";
color: orange;
font-size: 20px;
}
.item::after {
/* content: "cba"; */
content: url("../images/hot_icon.svg");
color: green;
font-size: 20px;
/* 位置不是很好看(以后) */
position: relative; /* 相对定位 */
left: 5px;
top: 2px;
}
/* .new::after {
content: url("../images/new_icon.svg");
} */
/* 额外的补充 */
/* ::after是一个行内级元素 */
.box5::after {
/* 使用伪元素的过程中, 不要将content省略 */
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box">
<span class="before">123</span>
我是div元素
<span class="after">abc</span>
</div>
<div class="box2">
<span class="before">123</span>
我是box2
<span class="after">abc</span>
</div>
<!-- 伪元素方案 -->
<div class="box3 item">我是box3</div>
<div class="box4 item">我是box4</div>
<!-- 伪元素的补充 -->
<div class="box5">我是box5</div>
</body>
</html>
