初识CSS

前端的组成：

结构语言：HTML（盖房子、毛坯房）设计到布局设计

表现语言：CSS（装修）

行为语言：JavaScript（安装点电梯… 基于事件的）

1.了解CSS

CSS：Cascading Style Sheet 级联/层叠样式表

它是用来给我们的HTML做美化的，事实上HTML也能做一些美化，但是为什么单独提出来CSS呢，因为降低耦合，面向对象思想

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的引入方式

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

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

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

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

外部样式表：本项目中的CSS文件，，公网的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中有三大基本选择器：

**标签选择器 ：**标签名就作为一种选择器，表示给对应的标签统一设置样式。例如：h3 p

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

p{
    font-weight: bold;
}

**类选择器：**需要借助标签的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>

**ID选择器：**需要借助标签的id属性

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

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

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

5.掌握CSS的初级美化

5.1字体美化

字体类型：font-family

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

字体大小：font-size

font-size: 16px;

字体的风格：font-style

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

字体的粗细：font-weight

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

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

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

（×）字体颜色：font-color（√）文本颜色：color

5.2文本美化

文本颜色：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);
}

文本对齐方式：text-align（必须保证要设置的对齐文字是出于块元素内的）

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

• **（块元素和行内元素：）**在标准文档中，我们的HTML内的元素可以分为两大派。

  ​ - 块元素： 独占一行、可以设置宽度和高度等信息。例如：div p h1-h6…

​ - **行内元素：**多个行内元素可以再一行展示内容，它不可以设置宽度和高度等信息，内容撑开高度和高度。a image span…

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

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

line-height: 30px;

文本装饰：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 当鼠标悬浮在超链接标签上时触发选中

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

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

• linker 可以设置超链接未点击前的样式（等价于标签选择器直接设置）
• visited 可以设置超链接被点击后的样式
• active 可以设置超链接被点击但还未释放的样式

5.4鼠标指针

• 小手型指针：

/* pointer 小手*/
cursor：pointer;

• wait 加载中
• help 帮助带问号
• text 文本光标型
• crosshair 十字型
• default 默认光标样式

5.5背景美化

• **背景颜色设置：**backgroud-color
• **背景图片：**backgroud-image
• 背景尺寸：backgroud-size
• **背景平铺：**backgroud-repeat
• **背景定位：**backgroud-position
• 背景属性：backgroud

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

6.掌握列表的使用

在HTML中为我们准备了三种列表形式：无序列表，有序列表，定义列表

无序列表：以符号为前缀的列表（应用最广是a标签之外最常用的）

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

有序列表：以有序的数字或者有序的符号（I II III A B C D）

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

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

<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;*/
}