Web前端——CSS

页面美化和布局控制

概念：cascading style sheets 层叠样式表

层叠:多个样式可以作用在同一个html的元素上，同时生效

优点：

1.功能强大

2.将内容展示和样式控制分离—— 解耦，分工协作更容易，提高开发效率

Css与html的结合方式

1.内联样式：在标签内使用style属性指定css代码；

如：<div style="color: aqua;">hello</div>

2.内部样式

在head标签内，定义style标签的标签体内容就是css代码

如<style>    div{     color: antiquewhite;    }  </style>

3.外部样式

定义css资源文件；

通过link标签引入外部资源文件

例如：css文件：

div{
    color:red;
}

引入文件：

<link rel="stylesheet" href="CSSFile/a.css">

*三种方式css作用范围越来越大，常用方式2和3。

CSS基本语法：

格式：

1.选择器{

属性名：属性值；

属性名2：属性值2；

........

}

选择器：删选具有相似特征的元素。

分类

基础选择器 ​ 1.id选择器：选择具体的id属性值元素，建议一个html文件中id唯一

语法：#id属性值{}

2.元素选择器：选择具有相同标签名的元素

语法：标签名{}

3.类选择器：选择具有相同的class属性值的元素

语法：.class属性值{}

*优先级：id>类>元素

扩展选择器： ​ 1.选择所有元素：

语法：*{}

2.并集选择器：

选择器1，选择器2{}

3.子选择器：筛选选择器1元素下的选择器2元素

语法：选择器1 选择器2{}

4.父选择器：筛选选择器2的父选择器1

语法：选择器1 > 选择器2{}

5.属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称【属性名=“属性值”】{}

6.伪类选择器：选择一些元素具有的状态

语法：元素 ： 状态{}

属性：

1.字体、文本：

例：font—size：字体大小

color:文本颜色

text-align：对齐方式

line—height：行高

2.背景

background：

3.边框：

border：设置边框，符合属性

4.尺寸

width：宽度

height：高度

5.盒子模型：控制布局

marign：外边距

padding：内边距

（默认情况下，内边距会影响整个盒子的大小 解决：box—sizing：border—box）

float:浮动