1.css简介
css是层叠样式表的简称,也称之为css样式表或级联样式表。
css最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构(html)与样式(css)相分离。
1.1css语法规范
css规则有两个主要的部分构成:选择器以及一条或多条声明。
(一定要加分号表示结束)
在<head></head>里面写
<style>
/* 选择器{样式} */
/* 给谁改样式{改什么样式} */
p {
color: red;
/* 修改了文字大小为12像素 */
font-size: 12px;
}
</style>
1.2 CSS代码风格
1.2.1样式格式书写:用展开格式!
1.2.2样式大小写:全部用小写字母,特殊情况除外
1.2.3空格规范
2.CSS基础选择器
2.1CSS选择器的作用
选择器(选择符)就是选择标签用的。
2.2选择器分类
选择器分类:基础选择器(单个选择器组成的)、复合选择器
基础选择器:标签选择器、类选择器、id选择器和通配符选择器
2.3标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
2.4类选择器
单独选一个或几个标签,可以使用类选择器。
<style>
/* 类选择器口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用。 */
.red {
color: red;
}
.star-xing {
color: purple;
}
</style>
</head>
<body>
<ul>
<li class="red">冰雨</li>
<li class="red">来生缘</li>
<li>李香兰</li>
<li>生僻字</li>
<li class="star-xing">江南style</li>
</ul>
<div class="red">我也想变红色</div>
</body>
类选择器-多类名
我们可以给一个标签指定多个类名,简单理解就是一个标签有多个名字。
多类名使用方式:
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">易烊千玺</div>
</body>
2.5id选择器
HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义。
<style>
/* id选择器的口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用。 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">易烊千玺</div>
</body>
2.6通配符选择器
在CSS中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)
<style>
* {
margin: 0;
padding: 0;
color: red;
font-size: 35px;
}
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
2.7基础选择器总结
3.CSS字体属性
3.1字体系列
CSS使用font-family属性定义文本的字体系列。(写多个字体是为了兼容性,从第一个字体开始看,如果第一个字体可以使用就会选用第一个字体,第一个字体不可使用就会看第二个字体可不可以使用,以此类推)
<style>
h2 {
font-family: '微软雅黑';
}
p {
/* font-family: 'Microsoft YaHei',Arial, Helvetica, sans-serif; */
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈,</p>
<p>前段总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个,</p>
<p>拼死也要克服它,</p>
<p>这是pink的秘密也是老师最后的嘱托</p>
</body>
3.2字体大小
CSS使用font-size属性定义字体大小。
<style>
body {
font-size: 16px;
}
/* 标题标签比较特殊,需要单独指定文字大小 */
h2 {
font-size: 18px;
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
</body>
3.3字体粗细
CSS使用font-weight属性设置文本字体的粗细。
<style>
.bold {
/* font-weight: bold; */
/* 这个700的后面不要跟单位 等价于bold 都是加粗的效果 */
/* 实际开发中,我们更提倡使用数字来表示加粗或变细 */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p class="bold">拼死也要克服它,</p>
<p>这是pink的秘密也是老师最后的嘱托</p>
</body>
3.4 文字样式
CSS使用font-style属性设置文本的风格。
<style>
p {
font-style: italic;
}
em {
/* 让倾斜的字体不倾斜,就是赶紧脉动回来 */
font-style: normal;
}
</style>
</head>
<body>
<p>同学,上课时候的你</p>
<em>下课时候的你</em>
</body>
3.5字体复合属性
<style>
/* 想要div文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft YaHei'; */
/* 复合属性:简写的方式 节约代码 */
/* font: font-style font-weight font-size/line-height font-family; */
/* font: italic 700 16px/20px 'Microsoft YaHei'; */
font: 20px '黑体';
}
</style>
</head>
<body>
<div>三生三世十里桃花,一心一意百行代码</div>
</body>
3.6字体属性总结
4.CSS文本属性
CSS Text(文本)属性可以定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
4.1文本颜色
color属性用于定义文本的颜色。
<style>
div {
/* color: red; */
color: #ff0000;
/* color: rgb(200,0,0); */
}
</style>
</head>
<body>
<div>好事总会发生在下一个转弯,祝我们愿望都一一实现!</div>
</body>
4.2对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式。
<style>
h1 {
/* 本质是让h1盒子里面的文字水平居中对齐 */
/* text-align: center; */
text-align: right;
}
</style>
</head>
<body>
<h1>居中对齐的标题</h1>
</body>
4.3装饰文本
text-decoration属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线等
<style>
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
/* text-decoration: line-through; */
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div>生活顺利!</div>
<a href="#">生活顺利</a>
</body>
4.4文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
<style>
p {
font-size: 24px;
/* 文本的第一行首行缩进 多少距离 */
/* text-indent: 20px; */
/* 如果此时写了2em 则是缩进当前元素2个文字大小的距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络,这代表了中国最成熟的三套城布轨道交通系统。</p>
<p>可即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤—对很多人而言,每次挤地铁的过程,都像是一场硬仗。更何况,还都是败仗居多。</p>
<p>那么,当越来越多的二线甚至三线城市迎接来了自己的地铁,中国哪里的地铁是最拥挤的呢?</p>
</body>
4.5行间距
line-height属性用于设置行间距的距离(行高),可以控制文字行与行之间的距离。
<style>
div {
line-height: 26px;
}
p {
line-height: 25px;
}
</style>
</head>
<body>
<div>中国人</div>
<p>打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络,这代表了中国最成熟的三套城布轨道交通系统。</p>
<p>可即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤—对很多人而言,每次挤地铁的过程,都像是一场硬仗。更何况,还都是败仗居多。</p> <p>那么,当越来越多的二线甚至三线城市迎接来了自己的地铁,中国哪里的地铁是最拥挤的呢?</p>
</body>
4.6文本属性总结
5.CSS引入方式
5.1CSS的三种样式表
按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类:行内样式表(行内式)、内部样式表(嵌入式),外部样式表(链接式)。
5.2内部样式表
内部样式表(内嵌样式表)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个<style>标签中。
5.3行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式
5.4外部样式表
实际开发都是外部样式表,适合于样式比较多的情况,核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步:
1.新建一个后缀名为.css的样式文件,把所有的CSS代码都放入此文件中。
2.在HTML页面中,使用<link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">
(一般写在head里)