CSS

1. CSS

前端的组成：

1. 结构语言：HTML
2. 表现语言：CSS
3. 行为语言：JavaScript
   CSS：Cascading Style Sheet 级联/层叠样式表
   CSS是用来给我们的HTML做美化的，事实上HTML也能做一些美化，但是为什么单独提出来CSS，那是因为可以降低耦合，并且CSS的样式非常丰富，这是HTML所不可比拟的。

2. CSS的基本语法

// 选择器：选中要美化的元素
// 声明：给选中的元素美化什么样

选择器{
	声明1；
	声明2；
	生命3
}

示例：将p标签的所有字体颜色设置为红色
p{
	color：red；
}

CSS使用示例：

style标签是用来专门编写CSS样式代码的，规范要求将style放在head标签内
<style>
h3{
	color:yellow	
}
<style/>

3. 掌握CSS的引入方式

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

<!-- 行内样式表 -->
<h3 style="color:red;">出师表</h3>

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

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

	}
</style>

• 外部样式表：
  href：外部CSS文件地址可以在项目中相对/绝对路径，也可以在其他服务器上。

<link rel="stylesheet" type="text/css" href="css/index.css"/>
<style type="text/css">
	@import url("css/index.css");
</style>

引入方式的优先级分为，行内样式表优先级最高，内部样式表和外部样式表谁在后面谁优先级高。

4. 掌握CSS的基本选择器

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

h3{
	color:deeppink;
}
p{
	font-weight:bold;
}

• 类选择器：需要借助标签的class属性

.类名{
	font-weight:bold;
}
<p class="类名">？？？</p>

• ID选择器

#id名{
	color:greenyellow;
}
<p id="id名">？？？</p>

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

5.掌握CSS的初级美化

5.1 字体美化

• 字体类型：font-family

h3{
	font-family: "楷体";
    font-family: "宋体";
    font-family: "\u5b8b\u4f53";
}
h4{
	font-family: tahoma, arial, "Hiragino Sans GB", "宋体", sans-serif;
}

• 字体大小：font-size

h3{
	font-size:32px;
}

• 字体的风格：font-style

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

• 字体的粗细：font-weight

p{
    font-weight: lighter;
    font-weight: normal;
}

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

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

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…

• 文本缩进：text-indent

p{
	font-size:16px;
	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;
}

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

5.4 鼠标指针

/* 手型指针 */
cursor：pointer；
/* 加载中指针 */
cursor：wait；
/* 帮助指针带问号 */
cursor：help；
/* 文本光标型 */
cursor：text；
/* 十字型指针 */
cursor：crosshair
/* 默认指针 */
cursor：default

5.5 背景美化

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

6. 列表使用

1.无序列表：无序列表以符号为前缀的列表

<!-- 无序列表  默认带一个实心圆点 -->
<!-- ul声明无序列表  ul标签内只能写li标签 -->
<!--<ul type="square">-->
<ul>
    <!-- li列表项 -->
    <li>文本1</li>
    <li>文本2</li>
    <li>文本3</li>
    <li>文本4</li>
</ul>

2.有序列表：有序列表以有序数字或者符号排序

<ol>
    <li>文本1</li>
    <li>文本2</li>
    <li>文本3</li>
    <li>文本4</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>