1.1 CSS简介
- HTML的局限性：只关注内容的语义。
- CSS：层叠样式表，CSS样式表或级联样式表。
- 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>CSS规范</title>
<style>
/* 选择器 {样式} */
/* 给谁改样式 {改什么样的样式} */
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>CSS语法规范</p>
</body>
</html>
- CSS代码风格：紧凑格式、展开格式。
1.2 CSS基础选择器
- 选择器：根据不同需求把不同的标签选出来，选择标签用的。
- 标签选择器（元素选择器）：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签制定统一的CSS样式。
标签名{
属性1:属性值1;
属性2:属性值2;
...
}
- 类选择器：差异化选择不同的标签，单独一个或者几个标签。
<style>
/*
.类名{
属性1:属性值1;
属性2:属性值2;
...
}
样式点定义，结构类（class）调用，一个或多个，开发最常用
*/
.red {
color: red;
}
</style>
<li class="red">白桃沁雪</li>
<li class="red">烟雨江南</li>
<li>蜜桃乌龙</li>
- 类选择器-多类名：一个标签制定多个类名，多个类名之间用空格隔开。
<style>
.box {
width: 100px;
height: 100px;
}
.yellow {
background-color: yellow;
}
.green {
/* width: 100px;
height: 100px; */
background-color: green;
}
</style>
/* 各个类名中间用空格隔开*/
<div class="box yellow"></div>
<div class="box green"></div>
<div class="box yellow"></div>
- id选择器：以id属性来设置id选择器，#来定义。
<style>
/*
#id名{
属性1:属性值1;
属性2:属性值2;
...
}
样式#定义，结构id调用，只能调用一次，别人切勿使用
*/
#pink {
color: pink;
}
</style>
<div id="pink">id选择器</div>
- 通配符选择器：标识选取页面中所有元素（标签），使用*定义。
<style>
/*
#* {
属性1:属性值1;
属性2:属性值2;
...
}
不需要调用，自动就给所有的元素使用样式
*/
* {
color: red;
}
</style>
<div>1</div>
<div>2</div>
1.3 CSS字体属性
- font- family：定义文本的字体系列。
<style>
p {
font-family:"微软雅黑";
}
div {
font-family:"Microsoft YaHei","微软雅黑";
}
</style>
- font-size：字体大小
<style>
/* 标题标签需要单独指定文字大小 */
p {
font-size:20px;
}
</style>
- font-weight：字体粗细
<style>
p {
/*
bold:加粗
light:细体
normal:默认值,400
*/
font-weight:700;
/*700等价于bold，加粗 */
}
</style>
- font-style：字体样式
<style>
p {
/*
normal:默认值,浏览器会显示标准的字体样式
italic:浏览器会显示斜体的字体样式
*/
font-style:normal;
}
</style>
- 字体复合属性：不需要设置的属性可以省略（取默认值），但必须保留font-size和font- family属性，否则font属性将不起作用。
<style>
div {
/*
font:font-style font-weight font-size/line-weight font-family;
*/
font:italic 700 16px 'Microsoft yahei';
}
</style>
1.4 CSS文本属性
- 文本颜色：color
- 对齐文本：text-align，水平对齐。center、left、right
<style>
p {
text-align:left;
}
</style>
- 装饰文本：text- decoration
- 文本缩进：text-indent，文本的首行缩进
<style>
p {
text-indent:2em;
/* em是一个相对单位，是当前元素1个文字的大小 */
}
</style>
- 行间距：line-height，可以控制文字与行之间的距离
<style>
p {
line-height:20px;
/* 上间距+文本高度+下间距 */
}
</style>
1.5 CSS的引入方式
- CSS的三种样式表：行内样式表（行内式），内部样式表（嵌入式），外部样式表（链接式）。
/*行内样式表*/
<style>
p {
color:pink;
font-size:12px;
}
</style>
/*内部样式表*/
<p style="color:pink; font-size:12px"></p>
/*外部样式表*/
/*
1.建立.css文件
2.在HTML页面中，使用<link>标签引入这个文件
*/
<link rel="stylesheet" href="css文件路径">
