初识CSS

前端的组成：
结构语言：HTML
表现语言：CSS
行为语言：JavaScript

1.了解CSS

CSS：它是用来给HTML做美化的，能够降低耦合，面向对象。
CSS样式非常丰富，这是HTML不可比拟的。
CSS文件格式：.css

2.掌握CSS的基本语法

//选择器：选中要美化的元素
//声明：就是要给选中的元素美化什么？美化成啥样？
选择器{
	声明1; //属性名：属性值；
	声明2；
	声明3
}
示例：要求将p标签内的字体颜色设置为红色
p{
    color:red;
}

CSS使用示例：

<!-- HTML中 标签都有特别的含义 我们如果想编写CSS代码就需要在特别的标签中使用 -->
<!--
	style标签是用来专门编写CSS样式代码的
规范来讲它需要放置在head标签内
-->
<style>
    h3{
        /* 设置字体颜色为红色 */
        color:red;
    }
</style>

3.掌握CSS的引入方式

1.行内样式表：直接在标签中通过style属性设置样式，每一个HTML标签都有此属性。

<!-- 行内样式表
	优点：直接 直观
	缺点：耦合导致阅读困难、它只能对单个标签设立样式
-->
<h3 style="color: red;">夏日绝句</h3>

2.内部样式表：在head标签中添加style标签，然后编写完整的CSS语法。

<!-- 内部样式表 -->
<style type="text/css">
    h3{
        color: yellow;
    }
</style>

3.外部样式表
1.本项目中的css文件
2.公网的css链接（CDN加速）

<!-- 外部样式表 href:外部CSS文件地址(可以在你项目中 相对/绝对，也可以在其他服务器上)  -->
<!-- [最常用]它是多种CSS引入方式中最常用的    它也是外部样式表引入的最常用的-->
<!--<link rel="stylesheet" type="text/css" href="css/index.css"/>-->
<style type="text/css">
    /* CSS语法 用来引入外部样式文件时 如果出现不兼容CSS 2.x语法时 将无法使用 */
    @import url("css/index.css");
</style>

**三种引入方式的优先级：**行内样式表优先级最高 > 内部样式表和外部样式表谁在后面谁优先级高(代码是由上而下执行的，后面的相同设置会覆盖前面的)

4.掌握CSS的基本选择器

CSS中有三大基本选择器：
1.标签选择器：标签名就作为一种选择器，表示给对应的标签统一设置样式。

/* 标签选择器 */
h3{
    color: deeppink;
}

p{
    font-weight: bold;
}

2.类选择器：需要借组标签的class属性(应用最广泛的基本选择器)

/* 类选择器：.标签的class属性值 */
.poem{
    font-weight: bold;
}

.hehe{
    color: red;
}

<div>
    <h3>夏日绝句</h3>
    <!--  如果应用多个类选择器 可以以空格隔开 -->
    <p class="poem hehe">
        生当作人杰，死亦为鬼雄。<br/>
        至今思项羽，不肯过江东。
    </p>
    <p class="hehe">
        呵呵
    </p>
    <p class="poem">
        哈哈
    </p>
</div>

3.ID选择器：需要借组标签的id属性（不常用）

/* ID选择器 */
#poem{
    color: greenyellow;
}

<!-- 严格来讲id选择器应该是唯一的  但是因为HTML是弱语法  所以你会发现ID选择器可以实现和类选择器一样的效果 -->
<p id="poem">
    生当作人杰，死亦为鬼雄。<br/>
    至今思项羽，不肯过江东。
</p>

**基本选择器优先级(范围越小 优先级越高)：**ID选择器 > 类选择器 > 标签选择器

5.掌握CSS的初级美化

5.1字体美化
1.字体类型：font-family

h3{
    /*font-family: "楷体";*/
    /*font-family: "宋体";*/
    /*font-family: "\u5b8b\u4f53";*/
    /* 如果这样设置是为了防止当前面的字体无法使用时  可以作为替换性内容 */
    /* 一般会对中文和英文分别设置字体 */
    font-family: tahoma, arial, "Hiragino Sans GB", "宋体", sans-serif;
}

2.字体大小：font-size

font-size:16px;

3.字体的风格：font-style

h3{
    /* 默认的 */
    /*font-style: normal;*/
    /* 采用字体原有的斜体设计 */
    /*font-style: italic;*/
    /* 采用固定的倾斜角度对字体倾斜 */
    /*font-style: oblique;*/
}

4.字体的粗细:font-weight

p{
    /*font-weight: bold;*/
    /* 加粗 */
    /*font-weight: 700;*/
    /* 更细的 */
    font-weight: lighter;
    font-weight: normal;
}

5.一个字体属性设置所有的字体样式：font

