CSS简介
从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。
什么是CSS样式?
简单来说,层叠样式表(Cascading Style Sheet)是一种专门用来控制界面外观风格的文档。 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
CSS使用方式
<!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>
/* 选择器 */
p {
color: pink;
}
</style>
<!-- 外联样式 -->
<link rel="stylesheet" href="./01-外联样式.css">
</head>
<body>
<!-- css四种使用方式 -->
<!-- 1.行内样式 不好维护,代码结构不清晰,不推荐使用 -->
<!-- 2.内联样式 只适合写小练习,不适合写大项目,只作用于本页面 -->
<!-- 3.外联样式 可以作用于多个页面,一个页面可以引入多个css文件,没有缺点 -->
<!-- 4.导入外部样式表 很少使用,一般只会导入一些基本样式 -->
<!-- 1.行内样式 -->
<div style="color: red;">我是最经典的块级元素</div>
<!-- 2.内联样式 -->
<p>我是段落标签</p>
<p>我是段落标签2</p>
<!-- 3.外联样式 -->
<span>我是span标签</span>
</body>
</html>
CSS字体属性
<!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>
p {
font-size: 32px;
}
div {
/* 1.字体大小 */
/* 字体大小默认值为 16px,最小值为 12px */
/* 1.1 单位px */
font-size: 20px;
/* 1.2 单位em, em会根据父元素的字体大小变化而变化 */
/* font-size: 2em; */
/* 2.字体家族 */
font-family: "微软雅黑";
/* 3.字体粗细 */
/* lighter 细体 normal 默认 bold 加粗 */
/* 100-300 细体 400-500 正常 600-900 加粗 */
font-weight: 700;
/* 4.字体风格 */
/* normal 默认正常 italic 倾斜 */
font-style: normal;
/* 5.综合写法 */
/* font: font-style font-weight font-size font-family; */
/* 可选 可选 必须 必须 */
font: 30px "楷体";
}
b {
/* 取消字体加粗 */
font-weight: normal;
}
i {
/* 取消字体倾斜 */
font-style: normal;
}
</style>
</head>
<body>
正常文本
<div>
TFBoys演唱会门票真贵啊
</div>
<p>TFBoys演唱会门票真贵啊</p>
<span>正常文本</span>
<b>字体加粗</b>
<i>字体倾斜</i>
</body>
</html>
CSS基本选择器
<!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>
/* 基本选择器 */
/* 1.标签选择器 */
div {
font-size: 20px;
}
/* 2.类名选择器 */
/* 一个标签可以有多个类名;一个类名选择器可以作用域多个元素 */
.box {
color: red;
}
.box1 {
font-weight: 700;
}
/* 3.ID选择器 */
/* id具有唯一性,不能出现相同的id */
#pox {
font-style: italic;
}
/* 4.通配符选择器 */
/* 作用域所有的元素,一般用于做页面的初始化样式 */
* {
font-family: "楷体";
color: white;
}
</style>
</head>
<body>
<div class="box box1">快该干饭了</div>
<div id="pox">好饿,今天中午吃啥?</div>
<p class="box">世界难题就是吃啥</p>
</body>
</html>
CSS伪类选择器
<!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>
/* 伪类选择器 */
/* 1.未访问的链接 */
.alink:link {
color: green;
}
/* 2.激活时的链接 */
.alink:active {
color: pink;
}
/* 3.访问后的链接 */
.alink:visited {
color: orange;
}
/* 4.鼠标移入时 */
.alink:hover {
font-size: 30px;
font-weight: 700;
}
</style>
</head>
<body>
<a href="./03-字体属性.html" class="alink">百度一下</a>
</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 {
/* 字体颜色 */
/* 单词 red green blue pink orange yellow black white purple gray springgreen skyblue deeppink */
/* color: red; */
/* 16进制 123456789abcdef f00 0f0 00f 000 fff ccc 999 */
/* color: #ccc; */
/* rgb表示法 0-255 */
/* color: rgb(255, 0, 0); */
/* rgba表示法 a代表透明度,值是 0-1 之间的数 */
color: rgba(255, 0, 0, 0.2);
/* 行间距 */
/* line-height: 30px; */
/* 单行文本垂直居中: 行高 = 盒子高 注意:是单行文本!!! */
line-height: 100px;
/* 文本对齐方式 默认left 居中center 右对齐right 两端对齐justify */
text-align: justify;
/* 首行缩进 */
text-indent: 2em;
/* 文本修饰 */
/* overline 上划线 */
/* underline 下划线 */
/* line-through 贯穿线 */
/* none 取消文本修饰 */
text-decoration: line-through;
/* 字符间距 */
letter-spacing: 5px;
/* 单词间距 */
word-spacing: 10px;
/* 文字阴影 */
/* text-shadow: 水平偏移 垂直偏移 模糊距离 阴影颜色; */
/* 必须 必须 可选 可选 */
text-shadow: 5px 10px 2px #f00;
}
</style>
</head>
<body>
<div>大丈夫生于天地之间,岂能郁郁久居人下</div>
</body>
</html>