body{
    /*font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;*/
    /* font-size: 12px/（行高）line-height: 1.5; */
    font: 12px/1.5 tahoma,arial,"\5b8b\4f53";
}

5.2文本美化
1.文本颜色：color

p{
    /* 可以使用关键字作为颜色值 */
    /*color: orangered;*/
    /* 可以使用16进制颜色值 */
    /*color: #D3C294;*/
    /* 配置三原色 红色 绿色  蓝色 */
    /*color: rgb(255,0,0);*/
    /*color: rgb(255,125,0);*/
    /* alpha 透明度 0 - 1之间  值越大透明度越低  */
    color: rgba(255,0,0,0.1);
}

2.文本对齐方式：text-align (必须保证要设置的对齐文字是处于块元素内的)

p{
    /*text-align: left;*/
    /*text-align: right;*/
    /*text-align: center;*/
    /* 两端对齐 */
    /*text-align: justify;*/
}

块元素和行内元素：

在标准文档流中，我们的HTML内的元素可以分为两大派。

块元素：独占一行、可以设置宽度和高度等信息。例如：div p h1-h6…
-行内元素：多个行内元素可以在一行展示内容，它不可以设置宽度和高度等信息，内容撑开宽度和高度。 a image span…

3.文本缩进：text-indent

p{
    font-size: 16px;
    /* 缩进 你根据字体大小计算缩进值 */
    /* px是绝对单位 */
    /*text-indent: 32px;*/
    /* em是相对单位 它会以当前字体大小进行计算 */
    text-indent: 2em;
}

4.文本行高：（行间距）line-height

line-height: 30px;

5.文本装饰:text-decoration

span{
    /* 下划线 */
    /*text-decoration: underline;*/
    /* 上划线 */
    /*text-decoration: overline;*/
    /* 删除线：中划线 */
    /*text-decoration: line-through;*/
    /* 普通文字默认情况下为none */
    text-decoration: none;
}

a{
    /* 超链接标签默认文字拥有下划线  一般我们会对其进行下划线去除 */
    text-decoration: none;
}

5.3超链接美化
伪类选择器，可以应用其他的标签，但是常用于a标签。

选择器:伪类选择器名
示例：	a:hover 当鼠标悬浮在超链接标签上时触发选中

1.hover 可以设置鼠标悬浮在超链接上的样式

/* 鼠标悬浮其上时触发选中 */
a:hover{
    text-decoration: underline;
    color: orange;
}

2.linked 可以设置超链接未点击前的样式(等价于标签选择器直接设置)
3.visited 可以设置超链接被点击后的样式
4.active 可以设置超链接被点击但还未释放的样式

5.4鼠标指针
1.小手型指针

/* pointer 小手 */
cursor: pointer;

2.wait 加载中
3.help 帮助带问号
4.text 文本光标型
5.crosshair 十字型
6.default 默认光标样式

5.5背景美化
1.**背景颜色设置：**background-color
2.**背景图片：**background-image
3.背景尺寸：background-size
4.**背景平铺：**background-repeat
5.**背景定位：**background-position
6.背景属性：background

background: url(img/arrow-right.gif) no-repeat 170px center;

6.掌握列表的使用

在HTML中为我们准备了三种列表形式：无序列表，有序列表，定义列表。
1.无序列表：以符号为前缀的列表 （应用最广是a标签之外的最常用的）

<!-- 无序列表  默认带一个实心圆点 -->
<!-- ul声明无序列表  ul标签内只能写li标签 -->
<!--<ul type="square">-->
<ul>
    <!-- li列表项 -->
    <li>蔡英文为2020大选大肆组织台独</li>
    <li>蔡徐坤幕后推手出炉</li>
    <li>蔡浩然明天将组织英语朗读</li>
    <li>蔡雷...</li>
</ul>

2.有序列表：以有序的数字或者有序的符号(I II III A B C D)

<!-- 有序列表 默认为1. 2. 3.有序数列前缀 -->
<ol>
    <li>蔡英文为2020大选大肆组织台独</li>
    <li>蔡徐坤幕后推手出炉</li>
    <li>蔡浩然明天将组织英语朗读</li>
    <li>蔡雷...</li>
</ol>

3.定义列表：带小标题的列表形式

<dl>
    <!-- 标题 -->
    <dt>水果</dt>
    <!-- 标题下的列表 -->
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>西瓜</dd>
    <dd>胡萝卜</dd>
    <dt>蔬菜</dt>
    <dd>西红柿</dd>
    <dd>黄瓜</dd>
    <dd>冬瓜</dd>
    <dd>南瓜</dd>
</dl>

对于列表的样式设置，CSS有专门的属性

ul{
    /* 它其实是三个子属性的集合体  但是通常用它来去除列表前缀符号 */
    list-style: none;
    /*list-style: amharic;*/
}